Mathjax 3 をWordPressにインストールして、プラグインなしでLaTeXを表記する。

2021年8月9日日進月歩MathJax & LaTeX

「Mathjax 3 をWordPressにインストールして、プラグインなしでLaTeXを表記する。」のアイキャッチ画像
読了時間: 約59

WordPressには、便利なプラグインがたくさん用意されています。
私も、数式を書くときにプラグインを使ってきましたが、
できればプラグインなしに書くことができないかを調べてみました。

いつまでもプラグイン頼みではいられない。

気がつけば、ブログ開設当時からお世話になっていたプラグイン、
MathJax LaTeX(マスジャックスラテフ)が更新されなくなっていました。
ひとまずは、現在も更新されているプラグインを使うことにしましたが、
このプラグインも、いつまで使い続けられるかわかりません。

WordPressおけるプラグインは、たとえるなら家電ですね。
「ごはんを炊く」のは、昔ならかまどに火を起こして、お釜を使っていましたが、
今は、炊飯器のコードをコンセントに挿せば、スイッチひとつで炊くことができます。

このように、本来なら大変な手順を追わねばならぬことを楽にしてくれるのがプラグインです。

しかし、こんな便利なプラグインにも困ったことが。
一生モノの炊飯器がないように、プラグインも永続的なものではないのです。

私の印象としては、プラグイン製作者は、個人の方が多いようです。
この場合、プラグイン更新の頻度は、製作者の意欲や厚意次第ということになってしまいます。

大変かもしれないけれど、やっぱり自分で「ごはんが炊ける」にこしたことはないな。と思うのでした。

プラグインなしにMathJaxを使うことはできないか

プラグインが、「あれば、使えば格段に便利になる道具」だとしたら、
プラグインは必須アイテムではないということになります。

つまり、プラグインなしでもWebサイトやブログで数式を書ける人もいるはず。

Lukia_74

Lukia

この際、プラグインなしで数式を書ける人になりたい!

以下、いろいろなサイトのお世話になりながら、プラグインなしで数式を書くための設定を行ってみました。

ヘッダーにスクリプトタグを入れる。

2021年現在、MathJax はバージョン3になっているそうです。
そこで、WordPressは使っているテーマによるかと思いますが、ヘッダーに以下のタグを入れたら、
MathJaxがインストールされ、数式を書く準備が調うようです。

Lukia_74

Lukia

ちなみに、私がお世話になっているテーマ、Luxeritas(ルクセリタス)では、
Luxeritas>子テーマの編集>Headタグ : add-header.php
に進んで、タグを入れました。
<script
src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
type="text/javascript"
id="MathJax-script"
async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">

ちなみに、当ブログは右クリック操作ができないようになっているかと思いますので、
実際のタグは、以下のリンクよりコピーされるとよいかと思います。

MathJax version3 のインストール方法

そして、どうやらこれだけみたいでした。

あっさり過ぎて拍子抜けしちゃいました。

昔、HTMLの勉強をしたことがあるのですが、HTMLの場合は、毎回ヘッダー(<Head></Head>
)とボディ(<Body></Body>)というタグを準備し、さらにそれらを(<Html></Html>)というタグで挟んでやらねばなりませんでした。
しかし、PHPは、一個ヘッダーを準備すれば、それらがすべてのページに適用されるようなのです。
(勉強していないから詳しくないけれど)

今回、ヘッダーにMathJaxをインストールするタグを入れたので、
今後私のブログでは、記事内容に関係なく、数式が書ける準備が調っているということになろうかと思います。

ブログページにコードを表示する方法も覚えました

ちなみに、今回MathJaxのコードをヘッダーに入れることを調べるうち、
コードをそのまま表示する方法も知りました。


HTMLのときは、<pre></pre>を書けばよかったのですが、
WordPressの場合は、それではうまく表示されませんでした。

ブロックエディタを使ってみたこともありましたが、
やっぱり、クラシックエディタのほうが使いやすい。
(数式書くときは断然クラシックエディタです)

