R note

GatsbyサイトでMarkdownで書いた絵文字を画像に変換するプラグイン

GatsbyJS

Gatsbyサイトで絵文字を使えるようにするgatsby-remark-emojisを入れてみました。

たとえばMarkdownで2つの「:」の間に「grin」と書くとのように画像に変換してくれます。ちなみに画像はData URIで挿入されるので外部ファイルを読み込むことはありません。なので表示パフォーマンス的にも良いですね。

導入方法

npmでインストールしてgatsby-config.jsのプラグイン一覧に追加するだけです。gatsby-transformer-remarkのプラグインとして設置します。

npmでインストール

npm i -S gatsby-remark-emojis

gatsby-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

スタイルの微調整を追加できます。