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

URL: https://webrandum.net/ulysses-mathjax/
公開日: 2022-08-29
更新日: 2022-08-25
カテゴリー: ライティング
タグ: Ulysses
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/08/eyecatch-11.png)ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」https://webrandum.net/js-library-mathjaxPC上で数式をキレイに表示させたい場合にはLaTeXという記述方法で入力すると、キレイにプレビューされます。ウェブサイト上でも同様に表示させたい場合は、このLaTeXをプレビューするJavaScriptライブラリの「MathJax」を使うとプレビューできます。MathJaxMathJaxはLaTeXをウェブ上でプレビューするJavaScriptライブラリです。LaTeXに関しての詳細は、過去にMacDownというアプリを使用してプレビューする方法の記事を書いたときに説明しているので、ぜひそちらをご覧ください。基本的な使い方下記のスクリプトタグを読み込みます。&lt...](https://webrandum.net/js-library-mathjax)

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2022/05/eyecatch-13.png)Ulyssesの「コードブロック」と「ソースブロック」の違いと使い分けhttps://webrandum.net/ulysses-code-sourceUlyssesには「コードブロック」と「ソースブロック」の似たようなマークアップが用意されています。違いが分からなかったのですが、ぱっと見はどちらも同じようなもので、細かな違いについて調べてみました。コードブロックとソースブロック「コードブロック」「ソースブロック」どちらもプログラムのテキスト（ソースコード）を入力するもので、見た目は似ていますが調べてみると使い道がかなり違います。 コードブロックソースブロック入力方法`（グレイヴ・アクセント）を2個続けて入力'（シングルクォート）を2個続けて入力~...](https://webrandum.net/ulysses-code-source)

## MathJaxの読み込み

まずはMathJaxの読み込みからです。

下記のコードをUlysses上のソースブロックに追加します。

![MathJaxの読み込み](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_1-15.png)

```
<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の入力](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_2-13.png)

```
$y = ax^2$
```

入力したらプレビューして確認します。

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

![HTMLのプレビュー](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_3-10.png)

![ePub](https://webrandum.net/mskz/wp-content/uploads/2022/08/image_4-6.png)

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