✨ remarkを使ってmarkdownをパースしてレンダリングする仕組みをつける - Githubissues

ycu-engine / DSC-Blog-Frontend

データサイエンス倶楽部ブログフロントエンド

MIT License

0 stars 0 forks source link

✨ remarkを使ってmarkdownをパースしてレンダリングする仕組みをつける #26

Closed N-ha-1050 closed 10 months ago

N-ha-1050 commented 11 months ago

Issueへのリンク

close #2

やったこと

remark を導入して、マークダウンのパーサーを実装
- markdown → react element、html、plain text
以下のプラグインを導入しました
- remark-gfm GitHub Flavored Markdown に対応
- remark-frontmatter YAML などを用いた Front-matter (メタデータなど)に対応現在は、Front-matter を変換対象から除外しているだけです
- remark-math 、 rehype-katex Latex を用いた数式表示に対応
- rehype-highlight highlight.js を用いた syntax highlight に対応

やりたいけどできなかったこと

Components をどのように分ければよいか分からなかったので、Alart を一つのファイルにまとめてしまいました

動作確認

/markdown-test

その他

rehype-katex と rehype-highlight の使用には CSS が必要になります(テストページには導入済)
以下のプラグインはどちらを導入したら良いか迷っています
- 数式表示 rehype-katex or rehype-mathjax katex を入れました
- syntax highlight rehype-highlight or rehype-prism highlightjs を入れました