or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility.mddocument-rendering.mdextensions.mdindex.mdinitialization.mdinput-processing.mdoutput-formats.md
tile.json

tessl/npm-mathjax

JavaScript display engine for LaTeX, MathML, and AsciiMath mathematical notation in browsers and Node.js

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mathjax@4.0.x

To install, run

npx @tessl/cli install tessl/npm-mathjax@4.0.0

index.mddocs/

MathJax

MathJax is a comprehensive JavaScript display engine for mathematical notation that renders LaTeX, MathML, and AsciiMath expressions in web browsers and Node.js applications. It provides high-quality mathematical typesetting with support for multiple input formats and output formats, accessibility features for screen readers, and a powerful API for integration.

Package Information

  • Package Name: mathjax
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install mathjax

Core Imports

For Node.js applications:

const MathJax = require('mathjax');

For ES modules:

import MathJax from 'mathjax';

For browser applications, include a component script:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>

Basic Usage

Node.js Usage

const MathJax = require('mathjax');

// Initialize MathJax with configuration
MathJax.init({
  loader: {
    load: ['input/tex', 'output/svg']
  }
}).then((MathJax) => {
  // Convert TeX to SVG
  const svg = MathJax.tex2svg('x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}', {
    display: true
  });
  console.log(MathJax.startup.adaptor.outerHTML(svg));
}).catch((err) => console.log(err.message));

Browser Usage

<!DOCTYPE html>
<html>
<head>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-chtml.js"></script>
</head>
<body>
  <div>
    When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
    \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
  </div>
</body>
</html>

Architecture

MathJax is built around several key components:

  • Input Processors: Parse mathematical notation in various formats (TeX/LaTeX, MathML, AsciiMath)
  • Output Processors: Render mathematics using different technologies (HTML/CSS, SVG)
  • Document Processing: Find, process, and render math in documents
  • Component System: Modular loading of features and extensions
  • Accessibility System: Screen reader support, speech generation, interactive exploration
  • Configuration System: Extensive customization of behavior and appearance

Capabilities

Initialization and Configuration

Core MathJax initialization, component loading, and configuration management for both browser and Node.js environments.

function init(config?: Configuration): Promise<MathJax>;

Initialization and Configuration

Input Processing

Support for multiple mathematical notation formats with extensive customization options and extension support.

// Convert TeX/LaTeX to various output formats
function tex2svg(tex: string, options?: ConversionOptions): Element;
function tex2chtml(tex: string, options?: ConversionOptions): Element;
function tex2mml(tex: string, options?: ConversionOptions): Element;

// Convert MathML to output formats  
function mml2svg(mathml: string, options?: ConversionOptions): Element;
function mml2chtml(mathml: string, options?: ConversionOptions): Element;

// Convert AsciiMath to output formats
function asciimath2svg(ascii: string, options?: ConversionOptions): Element;
function asciimath2chtml(ascii: string, options?: ConversionOptions): Element;

Input Processing

Document Rendering

Automatic discovery and rendering of mathematics in HTML documents with support for dynamic content updates.

function typeset(elements?: Element[]): void;
function typesetPromise(elements?: Element[]): Promise<void>;
function typesetClear(elements?: Element[]): void;

Document Rendering

Output Formats

High-quality mathematical rendering using HTML/CSS (CommonHTML) or Scalable Vector Graphics (SVG) with font support and styling options.

function chtmlStylesheet(): Element;
function svgStylesheet(): Element;
function getMetricsFor(wrapper: Element, display: boolean): Metrics;

Output Formats

Accessibility Features

Comprehensive accessibility support including speech generation, semantic enrichment, interactive exploration, and assistive technology integration.

interface AccessibilityOptions {
  backgroundColor?: string;
  backgroundOpacity?: number;
  foregroundColor?: string;
  foregroundOpacity?: number;
  highlight?: string;
  subtitles?: boolean;
  speech?: boolean;
}

Accessibility Features

Extension System

Modular component system for loading input/output processors, extensions, and additional functionality on demand.

interface LoaderOptions {
  load?: string[];
  dependencies?: Record<string, string[]>;
  paths?: Record<string, string>;
  source?: Record<string, string>;
}

Extension System

Types

interface Configuration {
  loader?: LoaderOptions;
  startup?: StartupOptions;
  tex?: TexOptions;
  mml?: MMLOptions;
  asciimath?: AsciiMathOptions;
  chtml?: CommonHTMLOptions;
  svg?: SVGOptions;
  options?: GlobalOptions;
}

interface ConversionOptions {
  display?: boolean;
  em?: number;
  ex?: number;
  containerWidth?: number;
  scale?: number;
  family?: string;
}

interface MathJax {
  version: string;
  config: Configuration;
  loader: Loader;
  startup: Startup;
  _: InternalModules;
  
  // Initialization
  init(config?: Configuration): Promise<MathJax>;
  
  // Document processing
  typeset(elements?: Element[]): void;
  typesetPromise(elements?: Element[]): Promise<void>;
  typesetClear(elements?: Element[]): void;
  
  // Conversion methods (created dynamically based on loaded components)
  tex2svg?(tex: string, options?: ConversionOptions): Element;
  tex2chtml?(tex: string, options?: ConversionOptions): Element;
  tex2mml?(tex: string, options?: ConversionOptions): Element;
  mml2svg?(mathml: string, options?: ConversionOptions): Element;
  mml2chtml?(mathml: string, options?: ConversionOptions): Element;
  asciimath2svg?(ascii: string, options?: ConversionOptions): Element;
  asciimath2chtml?(ascii: string, options?: ConversionOptions): Element;
  
  // Promise-based conversion methods
  tex2svgPromise?(tex: string, options?: ConversionOptions): Promise<Element>;
  tex2chtmlPromise?(tex: string, options?: ConversionOptions): Promise<Element>;
  tex2mmlPromise?(tex: string, options?: ConversionOptions): Promise<Element>;
  mml2svgPromise?(mathml: string, options?: ConversionOptions): Promise<Element>;
  mml2chtmlPromise?(mathml: string, options?: ConversionOptions): Promise<Element>;
  asciimath2svgPromise?(ascii: string, options?: ConversionOptions): Promise<Element>;
  asciimath2chtmlPromise?(ascii: string, options?: ConversionOptions): Promise<Element>;
  
  // Reset methods
  texReset?(...args: any[]): void;
  mmlReset?(...args: any[]): void;
  asciimathReset?(...args: any[]): void;
  
  // Stylesheet methods
  chtmlStylesheet?(): Element;
  svgStylesheet?(): Element;
  
  // Metrics
  getMetricsFor?(wrapper: Element, display: boolean): Metrics;
  
  // Utility methods
  done(): Promise<void>;
  whenReady(callback: () => void): Promise<void>;
}

interface Loader {
  load(...components: string[]): Promise<any[]>;
  ready(...components: string[]): Promise<any[]>;
  preLoaded(...components: string[]): void;
  checkVersion(component: string, version: string, name: string): boolean;
  getRoot(): string;
}

interface Startup {
  document: HTMLDocument;
  input: InputJax[];
  output: OutputJax;
  adaptor: DOMAdaptor;
  handler: Handler;
  registerConstructor(name: string, constructor: any): void;
  useHandler(name: string, force?: boolean): void;
  useAdaptor(name: string, force?: boolean): void;
  useInput(name: string, force?: boolean): void;
  useOutput(name: string, force?: boolean): void;
}

interface Metrics {
  em: number;
  ex: number;
  containerWidth: number;
  scale: number;
}