Ebbinghaus最初にブログを作成した際にも、gatsby-remark-prismjsを参考にPrismJSを入れようとしたのですがうまくいかず、この時点で、tokenizeができていないんだなー。いうことだけは分かっていたのですが、どうしたら良いのかわからずとりあえずリリースを優先させるために最低限で凌いでいました。Highlightが効いていないとコードが読みにくいよね。いうことで、PrismJSを入れ直しました。gatsby-node.jsについてです。gatsby-node.js内に書いたコードはビルドが走る際に1度だけ実行されます。layerに追加して、それらを、createPagesで./src/pages/{mdx.slug}.tsxに渡しています。マークダウンファイルをそのままHTMLファイルに変換するだけであれば、"gatsby-plugin-mdx"プラグインを使えばgatsby-node.jsファイルを作成しないでも、./src/pages/配下に{mdx.slug}.tsxのようなファイルを作成して動的にページを生成すればいいだなので話は簡単です。シンタックスハイライトを効かせるためにはコード内の単語や記号1つずつそれぞれに対して適切なCSSを効かせる必要があります。punctuation">{</span>のような形になっているかと思います。実現する流れとしては、以下の順番で処理していく必要があるのですが、この役割をPrismJSが担っているわけです。マークダウンをtokenに変換それぞれのtokenに対して適切なクラスを設定HTMLに変換gatsby-remark-prismjsプラグインのソースコードまで潜って確認できていないので、どの時点でtokenizeがなされているのか定かではないのですが、おそらく、createPageでページを生成した際にgatsby-remark-prismjsプラグインが走るようになっているのではないかなー。そのため、createPageをしないで、{mdx.slug}.tsx内で直接MdxProviderとMdxRendererを使ってマークダウンファイルからHTMLファイルへの変換を行った場合にはtokenizeがなされず、シンタックスハイライトのCSSを効かせることができませんでした。APIを使いつつ動的にページを生成して、そのタイミングでPrismJSを動かすことでtokenizeも行うことができるようにしています。(それぞれのタイミングはしっかり理解できていないので、どこかでちゃんと調査したいところです。)./src/templates/post.tsxの作成createPageでせっかくページを生成するようにしたので、./src/pages/{mdx.slug}.tsxはやめて、./src/templatesディレクトリ配下に生成したデータをラップするためのコンポーネントを作成していきます。Structureを参考にしました。ファイルの中身とやっていることは何も変えておらず、gatsby-node.jsファイルで生成したidを./templates/post.tsxファイルに渡して動的にクエリを生成しているだけです。./src/pages/{mdx.slug}.tsxファイルでは、GraphQLクエリの中で自動的にidが付与されており活用することができていましたが、./templates/配下では自動的にidが使える状態にあるわけではないようで、contextで渡してやる必要がありました。},},gatsby-remark-prismjsを参考に、上記のような設定をgatsby-config.jsに入れます。これは最低限の設定なので、任意でオプションは追加していけばいいと思います。cssの設定ここまできたら、あとは./gatsby-browser.jsでprismjsのcssテンプレートを読み込めばOKです。prism-themesがたくさんあるので、この中から好きなものを選んで、以下のようにインポートすればシンタックスハイライトが効くようになっているはずです。"prismjs/themes/prism-solarizedlight.css"私はシンタックスハイライトの色を少し変えたかったので、./src/styles/prism-vsc-dark.cssファイルを作成して、一部cssを書き換えて活用することにしました。シンタックスハイライトも効くようになって、やっとブログっぽくなってきました。次回は目次を追加していきたいと思います。withGatsby。