Tex2svg-webworker NPM

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')|