Temml dynamic math template

Description

So far, we've seen a bare-bones example of Temml which processed any math it found on the page, and a second one, Temml auto-render options template that allowed us to customise things a bit.

On this page, we'll see how to dynamically add math to the page via a string (which may come from user input, or a database, say).

The basic idea is as follows. We need an HTML element into which we'll insert some dynamic math, say:

<div id="myEmptyDiv">

In our script, we need to have some LaTeX expression, say:

<script>
  let myLaTeX = 'E = mc^2';

  let myEmptyDiv = document.querySelector('#myEmptyDiv');
  let displayMode = 'display';
  temml.render( myLaTeX, myEmptyDiv,  {displayMode} );
</script>

The second line identifies the HTML element we're going to fill.

The third line defines whether we want in-line or display math.

The fourth line is the call to Temml. It will process the LaTeX string and populate the empty DIV. The last part tells it to present it in display mode (centered, and larger font than in-line mode).

Demo

In this demo, we first need to add an empty DIV (with id="myMathDiv", orange background) into which we'll add some math equations via Javascript. We'll add a button so the user can add various math expressions to the DIV.

You'll see a mix of inline (which will be left-justified) and display math (centered) examples as you click the button.

The script extracts the math expressions from a string, and then we call Temml using the following, where latexStr is the laTeX string, and displayMode takes value either 'display' or ''):

temml.render( latexStr, myMathDiv, {displayMode} );

Explanation

No need for auto-render.min.js

Because we're adding math expressions after the page has loaded, we don't make use of the auto-render.min.js extension, so we don't load it. We still need the CSS stylesheet and the main Temml script.

See the page source for details.

See also