hexo-配置使用emoji

发表于 更新于

People who are crazy enough to think they can change the world, are the ones who do.
— Apple Computers

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

这是 markdown 渲染引擎的问题 ，将 markdown 变成 html 的转换器叫做markdown渲染器 。

Hexo默认是采用 hexo-renderer-marked ,这个渲染器不支持插件扩展，当然就不行了，

知道原因了，我们就有对应的解决方案了，

使用hexo-filter-emoji插件

可以通过安装插件hexo-filter-emoji实现emoji功能

1
npm install hexo-filter-emoji

在站点根目录下的_config.yml内最后填入

1
2
3
4
5
6
# hexo-filter-emoji
emoji:
  enable: true
  className: github-emoji
  styles:
  customEmojis:

使用hexo-renderer-markdown-it

还有一个支持emoji插件扩展的是 hexo-renderer-markdown-it ，这个支持插件配置，可以使用 markwon-it-emoji 插件来支持emoji。

这需要将原来的 marked 渲染器换成 markdown-it 渲染器。所以我们可以使用这个渲染引擎来支持emoji表情。

安装hexo-renderer-markdown-it见hexo-使用渲染器-hexo-renderer-markdown-it

安装 markdown-it-emoji 插件 ：(与hexo-配置使用emoji选择一个,避免冲突)

1
$ npm install markdown-it-emoji --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
24
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
## cn_Docs: https://markdown-it.docschina.org/api/MarkdownIt.html#markdownit-new
markdown:
  render:
    # false。设成 true 来启用在源码中(支持) HTML 标签。注意！这是不安全的！你可能需要额外的消毒剂(sanitizer)来组织来自 XSS 的输出。最好是通过插件来扩展特性，而不是启用 HTML。
    html: true
    # 设成 true 来给闭合的单个标签（<br />）添加 '/'。只有完全兼容 CommonMark 模式时才需要这样做。实际上你只需要 HTML 输出。
    xhtmlOut: false
    # 设成 true 来转化段落里的 \n 成 <br>
    breaks: true
    # 设成 true 来自动转化像 URL 的文本成链接。
    linkify: true
    # 设成 true 来启用某些语言中性的替换以及引号的美化（智能引号）。
    typographer: true
    # String 或 Array 类型。在 typographer 启用和支持智能引号时，进行双引号 + 单引号对替换。 比方说，
    # 你可以支持 '«»„“' 给俄罗斯人使用， '„“‚‘' 给德国人使用。
    # 还有 ['«\xA0', '\xA0»', '‹\xA0', '\xA0›']  给法国人使用（包括 nbsp）。
    quotes: "“”‘’"
  plugins:
    - markdown-it-abbr
...
    - markdown-it-emoji # add emoji
...

emoji使用方法

在 Emoji 中找到你想要的表情，然后点击复制即可或者你想发一个笑脸 😄 也可以直接输入笑脸对应的 emoji 编码 :smile: