はてなブログで満足に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など表示されないコマンドの共通点ははてなブログキーワード自動リンクにそれらの文字が登録されていること.

すなわち,sigmatauなどの文字に自動リンクが張られ,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] はてなブログ無料版でキーワードリンク(下線)を記事から消す方法 - インサイド シーナ

.gitignore の書き方

動機と概要

自分はhspiceというCUIのSPICEを頻繁に使用しており,それらのコードの管理にGitを用いている. しかし,hspiceの出力ファイルが膨大になりすぎてインデックスに追加したりコミットするのにも時間がかかるようになった. そこでそのようなファイルのみをgitの管理下から取り除く方法を紹介する. 流れとしては
1. .gitignoreの記述
2. すでに管理下に追加されているものを外す
の順に進める.

.gitignoreの記述

.gitignoreというファイルをレポジトリ内に置いて,その中にGit管理の対象外にしたいファイルを指定する. 最近はgiboと呼ばれる.gitignoreを自動生成してくれるツールがあるため,自分のような特殊な用途以外の方はそちらを参考にしたほうが良いかもしれない.
まずレポジトリ内に.gitignoreを作成する. レポジトリ内であればどこでもよいし異なるディレクトリに複数作成しても良いが,最初に触るときは直下に置くのが簡単だと思われる.

\の記法

記法 除外対象
/をつけない filename .gitignore以下のすべてのディレクト
にあるディレクトリ及びファイル
末尾の/ filename/ .gitignore以下のすべてのディレクト
にあるディレクト
冒頭の/ /filename .gitignoreがあるディレクトリからの相対パス
指定されるディレクト

ワイルドカードも使用可

!の用法

!filenameなどと指定することで指定されたパスを除外しないようにできる. また,上の方法で除外した対象を塗り替えて指定できる.

既に追加されているファイルの除外

下記のコマンドですでに追加されているファイルを除外する.--cachedを抜くとファイルごと削除されてしまうので注意.

$ git rm --cached <file>

fatal: pathspec did not match any files のようなエラーが出た場合は,--ignore-unmatchを追加する.

$ git rm --cached --ignore-unmatch <file>

実際にやった処理

hspice から出力されるファイルは拡張子が特殊(.tr0,.mt0など)であるため指定しやすい. また,自分は各プロジェクトごとにoutputディレクトリを作りそこにhspiceの結果を出力するようにしているので.gitignore内にoutput/を追記すればよいことが分かった.
また,それらを整形したデータをdataディレクトリに保存しているのでそれらも除外する.
実際に書いた.gitignoreは以下の通り.

*.txt
*.lis
*.ic*
*.mt*
*.mc*
*.pa*
*.st*
*.sw*
*.tr*
output/
data/    

この後,すでにインデックスに追加されていた管理対象外にしたいファイル類を管理下から外す. 自分の場合は各プロジェクトのoutput下とdata下を外したかったので以下を実行.

$ git rm --cached --ignore-unmatch **/output/
$ git rm --cached --ignore-unmatch **/data/

後はコミット,プッシュして終了.
大容量の出力ファイルをGit管理下から外すことで,gitの処理に時間がかからなくなり快適になった. 同じ事態に陥っているは方はぜひ早めに取り組みましょう.