このページでは、CSSを使ってMathJaxの数式を左寄せにしています。
MathJaxのscriptコードはいじっていません。
HTML
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
いつものコードだけです。
CSSに次のようなコードを追加すると、すべてのMathJax数式が左寄せになります。
CSS
div mjx-container[jax="CHTML"][display="true"] { text-align: left;
}
この状態で実際にMathJaxの数式コードを書いてみます。
ここでは次のとおりに書きました。
HTML(MathJaxコード)
\[\frac1m+\frac1n=\frac{3}{77}\]
\[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\]
\[\Leftrightarrow3mn-77m-77n=0\]
実際の表示がこちらです。
\[\frac1m+\frac1n=\frac{3}{77}\] \[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\] \[\Leftrightarrow3mn-77m-77n=0\]きちんと左寄せになっているはずです。
これで、すべてのMathJax数式が左揃え表示になってくれます。
ただ、「ここは中央寄せにしたい!」というときもありますよね。
そういうときはその都度、次のとおりにやればOKです。
- CSSを追加(事前準備)
- HTMLを編集
まず、中央寄せにするためのCSSを事前に追加しておきます。
CSS
div.imadake-center mjx-container[jax="CHTML"][display="true"] { text-align: center;
}
その上で、中央寄せにしたい数式コードを<div class="imadake-center">
と</div>
で囲めばOKです。
実際のHTMLの書き方がこちらです。
HTML
<div class="imadake-center">
\[\frac1m+\frac1n=\frac{3}{77}\]
\[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\]
\[\Leftrightarrow3mn-77m-77n=0\]
</div>
実際の表示がこちらです。
\[\frac1m+\frac1n=\frac{3}{77}\]
\[\Leftrightarrow\frac{m+n}{mn}=\frac{3}{77}\]
\[\Leftrightarrow3mn-77m-77n=0\]
ちゃんと中央寄せになっているはずです。
MathJaxの数式を左寄せにする方法については、こちらのページでより詳しく解説しています。
よろしければご覧ください!