Web Bookmark


To do it

首先卸载 hexo 默认的 markdown 渲染工具

  1. npm uninstall hexo-renderer-marked --save

安装 markdown-it

  1. npm install hexo-renderer-markdown-it --save

安装 markdown-it-emoji

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

在站点的 _config.yml 文件里添加以下内容:

  1. # markdown-it
  2. markdown:
  3.   render:
  4.     html: true
  5.     xhtmlOut: false
  6.     breaks: true
  7.     linkify: true
  8.     typographer: true
  9.     quotes: '“”‘’'
  10.   plugins:
  11.     - markdown-it-abbr
  12.     - markdown-it-footnote
  13.     - markdown-it-ins
  14.     - markdown-it-sub
  15.     - markdown-it-sup
  16.     - markdown-it-emoji
  17.   anchors:
  18.     level: 2
  19.     collisionSuffix: 'k'
  20.     permalink: true
  21.     permalinkClass: 'header-anchor'
  22.     permalinkSymbol: '¶'
  23.     case: 0
  24.     separator: '-'

这些配置项说明可以在markdownn-it wiki上查看

Then

由于渲染还是不够完美，有些 emoji 会被解析为 Unicode 字符，所以再安装 twemoji

  1. npm install twemoji --save

安装完之后，需要对 markdown-it-emoji 源码进行编辑，使它使用 twemoji 进行渲染

  1. 'use strict';
  4. var emojies_defs      = require('./lib/data/full.json');
  5. var emojies_shortcuts = require('./lib/data/shortcuts');
  6. var emoji_html        = require('./lib/render');
  7. var emoji_replace     = require('./lib/replace');
  8. var normalize_opts    = require('./lib/normalize_opts');
  9. var twemoji = require('twemoji') // 引入twemoji
  12. module.exports = function emoji_plugin(md, options) {
  13.   var defaults = {
  14.     defs: emojies_defs,
  15.     shortcuts: emojies_shortcuts,
  16.     enabled: []
  17.   };
  19.   var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));
  21.   md.renderer.rules.emoji = emoji_html;
  23.   md.renderer.rules.emoji = function(token, idx) {
  24.     return twemoji.parse(token[idx].content);
  25.   }; // 使用 twemoji 进行渲染
  27.   md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
  28. };

由于 twemoji 渲染后，emoji 都为图片，所以我们需要对它们的样式进行下设置

  1. img.emoji {
  2.   height: 1em;
  3.   width: 1em;
  4.   margin: 0 .05em 0 .1em !important;
  5.   box-shadow: none;
  6.   vertical-align: -0.1em;
  7.   padding:0px !important;
  8.   border:none !important;
  9.   display:inline !important;
  10. }

But

我们也可以使用系统支持的原生 Emoji 去解析那些转成了 Unicode 的字符，我们对 markdown-it-emoji 源码再修改下

  1. 'use strict';
  4. var emojies_defs      = require('./lib/data/full.json');
  5. var emojies_shortcuts = require('./lib/data/shortcuts');
  6. var emoji_html        = require('./lib/render');
  7. var emoji_replace     = require('./lib/replace');
  8. var normalize_opts    = require('./lib/normalize_opts');
  11. module.exports = function emoji_plugin(md, options) {
  12.   var defaults = {
  13.     defs: emojies_defs,
  14.     shortcuts: emojies_shortcuts,
  15.     enabled: []
  16.   };
  18.   var opts = normalize_opts(md.utils.assign({}, defaults, options || {}));
  20.   md.renderer.rules.emoji = emoji_html;
  22.   md.renderer.rules.emoji = function(token, idx) {
  23.     return '<g-emoji>'+ token[idx].content +'</g-emoji>';
  24.   };// 添加 g-emoji 容器进行包裹
  26.   md.core.ruler.push('emoji', emoji_replace(md, opts.defs, opts.shortcuts, opts.scanRE, opts.replaceRE));
  27. };

添加样式

  1. g-emoji {
  2.   font-family: Apple Color Emoji,Segoe UI,Segoe UI Emoji,Segoe UI Symbol;
  3.   font-size: 1.2em;
  4.   font-style: normal!important;
  5.   font-weight: 400;
  6.   line-height: 20px;
  7.   vertical-align: middle;
  8. }