MarkDown 高亮 (Highlighter) 的三种方法

谷月姐用 MarkDown 做笔记,想要把重点内容用高亮标记出来。但是,MarkDown 的基本语法不支持文字高亮。不过,经过摸索,谷月姐找到了三种方法可以在 MarkDown 中实现高亮,还可以自定义高亮颜色。

MarkDown 高亮的三种方法

直接用 HTML5 标签 ...。可以在 标签中添加参数 style="background-color: #FFFF00" 指定背景高亮的颜色。经测试,为知笔记支持此标签。

用 mark 标签让文字高亮

用 mark 标签让文字高亮

用

或 标签并且指定背景高亮的颜色。例如:

...
或

...。

经测试,为知笔记支持此标签。

用 div 标签让文字高亮

用 div 标签让文字高亮

用 span 标签让文字高亮

用 span 标签让文字高亮

在文字两边分别加两个等号(==...==)。有些编辑器支持这种 MarkDown 语法,会把文字两侧的等号渲染成 ... 标签。 但是,很遗憾,经测试,为知笔记、为知笔记 Plus、VSCode 还有 本博客 使用的 Hexo 6.3.0 都不支持。

==用两个等号(MarkDown 语法)让文字高亮==

用两个等号(MarkDown 语法)让文字高亮

让各种本地编辑器支持等号高亮的方法

(1) VSCode:VSCode 默认是不支持等号高亮的。需要安装插件 Markdown Preview Enhanced 或 Markdown Extended,并用它取代 VSCode 默认的预览就可以了。

(2) Typora:Typora 默认没有启用等号高亮。需要手工设置:偏好设置→MarkDown→MarkDown 扩展语法→高亮。

让 Hexo 博客支持等号高亮的方法

首先,给 Hexo 更换渲染器,把渲染器换成 hexo-renderer-markdown-it-plus,并且安装两个依赖 markdown-it 和 markdown-it-mark。

1234npm uninstall hexo-renderer-marked --savenpm install hexo-renderer-markdown-it-plus --savenpm install markdown-it --savenpm install markdown-it-mark --save

然后,修改博客目录里的 _config.yml 文件,添加以下内容:

1234markdown: plugins: - "markdown-it" - "markdown-it-mark"

图片版权

题图:Image from Pickpik.com

头图:Image by peritas from Pixabay