「リッテキストのほうが書きやすいかな」と思ってこのブログの記事をリッテキストで書いてた。
しかし、prismjsがうまく組み込めないことが判明。
できるかもしれないけど、調査が大変そうで諦めた。

やったことは

  1. contentfulにマークダウン用のフィールドを追加(textの中にmarkdownがある)
  2. マークダウン用のプラグインを追加
  3. 各種jsxを変更

といった感じ。

クラスをそれぞれのタグに付与したかったのでgatsby-remark-default-html-attrsというgatsby-transformer-remark用のプラグインを導入。

やってみて、
メリットは、コードブロックがかっこよくなる。
デメリットは、Contentfulのエディタがイマイチ。改行と段落わけの区別がわかりづらい。マークダウン用エディタが必要かも。

設定内容はこんな感じ

gatsby-config.jsのplugins抜粋
{
  resolve: `gatsby-transformer-remark`,
  options: {
    commonmark: true,
    footnotes: true,
    pedantic: true,
    gfm: true,
    plugins: [
      {
        resolve: `gatsby-remark-images`,
        options: {
          // It's important to specify the maxWidth (in pixels) of
          // the content container as this plugin uses this as the
          // base for generating different widths of each image.
          maxWidth: 590,
        },
      },
      {
        resolve: `gatsby-remark-default-html-attrs`,
        options: {
          "p": {
            className: "blogpost-template__body-p",
          }
        }
      },
      `gatsby-remark-code-titles`,
      {
        resolve: `gatsby-remark-prismjs`,
        options: {
          classPrefix: "language-",
          inlineCodeMarker: null,
          aliases: {},
          showLineNumbers: true,
          noInlineHighlight: false,
        },
      },
    ],
  }
}
Copyright 2020 shimu.dev