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)