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=40{x=40} and the following are generated dynamically:

x2=1600x^2 = 1600

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.

KaTeX and mathlifier

Mathlifier is my custom wrapper around the KaTeX library. If you prefer to use the KaTeXKaTeX library 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});