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*}

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 provide our own array of delimiters. (Most of them are default delimiters, but if we want to provide a new one, we have to replace the lot.)

The first two delimiters are:

delimsArr = [
  {left: "$$", right: "$$", display: true},
  {left: "$", right: "$", display: false},
  ...
];

We must list the double dollar $$ (for display math) case first, then we can add the single dollar $ case (and ensure it says display: false).

Now, when we kick the process off, we need to add that array of delimiters like this:

renderMathInElement(document.body, 
	{delimiters: delimsArr}
);

The alignat* environment is included in the delims array, so the above expression is rendered properly.

See the page source for the full details.

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 ele = document.querySelector('#renderThis');
renderMathInElement(ele, 
	{delimiters: delimsArr}
);

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:

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

See also