# 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.

js

```
// 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: [],
},
}
})
```

ts

```
// 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: [],
},
}
})
```