## Math Engine MathJax

MathJax is a javascript library that uses the TeX algorithms and fonts to display math formulas on HTML pages. It allows for very fine-grained configuration, is widely used and works on all modern browsers.

This engine marks up math formulas with HTML `<script type="math/tex">`

tags that MathJax
understands. The only other thing to do is to include the MathJax library itself on the HTML page.

Note that kramdown does *not* ship with the MathJax library and that therefore the “default”
template does *not* include a link to it! The
MathJax documentation describes how to add a link
to MathJax to your page.

## Using KaTeX instead of MathJax

To use KaTeX instead of MathJax, activate the MathJax engine in kramdown, include the KaTeX Javascript files in the HTML file and put the following script at the end of the HTML file (note that JQuery is used for some parts but it can probably be done without it):

```
<script>
$("script[type='math/tex']").replaceWith(function() {
var tex = $(this).text();
return katex.renderToString(tex, {displayMode: false});
});
$("script[type='math/tex; mode=display']").replaceWith(function() {
var tex = $(this).html();
return katex.renderToString(tex.replace(/%.*/g, ''), {displayMode: true});
});
</script>
```

Note that including the KaTeX Javascript files and the above script is normally done using a template file (see the template option.

See this comment for more details.

## Options

The MathJax engine supports the following keys of the option ‘math_engine_opts’:

- preview
- Specifies whether a preview should be shown. It defaults to
`false`

but if set to`true`

, a preview with the LaTeX code itself is shown. If it is set to any value other than`false`

or`true`

, that value is shown as the preview. - preview_as_code
- When
`true`

, wraps the LaTeX code in`code`

/`pre > code`

tags instead of`span`

/`div`

tags, mirroring the structure of inline code / code blocks. This ensures the content is styled like regular code and improves legibility in RSS readers, text browsers, etc.To prevent styling issues after MathJax has loaded, consider adding

`.MathJax_Preview:empty { display:none }`

to your CSS.Defaults to

`false`

and only works if`preview`

is`true`

.