Temml auto-render template

Description

This page is a bare-bones example of Temml, which is a library that processes LaTeX input and outputs MathML, which all major browsers now support.

Temml is a fork of KaTeX (which outputs both HTML and MathML) by Ron Kok.

Demo

Display math (within $$...$$ delimiters)

$$\int_0^\infty\frac{\ln x}{x^2-1}\mathrm{d}x=\frac{\pi^2}{4}$$

Inline math (within \(...\) delimiters)

This is Pythagoras' Theorem: \(c=\sqrt{a^2+b^2}\), for a right triangle with sides \(a\), \(b\) and \(c\).

By default, Temml does not recognise math expression between dollar signs: $...$. (This is because if your page is about money and you have a lot of $ signs on there, you'll get very strange results. This is also the default behaviour of MathJax and KaTeX.)

To see how to get Temml to recognise dollar signs, see Temml options template.

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

\begin{align} \frac{\pi^2}{6}&=\frac{4}{3}\frac{(\arcsin 1)^2}{2}\\ &=\frac{4}{3}\int_0^1\frac{\arcsin x}{\sqrt{1-x^2}}\,dx\\ &=\cdots\\ &=\sum_{n=1}^{\infty}\frac{1}{n^2} \end{align}

There's no need to surround such environments in $$...$$.

Explanation

This minimal page uses the following resources, which are all in the same directory:

  1. Stylesheet: Temml-Latin-Modern.css
  2. Script: temml.min-0.11.00.js, which does the conversion from LaTeX to MathML and contains the function renderMathInElement() and this is the part that goes looking for the LaTeX. It also does some post-processing steps like linking \refs to labels in equations. (I've added the version number to the file name to keep 'breaking' versions separated.)
  3. Font: latinmodernmath.woff2 for best looking math.
  4. A short inline script that starts everything off, telling Temml to process everything on the page. It's like this: 
    <script>	
  temml.renderMathInElement(document.body);
</script>

See the page source for details.

Set up your own

Download the latest files from the Temml Github "assets" page. (No need to download the whole thing as a zip - just find the relevant files and grab them.)

Tip: Use the "min" version of the javascript file. The full version behaves quite differently to the "min" version.

Put the stylesheet, the script file and the font in the same directory on your server. (It can be a different folder from where your HTML page sits, but those 3 should be in the same one.)

Copy this template to your server (it doesn't have to be in the same directory as the above files) and change the paths in this file to point to the correct directory for the stylesheet and script on your own server.

Differences between Temml setup and MathJax, KaTeX

With MathJax (which is simplest), you just need to call the script like this:

  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
  </script>

MathJax will download whatever else it needs and then will process any math it finds on the page.

The KaTeX setup is similar to Temml's (not surprising, as Temml is a fork of KaTeX), except Temml doesn't have a separate auto-render.min.js script.

The basic KaTeX setup is like this:

  <!-- Stylesheet in the <head> of the document -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css">

  <!-- Processing script -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js"></script>

  <!-- KaTeX has an auto-render extension (which Temml includes in the main file): -->
  <!-- The "onload" call starts the process. -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" 
        onload="renderMathInElement(document.body);"></script>

See also