はてなブログで満足にtex数式を使う

TeX

はてなブログでtex数式コマンドを満足に使えるようにするのにかなり苦労したのでその方法についてまとめます． エスケープがなくて済む方法や数式番号とその参照，\sigmaや\tauなどのtexコマンドが効かない問題も無料版のままで解決できました．

はてなブログでtexを使用する方法

主に以下の2つの方法が挙げられる

はてな記法ははてなブログでしか使えないので汎用性が無いし，いちいち[tex: ]と囲うのが面倒なので，残る選択肢であるMathJaxを使用する．

MathJax

MathJaxはwebブラウザ上で動作するLaTeXで書かれた数式を表示するライブラリで JavaScriptで書かれている． 多くのブラウザで動作して，WordPress上でも使用できるようなので汎用性も高い．

はてなブログにおけるMathJax使用

MathJaxをはてなブログで利用するのは

設定⇒デザイン⇒カスタマイズ⇒記事⇒記事上 に以下のコードを置くだけで良い．

<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

MathJax設定

上のコードに加えてもう少し詳細な設定を行う． 以降は TeX Input Processor Options — MathJax 3.1 documentation を参考にして作成した．

  • インラインの記述：inlineMath
  • 数式番号の追加：tags(自分は'all'に設定した)
  • エラーの表示：formatError の3つは設定したほうが良いと思われる．

数式番号は\eqrefで参照可能でリンクまで貼ってくれる． formatエラーは数式が表示されるはずだった場所にエラーメッセージを表示してくれる．

※MathJaxはv2.0⇒v3.0のアップグレードで大きく仕様が変わっている． MathJax.Hub.Configを含んでいるコードはv2.0の設定で古い情報なので注意．

自分の環境では下のスクリプトを設定している

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [             // start/end delimiter pairs for display math
      ['$$', '$$'],
      ['\\[', '\\]']
 　],
    tags: 'all',              // 'none' or 'ams' or 'all'
    tagSide: 'right',          // side for \tag macros
    processEscapes: true,      // use \$ to produce a literal dollar sign
    processEnvironments: true, // process \begin{xxx}...\end{xxx} outside math mode
    processRefs: true,         // process \ref{...} outside of math mode
    digits: /^(?:[0-9]+(?:\{,\}[0-9]{3})*(?:\.[0-9]*)?|\.[0-9]+)/,
                               // pattern for recognizing numbers
    formatError:               // function called when TeX syntax errors occur
        (jax, err) => jax.formatError(err)
  },
  svg: {
    fontCache: 'global'
  }
};
</script>

MathJaxのTex数式コマンド仕様

MathJaxを用いると\begin{align} と\ end{align}で囲うことで数式が入力できるが，そのままでは_(添え字)や^ (べき乗)の前に\を加える必要が出てくる． これをエスケープすると言う．

この面倒な問題は<div> </div> で囲むことで解決できる．すなわち，

<div>
\begin{align}
some equations
\end{align}
</div>

のように記述すればエスケープする必要がなく，通常のtexと同様の記述で良い．

ただし，インラインはエスケープを回避できないので，以下のように記述すると一応は通常のtexと互換性が取れる．
下付き文字は_(アンダーバー)の両側，上付き文字は^ の後ろに空白を挿入する．

\\( A _ {下付き文字}  A^ {上付き文字} \\)

参考： はてなブログで数式を書く - 七誌の開発日記

sigmaが効かない問題

はてなブログでMathJaxを使うことでtexで数式を出せるようになったが，なぜか\sigma が変換されない． 以下の記事でも同様のことが書かれていて\tauや\etaも表示されない．

arakan-pgm-ai.hatenablog.com

sigmaが効かない原因

\sigmaや\tauなど表示されないコマンドの共通点ははてなブログのキーワード自動リンクにそれらの文字が登録されていること．

すなわち，sigmaやtauなどの文字に自動リンクが張られ，texコマンドとして認識されていないのが原因だと推測した．

キーワード自動リンクを消す

であれば，自動リンクを消せればtexコマンドとして認識してくれるはず．

この自動リンクを消す方法は以下の2つ．

無論，後者を選択．
下の記事を参考にして自動リンクを削除する．

デザイン⇒カスタマイズ⇒記事⇒記事上 に以下のコードを置く． 自分の場合，MathJaxの設定のすぐ下に置いた．

<script type="text/javascript">
addEventListener("DOMContentLoaded",function(){var a=document.getElementsByClassName("entry-content");if(a)for(var i=0;i<a.length;i++)for(var b=a[i].getElementsByClassName("keyword");b.length;)b[0].outerHTML=b[0].textContent},!1);
</script>

www.inside-shiina.com

結果

無事入力することができました． (式\eqref{eq})

やっぱり，キーワード自動リンクが一部のtexコマンドと干渉してたみたいです．

\begin{align} \Sigma = \begin{pmatrix} \sigma_1 & & & & & 0 \\ & \sigma_2 & & & & \\ & & \ddots & & & \vdots \\ & & & \sigma_7 & & \\ & & & & \sigma_8 & 0 \end{pmatrix} \label{eq} \end{align}

参考文献

[1] TeX Input Processor Options — MathJax 3.1 documentation　
[2] はてなブログで数式を書く - 七誌の開発日記
[3] 数式を描くMathJax.jsで表示できないギリシャ文字を一覧でチェック／JavaScript - "BOKU"のITな日常
[4] はてなブログ無料版でキーワードリンク（下線）を記事から消す方法 - インサイド シーナ