GatsbyサイトでMarkdownで書いた絵文字を画像に変換するプラグイン
2019年1月13日
Gatsbyサイトで絵文字を使えるようにするgatsby-remark-emojisを入れてみました。
たとえばMarkdownで2つの「:」の間に「grin」と書くとのように画像に変換してくれます。ちなみに画像はData URIで挿入されるので外部ファイルを読み込むことはありません。なので表示パフォーマンス的にも良いですね。
導入方法
npmでインストールしてgatsby-config.jsのプラグイン一覧に追加するだけです。gatsby-transformer-remarkのプラグインとして設置します。
npmでインストール
npm i -S gatsby-remark-emojisgatsby-config.jsに記入
gatsby-config.jsのプラグイン一覧のgatsby-transformer-remarkのオプションにgatsby-remark-emojisを追加します。
{ resolve: `gatsby-transformer-remark`,
options: {
plugins: [
... 省略 ...
{ resolve: 'gatsby-remark-emojis', options: { active : true, class : 'emoji-icon', size : 64, styles : { display : 'inline', margin : '0', 'margin-top' : '0', position : 'relative', top : '0.125rem', width : '1.4rem', border : 'none' } } },
... 省略 ...
]
}
},オプション
以下のオプションがあります。
active
絵文字の有効・無効を切り替える
class
絵文字の<img>タグに入れるカスタム・クラス名。
size
画像サイズ。サイズは16、24、32、64から選べます。僕の場合、64を選んで1.4remで表示してます。
styles
スタイルの微調整を追加できます。