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 start with some LaTeX tring, 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 myEmptyDiv we're going to fill.

The third line defines whether we want in-line or display math. In this case, displayMode = 'display' (centered, and usually larger font than in-line mode).

The fourth line is the call to Temml. It will process the LaTeX string and populate the empty DIV.

Since we're giving Temml an actual string to process, we're using temml.render, rather than telling it to go look for the math like in the earlier 2 templates, where we used temml.renderMathInElement.

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 (you) can get it to 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} );

Assets

Like the earlier two templates, we need the CSS stylesheet Temml-Latin-Modern.css, and the main Temml script, temml.min-0.11.00.js. (I've added the version number to the file name.)

See the page source for details.

See also