Temml auto-render options template

Description

This page follows on from the earlier bare-bones example of Temml.

On that previous page, we couldn't enter math using dollar signs $...$ . Here, we'll see how to do it.

Demo - inline math using dollar signs and environment

Inline math (within $...$ delimiters)

Here's a well-known integral: $\int_0^{2\pi}\sin x = 0$.

Here's an infinite sum: $\sum_{n=1}^\infty \frac{1}{n^3} = 1.2021$ and a square root: $\sqrt{y} = \sin(\sqrt{3})$.

This is an example of \mathscr (script) $\mathscr{ABCDE}$ and now for some expressions involving primes: $f(t)$, $f'(t)$, $f''(t)$

Environments: (within e.g. `\begin{alignat} ... \end{alignat}`)

\begin{alignat*}{2} u&=\arctan x &\qquad v&=x\\ du&=\frac{1}{1+x^2} & dv&=1 \end{alignat*}

This is the "renderThis" DIV. Here's some math: $c = \sqrt{a^2 + b^2}$

We can render this DIV only, if we want. (See the page source.)

Explanation

This page has the same stylesheet and scripts as the "bare bones" template. This time, though, to get the dollar signs working, we need to tell Temml to recognise $ signs as math delimiters. We do that using the "fences" syntax:

temml.renderMathInElement(document.body, { fences: "$+" } );

The $+ value for "fences" means any dollar signs will be recognised as math delimiters, and any AMS environments like \begin{alignat*} ... \end{alignat*} will also be recognised, and won't require wrapping in $$s.

See the page source for the full details.

Own delimiters: Instead of using "fences", we can provide our own array of delimiters. See more information and an explanation table in the "Auto-render details" drop-down on the Temml administration page.

Rendering part of the page

At times we only want to render one portion of the page (perhaps because we're going to dynamically load some content elsewhere on the page later). In such a case, we can tell Temml which bit we want it to render. In this case, I'm getting it to render the top DIV (green background, with ID "renderThis"), but it won't render the following DIV (pink background) for now.

$$e^{i\pi} + 1 = 0$$

We achieve this by specifying the HTML element we want processed, as follows:

const renderThis = document.querySelector('#renderThis');
temml.renderMathInElement(renderThis, { fences: "$+" } );

See the page source for an example of creating new math dynamically, and only rendering that new math.

Temml.woff2 font

Primes (entered as apostrophes) are not positioned well on some platforms, (and you may need to use \mathscr), so we need to add the font Temml.woff2 to our server (in the same directory where the stylesheet, scripts and other font are).

So download it from the Temml Github "assets" page.

Then the example we saw earlier with \mathscr and primes should work properly: