KaTeX Math

JamsEDU uses KaTeX to render LaTeX math formulas on your pages. Formulas can be placed inline within a sentence or as their own centered block. You write your LaTeX either in a data-formula attribute or as text content inside the element and JamsEDU handles the rendering automatically. Math adapts to your site's light and dark mode through the built-in token system. See Styling below for details.

You can customize how KaTeX loads by editing jamsEduConfig.katex in assets/js/main.js. Set only the properties you need and anything you omit will use the default values. To disable math entirely, set the whole key to false. For more on how jamsEduConfig works across all built-ins, see Optional Settings.

useMutationObserver: When true (default), new .math nodes added after load are processed via the shared DOM watcher. When false, only elements present at load are rendered unless you wire your own callbacks.
version: The KaTeX version to load from jsDelivr. Currently defaults to 0.16.45.

Inline Math

Use a span with the classes math and inline to place a formula inside a paragraph. The formula will flow naturally with your text at a matching size. For example, the identity sits right alongside this sentence, as does a quadratic discriminant like .


        <span class="math inline" data-formula="\sin^2\theta + \cos^2\theta = 1"></span>

A few more examples to show how different formulas look inline. Euler's identity: . Newton's second law: . A small matrix: . Note that column breaks in a matrix use & when written inside an HTML attribute.

Block Math

Use a div with the class math to display a formula as a centered block. You can provide the LaTeX in a data-formula attribute or as text content inside the element. Both approaches produce the same result.

Using data-formula:


        <div class="math" data-formula="c = \pm\sqrt{a^2 + b^2}"></div>

Using text content inside the element:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}


        <div class="math">x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}</div>

More block examples:

\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

(a + b)^n = \sum_{k=0}^{n} \binom{n}{k} a^{n-k} b^k

Custom Macros

You can define reusable macros by adding the macro class to a div.math element. The macro definition is not rendered on the page but becomes available to any formulas that follow it. This is useful when a formula or symbol appears repeatedly and you want to define it once.

\f = #1f(#2)

\f\relax{x} = \int_{-\infty}^\infty \f\hat\xi\,e^{2 \pi i \xi x} \,d\xi


        <div class="math macro">
            \f = #1f(#2)
        </div>
        <div class="math">
            \f\relax{x} = \int_{-\infty}^\infty \f\hat\xi\,e^{2 \pi i \xi x} \,d\xi
        </div>

Styling

In a standard JamsEDU app, block math is centered and inline math gets a subtle chip surface styled through your site's design tokens in css/vendor/jamsedu/jamsedu.css. KaTeX inherits its text color from the page so formulas automatically follow light and dark mode as long as you keep the default token stack. For details on where these tokens live and how to override them, see CSS and Theming.