GatsbyJSブログ本文のMarkdown対応は結構簡単にできた
2018年11月30日
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を使ったやり方に変えようと思っています。