このサイトは VuePress を使って作成しています。
Twemoji とは
Twemoji とは、Twitter
で表示されているタイプの絵文字のことで、OSS として公開されています。
そもそも、絵文字は OS やアプリケーションによって表示が異なります。
フラットな見た目の好みもあるのですが、明示的に Twemoji を使用するよう設定することで、環境ごとの表示を揃えることができます。
基本的な導入方法 
VuePress ビルトインのmarkdown-it-emojiの GitHub ページで導入方法が示されています。VuePress ではこれが基本的なやり方だと思います。
Twemoji ライブラリをyarn addまたはnpm installし、VuePress の設定ファイルである.vuepress.config.jsで読み込むことで有効化できます。
// config.js
const twemoji = require("twemoji");
module.exports = {
markdown: {
extendMarkdown: (md) => {
md.renderer.rules.emoji = (token, idx) =>
twemoji.parse(token[idx].content, { folder: "svg", ext: ".svg" });
},
},
};これで Markdown ファイル内で:tada:のように shortcode 形式で書いた絵文字が Twemoji に変換されます。
なお、サイズは 72px 固定なので、文字サイズに合わせて調整する必要があります。
良い点 
markdown-it の処理なので、HTML ファイル作成時に動くのが利点です。ページ表示時のオーバーヘッドがありません。
問題点 
この方法は markdown-it のレンダリングに挟み込む手法のため、サイドバーやタイトルバーなど、markdown-it と関係ない場所で表示される絵文字は変換することができません。
また、shortcode 形式が分かりづらいのも難点です。絵文字から逆検索することも可能ですが、Markdown ソースの状態で:wave:のように書いてあっても、結局どんな表示になるかイメージしづらく感じます。
ということで、「普通に絵文字で入力し、表示は Twemoji」というのが理想だと考えました。
ちょっと違う導入方法 
上記の Twemoji のリポジトリで紹介されているのは CDN でスクリプトを読み込んで DOM Parsing する手法です。今回はこれを VuePress でやりました。
.vuepress/enhanceApp.jsに以下のコードを設定します。
// .vuepress/enhanceApp.js
export default () => {
// twemojiスクリプトの読み込み
const script = document.getElementsByTagName("script")[0];
const load = document.createElement("script");
load.src = "https://twemoji.maxcdn.com/v/latest/twemoji.min.js";
load.setAttribute("crossorigin", "anonymous");
script.parentNode.insertBefore(load, script);
// bodyをまるごとパース
const body = document.getElementsByTagName("body")[0];
const twemoji = document.createElement("script");
twemoji.innerText = "window.onload=function(){twemoji.parse(document.body)}";
body.insertBefore(twemoji, null);
};これで、<head></head>内で Twemoji スクリプトを読み込み、ページロード後に変換をかけることができます。
良い点
絵文字をそのまま Twemoji に変換するため、「普通に絵文字で入力し、表示は Twemoji」となっています。
また、document.bodyをまるごとパースしているので、絵文字が本文にあろうがサイドバーにあろうが関係なく変換できます。
問題点
外部からファイルを取得しているため、通信が発生します。Twitter 公式が紹介している CDN なのでそんなに遅くないと思いますが、markdown-it 内で変換する方法は通信ゼロなので、そこは差があります。
また、表示後に変換をかけているため、その分の負荷も発生します。実際、ページ内に絵文字が大量にあると表示が重たくなるようです。 とはいえ、絵文字一覧のようなページを作らない限り、実用上は問題ないと思われます。
まとめ 
今回は enhanceApp を使って Twemoji を導入する方法を紹介しました。 多少ブルートフォース的ではありますが、一発で全体に作用する設定を作れたので満足です。 表示に極端な問題が出ないかは今後確認していきたいと思います。