Hexo中添加emoji表情

前期介绍

如何让 markdown 可以解析 emoji 呢?实际上我们发现,在编辑器中输入 :blush: 并没有表情出现,是为什么呢?

这是 markdown 渲染引擎的问题 ,将 markdown 变成 html 的转换器叫做markdown渲染器 。 Hexo默认是采用hexo-renderer-marked,这个渲染器不支持插件扩展,当然就不行了,还有一个支持插件扩展的是 hexo-renderer-markdown-it,这个支持插件配置,可以使用markwon-it-emoji 插件来支持emoji。需要将原来的 marked 渲染器换成 markdown-it渲染器。所以我们可以使用这个渲染引擎来支持emoji表情。

相关链接:

安装过程

安装新的渲染器

首先进入博客目录,卸载hexo默认的marked渲染器,安装markdown-it渲染器,运行的命令如:

1
2
$ npm un hexo-renderer-marked --save
$ npm i hexo-renderer-markdown-it --save

​之后安装 markdown-it-emoji 插件 😃

1
$ npm install markdown-it-emoji --save

据说 hexo-renderer-markdown-it 的速度要比 Hexo 原装插件要快,而且功能更多:

Main Features:

  • Support for Markdown, GFM and CommonMark
  • Extensive configuration
  • Faster than the default renderer | hexo-renderer-marked
  • Safe ID for headings
  • Anchors for headings with ID
  • Footnotes
  • <sub> H2O
  • <sup> x2
  • <ins> Inserted

编辑站点配置文件

这里的站点配置文件是指位于博客根目录下的 _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
24
25
# 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
- markdown-it-emoji ## add emoji
anchors:
level: 2
collisionSuffix: 'v'
# If `true`, creates an anchor tag with a permalink besides the heading.
permalink: false
permalinkClass: header-anchor
# The symbol used to make the permalink
permalinkSymbol:

上面的是hexo-renderer-markdown-it的所有选项的配置,详细的每一项配置说明,需要到Advanced Configuration中查看。

注意要在plugins:选项中加上- markdown-it-emoji ,即加上emoji插件。

使用方法

  1. Emoji 中找到你想要的表情,然后点击即可复制。
  2. 比如你想发一个笑脸 😄 直接输入笑脸对应的 emoji 编码 :smile: 就可以。

​让我们emoji表情里尽情耍一耍~~~~🐰 🐨 🐸 🐞 🐾 😄 💙✈️👶🐤🎈🐻🌵👯😰🍂💋🎃🐙

效果图:

emojiOld

给新的渲染器添加twemoji

因为安装了markdown-it-emoji, :smile:渲染成😄了,是Unicode字符表情。感觉不好看,参考文章的介绍,安装twemoji,安装命令如下:

1
$ npm install twemoji

安装完之后,编辑node_modules/markdown-it-emoji/index.js文件,最终文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
'use strict';
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));
};

因为我安装twemoji之后,好像默认的是72X72,假如你不喜欢这个图片尺寸,可以通过css控制,在你的主题css中添加如:

1
2
3
4
5
6
img.emoji {
height: 1.5em;
width: 1.5em;
margin: 0 .05em 0 .1em;
vertical-align: -0.1em;
}

由于博客使用的主题问题,导致最终渲染的文章中的emoji图片,会自动绑定fancybox 。转换出的HTML中出现如下所示,无法设置样式。如下所示:

emojiCss

关于图片被绑定这个问题,需要自己去排查,每个主题的写法有差异,通过dom追踪来查看,进行排除。 我的修改在 theme/source/js/main.js

emojiFancyBox

哈哈,现在可以显示了吧。如下图所示:

emojiNew

相关链接

文章目录
  1. 1. 前期介绍
  2. 2. 安装过程
    1. 2.1. 安装新的渲染器
    2. 2.2. 编辑站点配置文件
  3. 3. 使用方法
  4. 4. 给新的渲染器添加twemoji
  5. 5. 相关链接
|