docsifyで数式を書けるようにする #JavaScript

はじめに

docsifyは、ドキュメントWebページを作成するツールです。静的なHTMLをジェネレートするのではなく、Markdownをパースして表示するSPAのように動作します。

セットアップ

macOS Catalina 10.15.2 で作業しました。docsifyは、npmでインストールできます。

$ npm i docsify-cli -g

initコマンドで、ドキュメントの雛形を作ります。

$ docsify init hoge

serveコマンドで、ローカルにサーバーが立ち上がりプレビューが見ることができます。もととなるMarkdownファイルが変更されると、スグに反映されます。

$ docsify serve hoge

Serving /Users/yoshoku/hoge now.
Listening at http://localhost:3000

数式を書けるようにする

数式の表示には、docsify-katexを利用します。KaTeXは、WebページでTeXによる数式をレンダリングするライブラリで、有名なMathJaxよりも速く動作するそうです。docsify-katexは、このKaTeXをdocsifyで利用できるようにしたものです。

セットアップ

利用は簡単で、initコマンドで作成されたindex.htmlに、scriptタグをbodyタグ内の末尾などに追加するだけです。

... 省略

  <!-- CDN files for docsify-katex -->
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css"/>
</body>
</html>

これでOKです。

数式の書き方

\$でくくります。\$が一つであれば行内に、\$が二つであれば改行して、数式をレンダリングします。

改行する感じの数式
$$\mathbf{x}\in\mathcal{R}^{d}$$
です。

改行しない感じの数式 $\mathbf{x}\in\mathcal{R}^{d}$ です。

これが、以下のようになります。

おわりに

docsifyは気軽に書けていいですね。