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.js, which does the conversion from LaTeX to MathML
  3. Script: auto-render.min.js, which 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.
  4. Font: latinmodernmath.woff2 for best looking math.
  5. A short inline script that starts everything off, telling Temml to process everything on the page.

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" versions of each of the 2 javascript files. The full versions behave quite differently to the "min" versions.

Put the stylesheet, the 2 script files and the font in the same directory on your server.

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 2 scripts 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).

The basic version 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 follows: -->
  <!-- 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