LaTeX

Nextra は、KaTeX を使用して LaTeX 式を MDX で直接プリレンダリングするか、MathJax を使用してブラウザで数学を動的にレンダリングできます。LaTeX のサポートを有効にするには、next.config.mjs ファイルで latex オプションを有効にする必要があります。

import nextra from 'nextra'
 
const withNextra = nextra({
  latex: true
})
 
export default withNextra()

true の値は、KaTeX を数式レンダラーとして使用します。レンダラーを明示的に指定するには、代わりにオブジェクト { renderer: 'katex' } または { renderer: 'mathjax' } を latex: ... の値として指定します。

有効にすると、必要な CSS とフォントがサイトに自動的に含まれ、インライン数式を $...$ で囲むか、math ラベル付きの囲まれたコードブロックで表示数式を書くことで、数式を記述できます。

```math
\int x^2
```

例

例えば、次の Markdown コード

The **Pythagorean equation** is $a=\sqrt{b^2 + c^2}$ and the quadratic formula:
 
```math
x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
```

は次のようにレンダリングされます。

LaTeX 式と同じ行でMarkdown と MDX の構文 を使用することもできます。

API

KaTeX

rehype-katex は、コンテンツ内の LaTeX 式をプリレンダリングするために使用されます。Nextra の設定で options キーを介して、サポートされているKaTeX オプション を渡すことができます。例えば、\mathbb{R} としてレンダリングされるマクロ \RR を追加するには、次の設定を使用できます。

const withNextra = nextra({
  latex: {
    renderer: 'katex',
    options: {
      macros: {
        '\\RR': '\\mathbb{R}'
      }
    }
  }
})

サポートされているコマンドのリストについては、KaTeX のドキュメント を参照してください。

MathJax

MathJax が有効になっている場合（latex: { renderer: 'mathjax' } を設定することで）、数式はプリレンダリングされるのではなく、better-react-mathjax を介してページ読み込み時にレンダリングされます。デフォルトでは、**MathJax は MathJax CDN を介して提供される**ため、ファイルはサイトに直接含まれません。¹

MathJax のレンダリングは、Nextra の設定で renderer: 'mathjax' を設定することで有効になります。

const withNextra = nextra({
  latex: {
    renderer: 'mathjax'
  }
})

Nextra の設定で options キーを介して、better-react-mathjax に追加のオプションを渡すことができます。config: ... オプションは MathJax の設定 を設定します。ただし、Nextra の設定の options キーを介して better-react-mathjax にシリアライズ可能なオプションのみを渡すことができることに注意してください。²

例えば、MathJax で \RR を \mathbb{R} としてレンダリングするように設定するには、次の設定を使用できます。

const withNextra = nextra({
  latex: {
    renderer: 'mathjax',
    options: {
      config: {
        tex: {
          macros: {
            RR: '\\mathbb{R}'
          }
        }
      }
    }
  }
})

MathJax CDN

デフォルトでは、MathJax は MathJax CDN を介して提供されます。別の場所（プロジェクト内のローカルを含む）からファイルを配信するには、latex 設定に src: ... オプションを渡す必要があります。src オプションの詳細については、better-react-mathjax のドキュメント を参照してください。さらに、MathJax ディストリビューションを /public フォルダにコピーして、ローカルで提供する必要がある場合があります。

KaTeX 対 MathJax

KaTeX では、数学式は事前にレンダリングされるため、ちらつきがなく、ページの読み込み速度が速くなります。ただし、KaTeX は MathJax のすべての機能、特にアクセシビリティ関連の機能をサポートしているわけではありません。

次の2つの例は、KaTeX（最初）と MathJax（2番目）でレンダリングされた同じ数式を示しています。

MathJax のアクセシビリティ機能により、2番目の数式はタブでアクセスでき、スクリーンリーダーが視覚障害者のために数学式を再処理するのに役立つコンテキストメニューがあります。