Issue
Issue
現時点での課題
- [ ] このブログポストの画面として生成されたHTMLにはMarkdownの記法が反映されていない
- [ ] コードブロック及びインラインコード:囲みもなく、ハイライトもされない
- [ ] できればコードの種類も表示したい(例:shやTypeScript等)
- [ ] 空白行:詰められる。
- [ ] チェックボックス:そのまま[x]や[ ]と表示されてしまう
- [ ] ~~打ち消し線~~:そのまま前後に~~が表示されてしまう
- [ ] リンク:そのままリンクの文字列が表示されてしまう
- [ ] コードブロック及びインラインコード:囲みもなく、ハイライトもされない
解決策
- リンクに関しては、全てのリンクを
[表示文字列](リンク)
のように[]()
で囲む表示文字列の形式で統一すればHTMLに反映される。 - 他の課題に関しては、Markdownの記法をHTMLに反映させるためのライブラリを導入することで解決する?
それだけでかなりの数のライブラリが候補として存在する
今回のサンプルでは元々remark
, remark-html
というライブラリが導入されているが、処理が不十分な模様。
/lib/posts.js
のgetPostData(id)
関数内で確かにremark関数を使ってHTMLを返す処理が書かれているが、一部の記法しか反映されていない。
別のより高機能なライブラリを導入するか、この関数の内容を修正するか?
どちらにせよそれなりに時間がかかりそうなので、今回は拘らずにこのままにしておく。
HTMLページの見た目上の問題なので、他の学習を優先する。
別のライブラリ候補としてzenn-markdown-html
はなかなか良さげ
Next.jsでMarkdownをHTMLに変換して自動目次生成機能を実装する
モノによってはハイライト表示を実装するのに別途highlight.js
というライブラリも併用が必要
(結論)
現状そこまでMarkdownの記法をHTMLに反映させることに学習コストを割くべきではないと判断した。