MathJax の簡易エディタを作りました


サイトに数式とかの表示をしたい時に、「MathJax」を導入することがありますが、
実際にコードを書くとなると、プレビューするのに時間かかったりとか、
PCにLaTexエディタ導入するかWebアプリに会員登録して〜・・とか、結構面倒なので、自作しました。

このくらいならサクッと書けると思います。

\[ 税抜価格 = \frac{ 税込価格 }{ 100 + 8 \left( { 消費税率 : \% } \right) } \times 100 \]
\[ 台形の面積 = \frac{ \left( {上底 + 下底 } \right) \times 高さ }{ 2 } \]

こちらからどうぞ MathJax 簡易エディタ

エディタは、
メニューの開閉エリア・整形済みコードの挿入ボタンエリア・コード編集エリア・プレビューエリア
・コレクションエリアに分かれていて、 コレクションエリアは、整形中のコードをストックしていけます。

全体像は、こんな感じ

mathjax%e3%81%ae%e7%b0%a1%e6%98%93%e3%82%a8%e3%83%86%e3%82%99%e3%82%a3%e3%82%bfif1tech

コードをコピペするなり、キャプチャを取るなりして使ってあげてください。

メモ

CSSは、内蔵されてるものが使われるので基本必要ありませんが、
MathJaxで表示される要素は、
左のように vertical-align: baseline; を指定しておかないと
上下位置がずれてしまいます。

このサイトのように vertical-align baseline 以外にしている場合は、限定的に指定してあげる必要がありました。