数式表示プラグイン$\KaTeX$の導入

Bloggerに開設したこのブログに、数式表示プラグイン$\KaTeX$を導入しました。 --- 僕は、日頃、技術的なメモを、VSCode上で、マークダウン形式で作成しています。その数式表示の拡張機能では、KaTeXが使用されています。 VSCode上で作成した数式つきテキストを、できるだけそのままで、Bloggerに投稿できるようにしたいと思ったので、BloggerにもKaTeXを導入しました。 以下、その作業記録です。 <a name='more'></a> --- ## 前提 ### 環境 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - シンタックス・ハイライト・プラグイン：highlight.js(9.15.6) - 数式表示プラグイン：$\KaTeX$（0.10.0） - マークダウン・エディタ：VSCode（1.33.1） - マークダウン関連拡張機能： - Markdown All in One（2.2.0） - Markdown Preview Enhanced（0.3.13） - Markdown+Math （2.3.9） ### やりたい投稿手順 大まかには、以下のような手順で投稿できるようにしたいと思って、導入しました。 1. VSCode上で、マークダウン形式で投稿テキストを作成する。 - マークダウン形式で、数式を入力するときの区切り文字は、インライン（`inline`）の場合、`$`、独立行（`display`）の場合、`$$`とする。 2. 作成したテキストを、基本的にコピー＆ペーストで、Bloggerに投稿する。 - Bloggerの投稿作成画面では、HTML形式欄で入力する。 --- ## $\KaTeX$導入手順 $\KaTeX$サイトの[Auto-render Extension](https://katex.org/docs/autorender.html)[1]の Usage に掲載されているソースを参考に、bloggerのHTMLテンプレートの`</head>`タグの直前に挿入しました。 1. KaTeXプラグインのコードを追加。 1. 「ダッシュボード」-「テーマ」から、「HTMLの編集」ボタンをクリック。 2. HTMLソースのテキストボックス内で、Ctrl+fで検索ボックスを立ち上げて、`</head>`を検索。 3. `</head>`タグの直前に、以下のコードを追加。 ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous"/> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script> <script> document.addEventListener("DOMContentLoaded", function() { renderMathInElement(document.body, { delimiters: [ {left: "$$", right: "$$", display: true}, {left: "$", right: "$", display: false} ] } ); }); </script> ``` 4. 「テーマの保存」をクリックして、保存する。 ### 手順1.3の補足： Bloggerに導入する場合、テンプレートはHTMLではなくXMLなので、KaTeXサイトのサンプルコードのlinkタグの終わりに`/`を入れて閉じるようにしました。[2] ```html <link rel="stylesheet" href="https://…（略）… crossorigin="anonymous"/> ``` また、`renderMathInElement`のデフォルトでは、`$`がインラインの区切り文字になっていないので、オプションで指定しました。 ## 参考 - [1] : [$\KaTeX$: Auto-render Extension](https://katex.org/docs/autorender.html) - [2] : [The Strange Storage: Installation 導入](https://www.storange.jp/2017/02/katex.html) - [3] : [Seki's note: KaTeX による数式の表示](https://sekika.github.io/2017/05/01/katex-equation/) --- ## 今後の課題 * [ ] 参考ページ[2]には、InstantClickとの併用など、レスポンス改善の方法が記載されていますが、ここでは深追いしていません。今後、勉強してみたいです。 --- ## 更新履歴 2019-04-25 新規作成