eyecatch thumbnail

gatsby-theme-blog の Markdown で数式かけるかな?

Profile picture
ルッチ / Lucci
2021.05.07

Contents


まとめ

  • gatsby-theme-blog のデフォルト設定では数式対応していない

はじめに

opening

gatsby-theme-blog で数式使えるかどうかを実験しながら調べました.

結果 gatsby-theme-blog のデフォルト設定では数式は使えませんでした.

数式を使った記事を将来的には書きたいと考えているので良い機会なので gatsby-starter-blog に乗り換えることにしました.

gatsby-starter-blog はデフォルト設定で数式が使えるので楽チンでした.

(デフォルト設定で ok と言ってもプラグインをインストールしてプラグインの設定をする必要はあります)

本記事では

  1. gatsby-theme-blog で数式が使えない原因
  2. gatsby-theme-blog で数式を使うにはどうすれば良いのか

この2点を中心にして解説します.

それではどうぞ!


gatsby-theme-blog で数式が使えない理由

jeswin-thomas-hecib2an4T4-unsplash.jpg

同じことを考えている人は世界のどこかに大体いる

gatsby-theme-blog ではなぜ数式が使えないのか.

同じことを考えている人や同じことを経験している人ってのは大体ググったら見つかります.

今回も同じことを経験している人を見つけました↓

how to add katex plugin into gatsby-theme-blog @StackOverflow

この質問のスレッドを読むと gatsby-theme-blog で数式が使えない理由がわかります.

その理由とは次の通りです.

gatsby-theme-blog では gatsby-node.js で HTML ファイルを生成していないから期待通りの結果が得られない

さらに回答者さんは原因を指摘するだけではなく次の解決策も同時に提示しています.

gatsby-starter-blog を使うか gatsby-theme-blog に gatsby-node.js を追加して必要な実装をするかだ

素晴らしい回答者さんです. ハンドルネームは @acagastya という方です. 回答していただいてありがとうございます.


回答者さんの裏取り

ということで回答者さんの指摘した原因と提示した解決策の裏取りをしてみましょう.

gatsby-theme-blog の Github リポジトリはこちら: https://github.com/gatsbyjs/gatsby-starter-blog-theme

gatsby-starter-blog の Github リポジトリはこちら: https://github.com/gatsbyjs/gatsby-starter-blog

gatsby-theme-blog の Github リポジトリを見ると確かに gatsby-node.js は見当たりませんでした.

一方 gatsby-starter-blog の Github リポジトリを見ると確かに gatsby-node.js が見当たりました. その見つかった gatsby-node.js 内に createPage という GatsbyJS API を叩いている箇所も見つかりました.

gatsby-theme-blog に足りない実装というのはおそらくこの createPage API を叩く処理でしょう.

GatsbyJS では同じ形式の HTML ファイルを大量に生成するなら, この createPage API を叩くのが常套手段だからです.

回答者さんはそこまで細かい指摘はしていませんが自分はそう理解しました.

ということで回答者さんの裏取りも ok ですね.

ほんと素晴らしい回答者さんです.


自分の方針

 jordan-madrid-iDzKdNI7Qgc-unsplash

gatsby-theme-blog で数式を書くには追加実装する必要がある.

gatsby-theme-blog を半年間くらい触っているのですがちょっと使いづらいかな感があります.

継承に継承を重ねている感じでちょっと取っ付きづらいんですよね.

GraphQL を記載しているファイルとその GraphQL で引っ張ってくるデータを使うファイルが別だったり.

初心者にはちょっと厳しめなんですよね.

ということで gatsby-theme-blog から gatsby-starter-blog に乗り換えることにしました.

現時点 (2021-05-06) では既に gatsby-starter-blog への移行は完了しています.

移行作業をしていて気付いたことがあります.

それは…

gatsby-starter-blog むっちゃ使いやすいわ. GraphQL も同じファイルに記載されているし. GatsbyJS の鬼門である画像の取り扱い方も今までより遥かに簡単になっているし. gatsby-theme-blog で疲弊していた自分アホみたいやな

です.

gatsby-theme-blog に使いづらさを感じている人は gatsby-starter-blog に乗り換えると幸せになるかと思います.

ぜひぜひ.

もちろん gatsby-starter-blog では数式が使えますよ.

eix=cosx+isinxe^{ix} = \cos{x} + i\sin{x}

世界で一番美しい式ですね,オイラーの公式.


おわりに

nathan-anderson-L95xDkSSuWw-unsplash.jpg

gatsby-theme-blog では数式が使えないけど gatsby-starter-blog では数式が使えます.

gatsby-theme-blog で数式を使えるようにしたい人は gatsby-node.js ファイルに createPage API を実行する実装をしてください.

gatsby-stater-blog に乗り換える人はチャキチャキと乗り換えちゃってください.

gatsby-starter-blog を使うと従来の GatsbyJS の煩わしさから開放されます.

GatsbyJS のオライリー本が 2021-12-21 に出版されるそうで 2025年くらいまでは GatsbyJS が盛り上がって欲しいなと期待しています.

ちなみに本の表紙はこんな感じになるそう↓

Gatsby: The Definitive Guide: Build and Deploy Highly Performant Jamstack Sites and Applications gatsby-book-oreilly

最後までお読みいただきありがとうございました.

良い一日を!


執筆機材


関連記事


大学生へのお知らせ

ここまで記事を読んでくれて本当に嬉しいです、ありがとうございます。

プログラミングを始めたばかりの頃って「やるぞ!」という気持ちは強めですが、 実際に取り組み始めると「何からどうやってどこまでやればいんだ?」 という感じで羅針盤を失うことが多いような気がします。(実体験)

そんな勉強熱心で向上心高めなんだけど目指す姿が曖昧な大学生の方に感謝の意も込めて、就職活動までサポートするプログラミングスクール「レバテックカレッジ」を紹介します。↓

Levtech-college

「自走力」のあるエンジニアを最短3ヶ月で目指せるカリキュラムが月額30,000円で用意されていて、 現段階の「目指す姿が曖昧で何から手をつければいいかわからない状態」から脱却できます。

自分は実際にIT企業で働いていますが、「自走力」のあるエンジニアの方にはいつも助けられています。

なので、目指す姿が曖昧な人はとりあえずレバテックカレッジが導いてくれる 「自走力のあるエンジニア」を目指してみるのはスタートダッシュとしてはアリです。

レベルアップしてからジョブチェンするのはRPGでも常套手段ですし、 レバテックカレッジで一通りのスキルを習得してから自分の目指す姿を再定義するといいかもです。

「自走力のあるエンジニア」って実際どんなエンジニアなの? 何から手をつければいいかわからないから教えて欲しい、 という人は上のテキストリンク/画像リンクから「無料相談会」への申し込みをお願いします。

よきエンジニアライフを!