つれづれなる備忘録

日々の発見をあるがままに綴る

トップ > その他 > Texによる数式表現37～MathJax, KaTeX表示トラブルの要因・解決

Texによる数式表現37～MathJax, KaTeX表示トラブルの要因・解決

その他 TeX MathJax

　前回のMathJax, KaTeXに関してWeb上の表示できない(LaTeXコードから変換されない）トラブルについて症状、推定される要因と解決方法(2020/9/20現在)について今回は紹介する。

1. トラブルの症状

前回の投稿以後で正しく表示できないという症状についてをいろいろ試した結果をまとめると以下のようになった。

2. 表示できない要因

　特にインストールを行わずにブラウザのみでMathJaxやKaTeXを実行するには、外部のJavascriptライブラリの読み込みを行うことで可能としている。外部のJavascriptライブラリを利用する方法としてCDN(Contents Delivery Network)が使われており、それぞれのWebページで例えばKaTeXの場合は<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script>と記述することで読み込むことができる。 CDNについてはこちらを参照：JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話

指定しているCDNのライブラリにアクセスできるかどうか、srcのURLに直接アクセスしてみると以下のようにChromeの場合プライバシーエラーが表示される。

"Javascriptライブラリでのプライバシーエラー"
Javascriptライブラリでのプライバシーエラー

例はKaTeXのバージョン0.11.1だが最新の0.12.0でも同じことが起こる。https://katex.org/docs/browser.html

次に現在でも正しく数式表示できている上記のMathJax2.7.1を利用したときに記述したコード<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML"></script>で同様にURLへ直接アクセスしてみると、大量のコードがブラウザ上に表示されてアクセスできることがわかる。

"MathJax 2.7.1ライブラリへのアクセス"
"MathJax 2.7.1ライブラリへのアクセス"

以上で要因としては、9月ぐらいからいくつかのサイトにアクセスしようとしたときに見られる（恐らく証明書の期限切れに伴う）プライバシーエラーということが推察される。

3. KaTeXを表示するための対処法

　MathJaX.2.7.1が表示できた理由としてはバージョンの問題というよりは、CDNのアクセス先がプライバシーエラーで接続できないということにありそうだ。具体的には上の例ではKaTeXはjsDelivrを指定しているため接続できず、MathJax2.7.1はCloudflareを指定しているため接続でき、KaTeXのJavascriptライブラリが正常に読み込まれることで数式表示できたと考えられる。

現在KaTeXの公式サイトでは、KaTeXのライブラリはjsDelivrを指定しているがCloudflareのものを以下のように指定する。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css">
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/contrib/auto-render.min.js"></script>
<script>$(document).ready(function(){renderMathInElement(document.body,{delimiters: [{left: "$$", right: "$$", display: true},{left: "$", right: "$", display: false}]})});</script>

cdnjs(Cloudflare)のサイトからKaTeXのjavascriptライブラリのアクセス先を検索できるが、cdnjsのサイトはChrome系だとプライバシーエラーで表示できないため今回はthisisunsafeとタイプして突破した。（下記参照）

atatat.hatenablog.com

現状はcdnjsのページはプライバシーエラーになるが、中身のJavascriptライブラリは接続できるという状況で今後についてはどうなるかわからない。

KaTeX実行のテスト表示として以下のコードを実行している

インライン表示テスト$ \KaTeX:  S=\pi r^{2} $

インライン表示テスト$ \KaTeX: S=\pi r^{2} $

独立数式表示

$$ \frac{\partial \theta}{\partial t} = \frac{\partial}{\partial z}\left[ K(\theta) \left ( \frac{\partial \psi}{\partial z} + 1 \right] \right) $$

$$ \frac{\partial \theta}{\partial t} = \frac{\partial}{\partial z}\left[ K(\theta) \left ( \frac{\partial \psi}{\partial z} + 1 \right] \right) $$

以上のように外部ライブラリ接続時のプライバシーエラーを回避するためCDNの利用をjsDelivrからCloudflareに指定することで（2020/9/20現在では）KaTeXでの表示トラブルを解決できた。

このページではKaTeXのライブラリを読み込んでおり、MathJaxのライブラリを同時に利用できないので別記事にする予定だが、MathJaxについても外部ライブラリをjsDelivrからCloudflareにすることで解決可能である。

4. まとめ

　今回はMathJax, KaTeXの数式表示ができなくたった要因として、プライバシーエラーでJavascriptライブラリに接続できなくなったと推定し、それを回避するためCDNの利用をjsDelivrからCloudflareに指定することで解決できることを紹介した。ただ、今後CloudflareのJavascriptライブラリに接続できなくなる可能性もあり、またjsDelivrへの接続が復活することもあるのであくまで現時点での回避法ということになる。