misspelling

  • 日本語
  • English

mdxに変更しました

December 13, 2019

もともと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っぽい話があったりしてタイムリーだったり、もとから興味あったけど使って見れてなかったので ちょうどよいタイミングだったりもする👍


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

nobuhikosawai

Personal blog by nobuhikosawai
who lives and works in Japan.