Typesetting

Mathematical notation

The Kontrast distribution bundles the KaTeX library, which allows to typeset mathematical expressions in LaTeX syntax directly in the web browser. Please refer to the KaTeX documentation for an API description, a complete list of supported commands and license information.

Note that the KaTeX library only exposes a JavaScript API, which makes embedding of formulas into normal HTML text tedeious. To directly write equations inside HTML, the Kontrast distribution provides a helper utility for typesetting mathematical equations using KaTeX from <div> and <span> elements that have been marked using special CSS classes. For this to work, the file utilities/math.js must be included.

The utilities/math.js script looks for HTML elements with the katex-helper-displaymode and the katex-helper-inline classes upon page load. It then takes the inner text of these HTML elements and parses them using the KaTeX library. Finally, the LaTeX source code of the equation is replaced by the typeset result.

Equations

Formulas can be written using the katex-helper-displaymode class as a block element:

c^2 = a^2 + b^2

Inline math

You can include inline expressions like $E_\text x$ or like $\int\mathrm dx x^2$ within a paragraph using the katex-helper-inline class:

Escaping

Note that unlike in JavaScript code, there is no need to escape the backslash character. However, in order not to interfere with the HTML code, you need to escape the <, > and & characters using <, > and &:

a < b

For more details on HTML escape entities, please refer to the respective MDN article.

Chemical notation

The Kontrast distribution bundles the mhchem extension for KaTeX that allows you to typeset chemical formulas using the \ce{ … } command as shown here:

\ce{H2CO3 <=> 2 H+ + CO3^2-}

Please refer to the mhchem website for details and licensing information.