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

PC上で数式をキレイに表示させたい場合にはLaTeXという記述方法で入力すると、キレイにプレビューされます。ウェブサイト上でも同様に表示させたい場合は、このLaTeXをプレビューするJavaScriptライブラリの「MathJax」を使うとプレビューできます。MathJaxMathJaxはLaTeXをウェブ上でプレビューするJavaScriptライブラリです。LaTeXに関しての詳細は、過去にMacDownというアプリを使用してプレビューする方法の記事を書いたときに説明しているので、ぜひそちらをご覧ください。基本的な使い方下記のスクリプトタグを読み込みます。&lt...

Webrandum

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

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

Ulyssesには「コードブロック」と「ソースブロック」の似たようなマークアップが用意されています。違いが分からなかったのですが、ぱっと見はどちらも同じようなもので、細かな違いについて調べてみました。コードブロックとソースブロック「コードブロック」「ソースブロック」どちらもプログラムのテキスト（ソースコード）を入力するもので、見た目は似ていますが調べてみると使い道がかなり違います。コードブロックソースブロック入力方法`（グレイヴ・アクセント）を2個続けて入力'（シングルクォート）を2個続けて入力~...

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