Hexo 搭建系列 - 在BLOG中插入Emoji表情

🍑 🍇 🍐 🍓 🍌 🍉 🍍 🍋 🍎

HEXO預設的markdown渲染器是hexo-renderer-marked，這個渲染器並不支援插件擴展，所以我們需要卸載它改裝hexo-renderer-markdown-it 。

而hexo-renderer-markdown-it 原裝包含了以下插件：
- markdown-it-abbr
- markdown-it-footnote
- markdown-it-ins
- markdown-it-sub
- markdown-it-sup

並不包含emoji插件，因此我們還要安裝markdown-it-emoji來插入表情。

安裝

STEP 1

首先卸載hexo-renderer-marked然後再安裝hexo-renderer-markdown-it。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save

STEP 2

安裝markdown-it-emoji：

npm install markdown-it-emoji --save

STEP 3

打開 config.yml 加入以下內容：

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: ''

STEP 4

使用方法：在 emoji-cheat-sheet 中查找想貼上的表情，例如 💥
則直接在文章中對應編碼 :boom: 就能顯示。

參考資料

hexo-renderer-markdown-it