WebDesigner's Memorandumウェブデザイナーの備忘録

UlyssesでMathJaxを使用して、LaTeXの数式をプレビューでキレイに表示させる方法

UlyssesでMathJaxを使用して、LaTeXの数式をプレビューでキレイに表示させる方法

ウェブサイト上でLaTeXをプレビューする方法に、MathJaxというJavaScriptライブラリを使用する方法があります。

Ulyssesのソースブロックを使えば、HTMLをプレビュー時にそのままHTMLとして読み込んでくれるので、ソースブロックにMathJaxのコードを追加すれば、Ulysses上でもMathJaxが使えるようになります。

MathJaxに関しての詳細や、Ulyssesのソースブロックに関しては過去に記事にしているので、そちらもご覧ください。

MathJaxの読み込み

まずはMathJaxの読み込みからです。
下記のコードをUlysses上のソースブロックに追加します。

MathJaxの読み込み

<script src=' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=default' async></script>
<script>
MathJax.Hub.Config({
  tex2jax: {
    inlineMath:[
      [
        '$', //開始記号
        '$' //終了記号
      ]
    ]
  }
});
</script>

これで「$」で囲った部分にMathJaxが反映されるようになります。
他の記号に変更したい場合は<script>内の設定を変更します。

プレビュー方法

試しに2乗をプレビューしてみます。
下記のように「^」のあとに数字を入力すれば累乗を表現できます。

LaTeXの入力

$y = ax^2$

入力したらプレビューして確認します。
「HTML」と「ePub」のプレビューだと、無事MathJaxが効いて2乗がキレイに表示されました。

HTMLのプレビュー

ePub

それ以外の普通の「テキスト」や「PDF」「DOCX」では効かないので注意しましょう。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね