雑記帳

ちょっとした文章とかメモ書きとか。

MathJax.jsのSVGレンダリングでより綺麗に出力

MathJax

MathJax.jsはWebページに綺麗な数式を表示させるJavascriptです。

最新版は現在v2.2です(13/7/3現在)

MathJaxのCDNがあるのでそこから引っ張ってくるのが手軽な使い方です。

よく以下のように使うと書かれています。

<script type="text/javascript"
  src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

しかし、MathJax.jsのv2.2はsvg画像でのレンダリングもサポートしているのでこちらを使ったほうが拡大により数式が荒くならず、また、表示も速くなります。

svgでのレンダリングは以下のようにします(参考:http://docs.mathjax.org/en/latest/configuration.html#using-a-configuration-file):

<script type="text/javascript"
  src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG">
</script>

こうすることで、表示がsvgでされるようになります。

また、以下のようにしておくと日本語環境での場合の数式入力がよりしやすくなるかもしれません。参考:http://docs.mathjax.org/en/latest/configuration.html#using-in-line-configuration-options

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ["\\(","\\)"]],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
    }
  });
</script>

こうすることで、数式の開始、終了に$記号が使えるようになります。

svgでのレンダリングの例が見当たらなかったのでメモ。
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。