misspelling

mdxに変更しました

もともとgatsby-starter-blogという gatsby が公式に提供している template を使って blog を始めていたのだけど、speakerdeck を iframe で埋め込もうとしたら remark がいい感じに sanitize してくれるので iframe が入れられなかった1 のと、類似のケースでvideo を埋め込む方法について調べていると、 よりカスタマイズして使う場合は mdx が勧められていたので mdx を使えるようにした。

公式に gatsby-starter-blog に bundle されているわけではないが、こちらの blog post に方法が書いてあるので、この通りに順番に入れていけば大丈夫。blog の内部で言及されている PR でもコメントされているが、 本家はなるべくシンプルに保つということで、mdx を使うためのドキュメントは提供するけどデフォルトで mdx をサポートすることはしないよう。

ちょうど本業でそれって markdown でカスタムな compoenent を定義したいって話だよね、みたいな mdx っぽい話があったりしてタイムリーだったり、もとから興味あったけど使って見れてなかったので ちょうどよいタイミングだったりもする 👍

Footnotes

  1. gatsby-remark-responsive-iframeを使えば入れられるのだが、src, width, height 以外の設定ができずスタイルのカスタマイズなどができないので、mdx にすることにした。