R note

GatsbyJSブログ本文のMarkdown対応は結構簡単にできた

GatsbyJS

GatsbyJSで作っているブログ( このサイト)の本文でMarkdownをサポートするのは結構簡単に実装できた。

以下の3つのプラグイン(パッケージ)を入れて本文をプロセスするだけだけだった。

  • unified
  • remark-parse
  • remark-html
<div
  dangerouslySetInnerHTML={{
    __html: unified()
      .use(markdown)
      .use(html)
      .processSync(post.data.body)
  }}
/>

次は本文に書き出されるHTMLのスタイリング。

今のところスタイルはCSS Modulesの手法で書いているんだけど、これでいいのか謎に思いながらやってます。

Sassを使ってかけないのかな?たぶん出来るんだろうけど。

この辺は今後学んで変更していく必要有りかも。

ちなみに、上記の方法をgatsby-transformer-remarkを使ったやり方に変えようと思っています。

参考サイト