Math

Render math expressions that don't require a full TeX distribution at build-time with MathJax or KaTeX.

• Automatic CSS: MathJax and KaTeX need CSS to work properly. SvelTeX will by default automatically take care of this for you.

• Adaptive theming: MathJax and KaTeX both use currentColor for their output by default. KaTeX also natively supports CSS color variables, and for MathJax this behavior is emulated by SvelTeX.

• Custom transformers: Inject custom transformers to pre- and post-process the in- and output of the math renderer, respectively.

Backends

The following backends are supported for math rendering:

• MathJax [web / github / npm]: An extensible math renderer that supports many TeX and LaTeX commands and places a lot of focus on accessibility. It supports SVG and CHTML output. It's somewhat bulkier and slower than KaTeX, but this matters primarily for client-side rendering, which is non-existent with SvelTeX — instead, in this context the only effect that the difference in performance might have is potentially yielding marginally slower build times.
• KaTeX [web / github / npm]: A fast math renderer that supports many TeX and LaTeX commands and produces CHTML output. It supports fewer commands than MathJax, and only a few extensions.

Configuration

Hint: Hover over the different properties in the code block to show some IntelliSense.

MathJax

// sveltex.config.js
import { sveltex } from '@nvl/sveltex'

export default await sveltex({
    mathBackend: 'mathjax',
}, {
    math: {
        css: {
            type: 'hybrid',
            cdn: 'jsdelivr'
        },
        mathjax: {
            // Options passed to MathJax; note that some of the
            // options may be ineffective, since SvelTeX takes
            // care of some of the functionality that MathJax
            // usually provides (e.g., finding math within a
            // source file).
        },
        outputFormat: 'svg',
        transformers: {
            pre: [],
            post: [],
        },
    }
})

KaTeX

// sveltex.config.js
import { sveltex } from '@nvl/sveltex'

export default await sveltex({
    mathBackend: 'katex',
}, {
    math: {
        css: {
            type: 'cdn',
            cdn: 'jsdelivr'
        },
        katex: {
            // Options passed to KaTeX
        },
        transformers: {
            pre: [],
            post: [],
        },
    }
})