tex2svg-webworker

This library enables a browser application to render LaTeX math expressions into SVG with outlined symbols (so no external fonts are required). All rendering is done in the background using a Web Worker, so it will not block the main JavaScript thread.

This library is a simple wrapper around MathJax, similar to their tex2svg Node demo, but built to be used as a Web Worker .js file.

Usage

Worker Creation, Option 1: CDN

• In your JavaScript code, create a Web Worker and prepare to receive messages:

  worker = new Worker(window.URL.createObjectURL(new Blob([
    "importScripts('https://cdn.jsdelivr.net/npm/tex2svg-webworker/dist/tex2svg.js');"
    // or specify a specific version via .../npm/tex2svg-webworker@0.3.1/dist/...
  ], type: 'text/javascript'));
   worker.onmessage = function(e) {
     // e.data.svg is a string of the form "<svg...>...</svg>"
     // All inputs are also available; for example, e.data.formula
   };

Worker Creation, Option 2: NPM

• npm install tex2svg-webworker

• Copy node_modules/tex2svg-webworker/dist/tex2svg.js to your web directory.

• In your JavaScript code, create a Web Worker and prepare to receive messages:

  worker = new Worker('webpath/tex2svg.js');
  worker.onmessage = function(e) {
    // e.data.svg is a string of the form "<svg...>...</svg>"
    // All inputs are also available; for example, e.data.formula
  };

Rendering LaTeX via Worker

• Send rendering requests to the Web Worker as follows:

  worker.postMessage({
    formula: "e^{\\pi i} + 1 = 0",
    display: true,
  });

Note that the formula input does not include delimiters (e.g. $). Additional options em, ex, and containerWidth are available; see tex2svg.coffee.

Example

See index.html for a simple example of the rendering request/response loop.

Live demo of it in action

Cocreate is a larger application (a shared whiteboard supporting LaTeX text) using this library (and indeed it was the reason I wrote it). The relevant code is in client/RenderObjects.coffee.

Supported LaTeX Commands

In addition to MathJax's standard TeX/LaTeX commands, this library includes several of MathJax's TeX/LaTeX extensions:

• ams: \begin{align}, etc.
• amscmd: \begin{CD}
• boldsymbol: \boldsymbol{bold++}
• braket: \braket{\phi | \psi}, \set{x \in X | x > 0}, \Set{\sum_{i=1}^n x^i | x \leq 1\}
• bussproofs: \begin{prooftree}
• cancel: \cancel{x}/\cancel{x}
• centernot: \centernot\longrightarrow
• color: \textcolor{purple}{hi}
• colortbl: \rowcolor, \columncolor, \cellcolor
• gensymb: \degree, \celsius, \micro, \ohm, \perthousand
• mathtools: \coloneq, \eqcolon, ...
• mhchem: \ce
• newcommand: \def, \newcommand, \newenvironment (note that these span across multiple expressions)
• noerrors: render source in case of error
• noundefined: show undefined commands in red instead of throwing error
• setoptions: \setOptions{tagSide=left}, etc.
• textcomp: \textasciitilde, etc.
• textmacros: \text{$x$ is \emph{good}}
• upgreek: \upalpha, etc.
• verb: \verb|$('div')|

There is no need to \require any of these packages to use them.

On the other hand, the following packages are not currently included:

• action (MathML irrelevant for SVG output)
• autoload (irrelevant for Web Worker)
• bbox (use more standard \colorbox{$...$} instead)
• cases (tags aren't great in SVG output)
• configmacros (irrelevant for Web Worker)
• empheq (seems rarely used)
• enclose (MathML irrelevant for SVG output)
• extpfeil (not standard LaTeX)
• html (incompatible with SVG output)
• require (irrelevant for Web Worker)
• physics (redefines e.g. \div to mean ∇ (\grad) instead of ÷)
• tagformat (irrelevant for Web Worker)
• unicode (doesn't work well with SVG)