Render TeX/LaTeX Mathematics with MathJax

• Author: @codemicro
• Created: 27th Feb 2023
• Updated: 27th Feb 2023
• Last Tested On: v23.02

This hack will allow TeX/LaTeX mathematic markup to be rendered within a page on BookStack using MathJax.

Inline math can be surrounded with $ and math blocks can be surrounded with $$ or \[...\]. Additionally LaTeX environments and \ref{...} commands will be processed.

This can be used with both the WYSIWYG editor and the Markdown editor and will affect everything on a given page, meaning this can be used in titles, book/chapter headings, etc.

Considerations

• This relies on JavaScript to parse and render content on page load.
• This loads the MathJax JavaScript from an external CDN (jsdelivr.net) server.
• Math rendering may not work in all areas of the application, notedly:
  • No rendering in the Markdown live preview.
  • No rendering in many export formats, including PDF.
• This could introduce rendering of Math where not intended.

Options

It is possible to further configure MathJax as documented here.

Code

1
2
3
4
5
6
7
8

<script>
    window.MathJax = {
        tex: {
            inlineMath: [['$', '$']],
        },
    };
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js"></script>

Latest Hacks