Skip to content

edemaine/tex2svg-webworker

Repository files navigation

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)