---

Dynamic math in markdown

Coding dynamic mathematical content takes an extra step of calling the math and display functions from the Mathlifier library.

Demo

This value $x=72$ and the following are generated dynamically:

$$x^2=5184$$

Reload the page to see new values.

Source code (in markdown/mdsvex)

<script>
  import {math, display} from 'mathlifier';
  const x = Math.ceil(Math.random()*100)
  const inlineMath = math(`x=${x}`);
  const displayedMath = display(`x^2 = ${x*x}`);
</script>

This value {@html inlineMath} and the following are generated dynamically:

{@html displayedMath2}

Reload the page to see new values.

Reactive math in svelte

Truly reactive content are probably better served in a svelte file instead.

The mathlifier library

Mathlifier is my custom library that uses temml to generate MathML.

If you prefer to use the $\KaTeX$ or temml libraries instead, install katex and modify the source code above with

import katex from 'katex';
const inlineMath = katex.renderToString(`x=${x}`);
const displayedMath = katex.renderToString(`x^2 = ${x * x}`, { displayMode: true });

import temml from 'temml';
const inlineMath = temml.renderToString(`x=${x}`);
const displayedMath = temml.renderToString(`x^2 = ${x * x}`, { displayMode: true });