我们知道Hexo博客默认的markdown渲染引擎hexo-renderer-marked是不支持emoji渲染的,如果hexo博客需要支持emoji,我们需要更换其markdown渲染引擎为hexo-renderer-markdown-it,然后安装markdown-it-emoji插件,最后更改站点的markdown配置即可。

步骤

  1. 首先卸载hexo-renderer-marked,一定要卸载,不然hexo还是会默认选择这个作为markdown渲染引擎,如果卸载报错,删除package.jsonhexo-renderer-marked这一行然后删除node_module重新安装依赖就好啦
1
npm un hexo-renderer-marked -S
  1. 安装hexo-renderer-markdown-itmarkdown-it-emoji
1
npm i hexo-renderer-markdown-it markdown-it-emoji -S
  1. 更改站点的markdown配置,注意是根目录里站点的配置而不是主题设置哦
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-emoji
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol: ''

至此就大工告成啦,来试试!🐯 🎉

同时支持如emoji编码编译如:tiger:这种,以及输入法带的emoji表情两种编译哦!

补充:踩坑记录

在做这个emoji支持设置的时候,也看了好几个网上的文章,都是这样写的配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
markdown:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- markdown-it-footnote
- markdown-it-sup
- markdown-it-sub
- markdown-it-abbr
- markdown-it-emoji
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSymbol:

注意最后一行permalinkSymbol的设置,经过我的摸索后,发现这个是设置anchors锚点,即文章的TOC目录展现的锚点链接标志,如果按这样设置,会发现你的目录长这样:

toc
toc

链接前面加上了这个很丑的标志,我很好奇为什么那么多博文为什么都这样写,我就不信这个邪,没有写上面anchors锚点相关配置试了试,发现跑起来,好多文章都页面空白并报错:

toc-error
toc-error

看来是不能删除这个配置了,可是又不想看到这个丑陋的标志,于是我试了下设置permalinkSymbol: '',即设置他为空,发现成功跑起来并正确渲染无报错啦(正如本文所示)!

再补充:hexo-renderer-markdown-it介绍

hexo-renderer-markdown-it是一款用于 Markdown 解析和渲染的插件,最大的几个特性如下

  • 用于替换 Hexo 默认自带的 Markdown 渲染器(比hexo-renderer-marked更快)。
  • 提供了更丰富的 Markdown 解析和渲染。
  • 提供数学公式Latex支持
  • 支持上标sup,下标sub

在浏览器官方Git仓库的时候我发现官方教程配置

mardown-default
mardown-default

这里就用了¶这个符号,难怪这么多博文都用了这个丑陋的符号,这锅得官方背呀!😂 😂