人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. SVGでtext要素を上下左右中央寄せする

  8. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. ネストや親セレクタの参照など基本的な拡張機能について学ぼう

Web上で綺麗な数式を記述できるMathjax.jsプラグインの使い方

Webページに簡単に数式を載せることができるMathjax.jsの紹介です。ここでは紹介しきれないほどの多機能なので一度ドキュメントを読んでみるといいかもしれません。

CDNから読み込み


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  // Latexみたいに$...$で囲めばインラインになるようにする
  tex2jax: {
    inlineMath: [['$', '$'], ["\\(", "\\)"]],
    processEscapes: true
  }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_SVG" async></script>

MathJax.Hub.Config で色々な設定をすることができます。Mathjax.jsの読み込みの際、?config= のあとにあらかじめ用意された設定ファイルを指定できます。ここでは、SVGで出力するようにしています。

数式の表示


$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

$$ で囲むとブロック要素、$ で囲むとインライン要素になります。基本的にはLatexの記法と同じですが、一部使えない機能もあるようです。

ローディング中を非表示


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: 'none'
});
</script>

ブラウザの左下に表示される読み込み中のパーセンテージを非表示にします。

ディスプレイ数式を左寄せに


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  displayAlign: "left"
});
</script>

数式の色を変更


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  messageStyle: 'none',
  tex2jax: {
    inlineMath: [['$', '$'], ["\\(", "\\)"]],
    processEscapes: true
  },
  TeX: {
    extensions: ['color.js']
  }
});
</script>

設定でcolor.jsを読み込んでおきます。


$$
x = \frac{ \color[RGB]{30,120,200}-b \color[RGB]{0,0,0} \pm \sqrt{b^2 - 4ac}}{2a}
$$

\color[RGB]{*,*,*} と指定します。再び黒色に戻すときは、\color[RGB]{0,0,0} のようにすれば戻すことができます。

何度も同じ色を指定する場合


$$
\definecolor{tomato}{RGB}{210,36,38}
x = \frac{ \color{tomato}-b \color[RGB]{0,0,0} \pm \sqrt{b^2 - 4ac}}{2a}
$$

\definecolor で色を定義できます。

一部ページにのみ読み込ませる


$$
\require{color}
x = \frac{ \color[RGB]{30,120,200}-b \color[RGB]{0,0,0} \pm \sqrt{b^2 - 4ac}}{2a}
$$

MathJax.Hub.Config に記述すると全ページでcolor.jsが読み込まれてしまうので、必要なページにのみ読み込ませたい場合はこのように \require{color} すると良いです。

レスポンシブに対応させる


<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$', '$'], ["\\(", "\\)"]],
    processEscapes: true
  },
  linebreaks: {
    automatic: true  // はみ出す場合は改行する
  }
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-AMS_SVG" async></script>
<script>

var delay;
window.addEventListener('resize', function() {
  clearTimeout(delay);
  
  delay = setTimeout(function() {
    MathJax.Hub.Queue(['Rerender', MathJax.Hub]);
  }, 100);
});

</script>

ウィンドウ幅が小さくなっても改行させて表示するようにします。改行させたくない場合は overflow-x: auto; で横スクロールさせる方法もあります。

CSS本執筆しました！！！