MathJax を v2 から v3 にバージョンアップするときに注意すること【color 編】

# はじめに

MathJax は、Qiita でも使用されているブラウザ上で数式を表示するためのライブラリです。LaTeXの数式の記法等で数式を記述できます。

https://www.mathjax.org/

MathJax は v3.0 で実装が新しいものに書き直されたため、 v2 との違いが多くバージョンアップする際に注意が必要です。以下のドキュメントに移行方法が記載されています。

https://docs.mathjax.org/en/latest/upgrading/v2.html

本記事では、その中でも特に数式の色を変えるための `\color` マクロに焦点を当て、v2 と v3 の違いについて紹介します。

# LaTeX の `color` パッケージ

MathJax の話に移る前に、元となっている LaTeX の `color` パッケージについて簡単に説明します。

LaTeXは理系の分野で論文を書かれる際に使用される文書作成ツールです。詳細は以下のWikiなどを読んでください。

https://texwiki.texjp.org/?LaTeX%E5%85%A5%E9%96%80

LaTeX では標準で式に色を付ける機能はないため、`color` パッケージ等を使う必要があります。
環境によって多少方法は異なりますが、プリアンブルに `\usepackage{color}` と書くことで、`\color` マクロが使えるようになります。

以下のように文字の色を指定すると、マクロ以降の `{}` で囲った範囲の色が変えることができます。（`{}` で囲まない場合、`\color` より後の式の色がすべて変わります。）

```tex:LaTeX の color
あかしけ　やなげ　{\color{red} 緋色の鳥よ}　くさはみ　ねはみ　けをのばせ
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325392/64383eaf-2dfa-b519-b309-acd3cb2fd097.png)


# MathJax v2 の color

MathJax には LaTeX の人気のパッケージのマクロ多くが実装されています。

もちろん `\color` も MathJax v2 で使用できますが、 LaTeX の `color` パッケージと使い方が異なります。
MathJax v2 では、以下のように第一引数に色、第二引数に色を変えたい式を記述します。

```tex:MathJax v2 の color
あかしけ やなげ \color{red}{緋色の鳥よ} くさはみ ねはみ けをのばせ
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdQVXZG" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/mdQVXZG">
  Untitled</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

また、設定に以下を加えることで、LaTeX 互換の記法も可能です。

```js
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]},
  TeX: {
    extensions: ["color.js"]
  }
});
```

```tex:MathJax v2 の color (LaTeX 互換)
あかしけ やなげ {\color{red} 緋色の鳥よ} くさはみ ねはみ けをのばせ
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="ZEmQxEO" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/ZEmQxEO">
  MathJax v2 color</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

詳細は以下の記事に記載があります。

https://docs.mathjax.org/en/v2.7-latest/tex.html?highlight=color#color

# MathJax v3 の color

MathJax v3 ではどうなるかというと、デフォルトが LaTeX の `\color` の書き方と同じになります。

```tex:MathJax v3
あかしけ やなげ {\color{red} 緋色の鳥よ} くさはみ ねはみ けをのばせ
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyQGmXK" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/dyQGmXK">
  MathJax v2 color</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

これは、`color` 拡張と呼ばれます。

https://docs.mathjax.org/en/latest/input/tex/extensions/color.html

また、設定を変更することで MathJax v2 の `\color` と同じ書き方もできます。
以下のように、

```javascript
window.MathJax = {
  loader: {load: ['[tex]/colorv2']},
  tex: {packages: {'[+]': ['colorv2']}}
};
```

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWJympj" data-user="wataru86" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/wataru86/pen/QWJympj">
  MathJax v2 color</a> by Wataru Yamada (<a href="https://codepen.io/wataru86">@wataru86</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

LaTeX 互換が `color` 拡張であるのに対し、MathJax v2 の記法は `colorv2` 拡張と呼ばれます。詳細は以下に記載されています。

https://docs.mathjax.org/en/latest/input/tex/extensions/colorv2.html#tex-colorv2

# さいごに

このように、v2 から v3 へバージョンを上げる際、そのままでは色がおかしくなり、式全体が真っ赤になってしまう可能性もあります。さらに、今回紹介した変更点以外にも多くの変更がありますが、以下ドキュメントに丁寧に変更点や移行方法が載っているので、それをしっかり読めば問題なく以降できると思います！！

https://docs.mathjax.org/en/latest/upgrading/v2.html

# おまけ

Qiita の MathJax が v3 になりました！
[数式を描画するライブラリのバージョンアップを行います - Qiita Blog](https://blog.qiita.com/update-math-jax-v3/)

v3移行時に `colorv2` 拡張の設定を行い、 `\color` を v2 の記法のまま書けるようになっています。

````
```math
あかしけ　やなげ　\color{red}{緋色の鳥よ}　くさはみ　ねはみ　けをのばせ
```
````

```math
あかしけ　やなげ　\color{red}{緋色の鳥よ}　くさはみ　ねはみ　けをのばせ
```

# おまけ2

:::note warn
警告:プロトコル"焚書"発動下に無い状況で以下リンクにアクセスすることは禁じられています
:::

http://scp-jp.wikidot.com/scp-444-jp