R note

マークダウンの変換をgatsby-transformer-remarkに変更

2018年12月4日

GatsbyJS

Airtableから引っ張ってきた本文のデータをHTMLに変換するのにgatsby-transformer-remarkプラグインを入れました。以前は以下の3つのプラグインでやっていたのを変えました。

  • unified
  • remark-parse
  • remark-html

gatsby-transformer-remarkを使った方がSyntax Highlighterやマークダウンに記述された画像の最適化などが簡単にできそうなんですよね。

変更の手順

以下、参考までに記録しておきます。

1. プラグインのインストール

npm i -S gatsby-transformer-remark

2. gatsby-config.jsに追加

まずはプラグインを追加します。

module.exports = {
  siteMetadata: {

    /* 省略 */

  },
  plugins: [

    /* 省略 */

    `gatsby-transformer-remark`,  ],
  pathPrefix: `/img`
}

次にgatsby-transformer-remarkに本文（body）がマークダウンであることを認識させるために、Airtableのプラグイン（gatsby-source-airtable）のオプションに「mapping」を追加しました。

    {
      resolve: `gatsby-source-airtable`,
      options: {
         apiKey: `${process.env.GATSBY_AIRTABLE_APIKEY}`,
         tables: [
            {
               baseId: 'appy2K4C7JMm8lJKu',
               tableName: 'entry',
               tableView: 'Published',
               queryName: '',
               mapping: { 'body': 'text/markdown' },            },
         ]
      },
    },

3. GraphQLの変更

本文のデータが入っている「body」というフィールドの部分を以下のように変更しました。gatsby-transformer-remarkを入れると「childMarkdownRemark」というノードが出来て、その中にhtmlやexcerptが自動で追加されます。

/* 変更前 */
data {
  body
}

/* 変更後 */
data {
  body {
    childMarkdownRemark {      html      excerpt    }
  }
}

4. 本文の書き出し部分の変更

記事ページの本文の書き出し部分を以下に変更しました。

/* 変更前 */
<div
  dangerouslySetInnerHTML={{
    __html: unified()
      .use(markdown)
      .use(html)
      .processSync(post.data.body)
  }}
/>

/* 変更後 */
<div
  dangerouslySetInnerHTML={{
    __html: post.airtable.data.body.childMarkdownRemark.html
  }}
/>

だいぶシンプルになりました。

5. いらないプラグインの削除

使わなくなったプラグインを削除しました。

npm uninstall unified -S
npm uninstall remark-parse -S
npm uninstall remark-html -S

以上です！

参考にしたサイト

一覧に戻る