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

2022年8月29日

著者：サイトウマサカズ

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

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

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

Webrandum

ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」

https://webrandum.net/js-library-mathjax

Webrandum

Ulyssesの「コードブロック」と「ソースブロック」の違いと使い分け

https://webrandum.net/ulysses-code-source

MathJaxの読み込み

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

<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>内の設定を変更します。