MarkDown 高亮 (Highlighter) 的三种方法

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 语法)让文字高亮

    截图来自在线编辑器 StackEdit.io


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

(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。

1
2
3
4
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 文件,添加以下内容:

1
2
3
4
markdown:
plugins:
- "markdown-it"
- "markdown-it-mark"

图片版权

题图:Image from Pickpik.com

头图:Image by peritas from Pixabay


求扫码打赏
“我这么可爱,请给我钱 o(*^ω^*)o”

MarkDown 高亮 (Highlighter) 的三种方法
https://blog.kukmoon.com/2bbbe6e54c9b/
作者
Kukmoon谷月
发布于
2023年10月11日
许可协议