hexo 博客添加 emoji 表情

博客中只有文字也太单调了，想在文章中添加 emoji ，发现直接添加无法解析。原来是 hexo 默认使用的hexo-renderer-marked不支持插件扩展，所以不支持 emoji 解析。我们可以将hexo-renderer-marked更换为支持插件扩展的hexo-renderer-markdown-it，这个支持插件配置，可以使用markwon-it-emoji插件来支持 emoji 。

hexo-renderer-markdown-it拥有更强大的功能：

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

1. 安装步骤

首先卸载hexo-renderer-marked，并安装hexo-renderer-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

2. 编辑配置文件

在_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
26
27
28
markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:
    - markdown-it-emoji  ## add emoji
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline

这里是hexo-renderer-markdown-it的配置，具体每一项的配置参考hexo-renderer-markdown-it

记得在plugins中添加markdown-it-emoji！

3. 使用方法

想要添加Emoji时，在emoji 列表中查询表情对应的码值，复制即可