読者です 読者をやめる 読者になる 読者になる

ガレスタさんのDIY日記

電子回路、Web、組み込み、自作エフェクターを語るblog

MathJaxの利用

ホームページ

今回はMathjaxというホームページ上で数式を扱うためのサービスを紹介しようと思う。
実際理論系の解説サイトで画像として数式を貼っているのを見かけるのも少なくはない。ただこれは見る側はいいのだが編集する側は非常に手間である。

そこで今回はMathjaxを使って書く側の負担を減らしつつメリットがいっぱいあることを示そうと思う。

Mathjaxの主な特徴は以下に示す通りである。

  • Tex形式での記述ができる
  • 数式をベクターで表示できる。
  • Texユーザーへの引用が楽になる。
  • blog上での数式導入が容易にできる。

はてなblogでMathjaxを使う

はてなblogではもとから使えるみたいなのでこのように打つといけるみたいです。

[tex:{ \displaystyle
\begin{split} \therefore x(t) &= 
\frac{4}{\pi}\sum^{\infty}_{n=1}\frac{(-1)^{n-1}}{2n-1}
cos(2n-1)\omega_{0}t\\ 
&=\frac{4}{\pi}(cos\omega_{0}t-\frac{1}{3}cos3\omega_{0}t 
+ \frac{1}{5}cos5\omega_{0}t -\cdots) \end{split}
}]


{ \displaystyle
 \begin{split} \therefore x(t) &= \frac{4}{\pi}\sum^{\infty}_{n=1}\frac{(-1)^{n-1}}{2n-1}cos(2n-1)\omega_{0}t\\ &=\frac{4}{\pi}(cos\omega_{0}t-\frac{1}{3}cos3\omega_{0}t + \frac{1}{5}cos5\omega_{0}t -\cdots) \end{split}}

使い方は以下のような感じです。

[tex:{ \displaystyle Tex形式の数式をここに入力 }]

自身のサイトでMathjaxを使う

一方自身のホームページでMathjaxを使う方法もあります。

まずはMathjaxのHPに行きましょう
www.mathjax.org

以下がドキュメントページです
Getting Started — MathJax 2.6 documentation

まずはそこに行って説明読みつつ理解するのがいいと思います。

導入

導入はいたって簡単でCDN(コンテンツデリバリーネットワーク)という方式をとっているので以下のスクリプトタグを使いたいHTMLファイルのヘッダー内に記述すればOKです。

<script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

実際のページで使った例

BlogTemplate

引用機能

数式をマウスで選択して「show math as」を選べば LaTeX形式引用が可能である。

f:id:gsmcustomeffects:20160305201028p:plain

まとめ

  • 技術系ブログでTexスタイルを維持することができた
  • CDNで自身のサイトにも導入可能なことを検証できた。