itachi-p

itachi-p

Issue

Issue

現時点での課題

  • [ ] このブログポストの画面として生成されたHTMLにはMarkdownの記法が反映されていない
    • [ ] コードブロック及びインラインコード:囲みもなく、ハイライトもされない
      • [ ] できればコードの種類も表示したい(例:shやTypeScript等)
    • [ ] 空白行:詰められる。
    • [ ] チェックボックス:そのまま[x]や[ ]と表示されてしまう
    • [ ] ~~打ち消し線~~:そのまま前後に~~が表示されてしまう
    • [ ] リンク:そのままリンクの文字列が表示されてしまう

解決策

  • リンクに関しては、全てのリンクを[表示文字列](リンク)のように[]()で囲む表示文字列の形式で統一すればHTMLに反映される。
  • 他の課題に関しては、Markdownの記法をHTMLに反映させるためのライブラリを導入することで解決する?

それだけでかなりの数のライブラリが候補として存在する
今回のサンプルでは元々remark, remark-html というライブラリが導入されているが、処理が不十分な模様。
/lib/posts.jsgetPostData(id)関数内で確かにremark関数を使ってHTMLを返す処理が書かれているが、一部の記法しか反映されていない。
別のより高機能なライブラリを導入するか、この関数の内容を修正するか?

どちらにせよそれなりに時間がかかりそうなので、今回は拘らずにこのままにしておく。
HTMLページの見た目上の問題なので、他の学習を優先する。

別のライブラリ候補としてzenn-markdown-html はなかなか良さげ

Next.jsでMarkdownをHTMLに変換して自動目次生成機能を実装する

モノによってはハイライト表示を実装するのに別途highlight.jsというライブラリも併用が必要

(結論)

現状そこまでMarkdownの記法をHTMLに反映させることに学習コストを割くべきではないと判断した。