MarkDown 高亮 (Highlighter) 的三种方法

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

MarkDown 高亮的三种方法

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

   ---

   <mark>用 mark 标签让文字高亮</mark>

   用 mark 标签让文字高亮

   ---

2. 用 <div> 或 <span> 标签并且指定背景高亮的颜色。例如：
   <div style="background-color: #FFFF00">...</div> 或
   <span style="background-color: #FFFF00">...</span>。
   经测试，为知笔记支持此标签。

   ---

   <div style="background-color: #FFFF00">用 div 标签让文字高亮</div>

   用 div 标签让文字高亮

   ---

   <span style="background-color: #FFFF00">用 span 标签让文字高亮</span>

   用 span 标签让文字高亮

   ---

3. 在文字两边分别加两个等号（==...==）。有些编辑器支持这种 MarkDown 语法，会把文字两侧的等号渲染成 <mark>...</mark> 标签。 但是，很遗憾，经测试，为知笔记、为知笔记 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。

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

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

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

图片版权

题图：Image from Pickpik.com

头图：Image by peritas from Pixabay