上記のブログでは、クラシックエディタでのコード表示の仕方も教えてくださっていました。
ビジュアルモードで、
フォーマット>コード と選択します。
すると、灰色に塗りつぶされたカーソルが現れるので、そこに表示したいタグを書き込みます。

試しに数式を書いてみた

現在、当ブログには、MathJax LaTeX(マスジャックスラテフ)とSimple Mathjax(シンプルマスジャックス)というプラグインをインストールしていますが、無効化しています。

でも、ヘッダーに入れたコードのおかげで問題なく表示されているようです。

$$f\left( x\right)=x^2+3x-8$$
と書くと、中央に数式が表示されます。
$$f\left( x\right)=x^2+3x-8$$

嬉しかったのが、連立方程式のかっこが書けるようになったこと。
MathJax LaTeXを使っているときは、何度か試したけれどうまく表示できませんでした。

\(\left\{\begin{array}{l}3x + 2y = 13\\5x + 3y = 21\end{array}\right.\)

また、インラインで分数(例\( \ \displaystyle\frac{3}{5} \ \) )を書くと、ほかの文字の大きさに揃えられてしまい、 きゅっと小さな分数になってしまいます。
\( \ \displaystyle\frac{3}{5} \ \) ←こんなふうに。

しかし、

\displaystyleを書き加えてやると、
例:\(\displaystyle \displaystyle\frac{3}{5}\)
他の文字の大きさに影響されず、\(\displaystyle \displaystyle\frac{3}{5}\)←このように、大きく表示されます。

さらに嬉しいのが、インラインの数式が自由に書けるようになったこと!
これまでは、<div style="padding:10px;border-radius: 10px; border: 5px double #FFFFFF;"></div>
のような見えない枠に入れて書いていました。

Lukia_74

Lukia

うおぉ、相当自由になった印象があります♪

\displaystyle を教えてくださったカイゼン屋さん、ありがとうございました。

問題なければプラグインの数を減らしたい

2021年8月になって、Python(パイソン)の勉強をはじめました。
まだ始めたばかりなので、コードの入力に四苦八苦し、
簡単なコードや、写経しただけなのに、実行が成功するたび、
小さく喜んでいるような段階です。
でも、そのおかげか、単なる文字の羅列だったコードが少し読み取れるようになり、
ほかの言語でも、なんとなくこういうことを指示している部分じゃないのかな。と予想できるようになりました。

ゆくゆくは、WordPress( \ \times \ )Python で、今よりもっと楽に記事を書くことができるような方法を編み出せたらいいな。と思っています。
また、ついつい便利だから。とインストールしたプラグインの数が増えてしまいましたので、
プログラミング言語を学ぶことで、これらの数を減らすことができればいいな。とも思っています。

Pythonを学ぶうち、Pythonだけでなく、プログラミング言語自体が数学との関係が深いことがわかってきましたので、今後このブログでも、その学んだことの一端とか、学び方のレポートなどを展開していきたいです。

そのためにも、今回、MathJaxのバージョン3のインストールと、コードの表示の仕方が学べたのは大きな成果でした。


 

プロフィール

Author Profile
Lukia_74

元・再受験生、元塾講師、元高校非常勤講師。広島育ち。
中・高国語の教員免許を取得するも、塾講師時代は英語や数学ばかり教えていた。
思うところあって大学再受験を決意。理転し、数学Ⅲ、化学、生物を独習する。国立大学へ合格するも、2018年3月に再受験生生活にピリオドを打つ。
モットーは「自分の予定はキャンセルできても、生徒の予定はキャンセルできない」と「主婦(夫)こそ理系たれ」。
広島のお好み焼きとグレープフルーツが大好き。どっちかというと左党。楽しみはひとりカラオケ。
高校で教鞭を取った経験から、現在は「現代文」と「小論文」の指導力アップを目指し、自己研鑽中。最近は趣味として高校数学を解く。

カテゴリー

2021年8月9日日進月歩MathJax & LaTeX

Posted by Lukia_74