本文介绍如何让Hexo支持emoji表情。
首先，要知道markdown 变成html的转换器叫做markdown渲染器。在Hexo中默认的markdown渲染器使用的是hexo-renderer-marked，此渲染器不支持插件扩展；要让hexo支持emoji，则需要将渲染器更换为支持插件扩展的渲染器。网络博主们推荐hexo-renderer-markdown-it，该渲染器可通过使用markdown-it-emoji插件来支持emoji渲染。
安装
三步：卸载旧渲染器，安装新渲染器，安装插件
¶卸载hexo-renderer-marked
切换到本地blog目录
1 | npm un hexo-renderer-marked --save |
¶安装和配置hexo-renderer-markdown-it渲染器
安装渲染器
1 | npm i hexo-renderer-markdown-it --save |
渲染器配置：
-
在站点配置文件
_config.yml中添加如下代码：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
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
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSide: 'left'
permalinkSymbol: ¶以上配置详细说明如下，或见Advanced Configuration
- markdown：
- render
- plugin
- anchors
-
安装markdown-it-checkbox插件
1
npm install markdown-it-checkbox --save
-
在站点配置文件_config.yml文件中的markdown.plugins添加- markdown-it-checkbox,即:
1
2
3
4
5
6
7plugins:
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup
- markdown-it-checkbox # 本行启用了checkbox插件示例:
语法:
1
2[ ] 这是未勾选的checkbox
[x] 这是已勾选的checkbox
¶安装和配置markdown-it-emoji插件
安装插件
1 | # 安装markdown-it-emoji插件 |
在站点配置文件_config.yml文件中的markdown.plugins添加- markdown-it-emoji，即:
1 | plugins: |
配置插件 & 优化Emoji样式
-
安装twemoji
1
npm install twemoji
-
配置
在
node_modules\markdown-it-emoji\index.js目录下添加代码:1
2
3
4
5var twemoji = require('twemoji') //添加twemoji
//使用twemoji渲染
md.renderer.rules.emoji = function(token, idx) {
return twemoji.parse(token[idx].content);
};完整代码为:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27;
var emojies_defs = require('./lib/data/full.json');
var emojies_shortcuts = require('./lib/data/shortcuts');
var emoji_html = require('./lib/render');
var emoji_replace = require('./lib/replace');
var normalize_opts = require('./lib/normalize_opts');
var twemoji = require('twemoji') //添加twemoji
module.exports = function emoji_plugin(md, options) {
var defaults = {
defs: emojies_defs,
shortcuts: emojies_shortcuts,
enabled: []
};
var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));
md.renderer.rules.emoji = emoji_html;
//使用twemoji渲染
md.renderer.rules.emoji = function(token, idx) {
return twemoji.parse(token[idx].content);
};
md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
}; -
在themes/next/source/css/main.styl文件中添加Emoji样式：
1
2
3
4
5
6
7
8
9
10/*emoji样式*/
.emoji { height: 1.2em;}
img.emoji{
margin: 0 .05em 0 .1em !important;
vertical-align: -0.1em;
//override theme default style
padding:0px !important;
border:none !important;
display:inline !important;
}示例：
源代码:
1
2
3
4
5
6
7:100::1234::yum::mountain_biking_man::soon::motor_boat::national_park::night_with_stars::fireworks::blue_book:
:negative_squared_cross_mark::cn::cat::full_moon::waning_gibbous_moon::last_quarter_moon::waning_crescent_moon:
:new_moon::waxing_crescent_moon::first_quarter_moon::waxing_gibbous_moon::zero::one::two::three::four::five::six:
:seven::eight::nine::keycap_ten::clock1::clock2::clock3::clock4::clock5::clock6::clock7::clock8::clock9::clock10:
:clock11::clock12::clock130::clock230::clock330::clock430::clock530::clock630::clock730::clock830::clock930:
:clock1030::clock1130::clock1230::seychelles::latin_cross::star_and_crescent::peace_symbol::om::wheel_of_dharma:
:star_of_david::six_pointed_star::menorah::yin_yang::star_of_david::orthodox_cross::baseball:插件地址：
Emoji表情检索：
Emoji and code
1 | 😊 :blush: 😃 :smiley: ☺️ :relaxed: |
参考资料
https://www.jianshu.com/p/f9e57ecca150
https://vxiaozhe1998.gitee.io/2020/03/25/HEXO下的锚点标题与Emoji表情/#more
https://blog.csdn.net/weixin_30745641/article/details/95686757
