CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mathjax

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/mathjax@4.0.x
Publish Source
CLI
Badge
tessl/npm-mathjax badge