Docusaurusで数式をクライアントサイドレンダリング(CSR)する
· 約10分
Docusaurusは静的サイトジェネレータなので、すべてのページがビルド時にレンダリングされます.
DocusaurusのマークダウンからHTMLにレンダリングする部分は remark と rehype が処理しています.数式を有効にするには、Docusaurusのドキュメント によれば、remark-math
と rehype-katex
(または rehype-mathjax
)を使います.
しかし、2,3個の数式ならともかく、それなりの数があるとビルドに時間がかかるようになり、生成されるhtmlやjsファイルが肥大化します.もちろん、数式も含めて事前にレンダリングするので、閲覧する場合はブラウザで数式の処理が入らず高速に表示できますが、個人的にはデメリットの方が大きいので、数式処理はクライアントサイドでしたいところです.ここでは、その方法を記録しておきます.