CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-katex

Fast math typesetting for the web.

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

core-rendering.mddocs/

Core Rendering

Primary rendering functions that convert TeX expressions to DOM elements or HTML strings with comprehensive error handling and configuration options.

Capabilities

Render to DOM

Renders TeX expression directly into a DOM element, replacing its content.

/**
 * Renders TeX expression into a DOM element
 * @param tex - TeX expression to render
 * @param element - DOM element to render into (content will be replaced)
 * @param options - Rendering options
 */
function render(tex: string, element: HTMLElement, options?: KatexOptions): void;

Usage Examples:

import katex from "katex";

// Basic rendering
const element = document.getElementById("math-container");
katex.render("x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}", element);

// With options
katex.render("\\int_0^\\infty e^{-x^2} dx", element, {
  displayMode: true,
  fleqn: true
});

// Error handling
katex.render("\\invalid", element, {
  throwOnError: false,
  errorColor: "#ff6b6b"
});

Render to String

Converts TeX expression to HTML string for server-side rendering or programmatic use.

/**
 * Renders TeX expression to HTML string
 * @param tex - TeX expression to render
 * @param options - Rendering options
 * @returns HTML string containing rendered math
 */
function renderToString(tex: string, options?: KatexOptions): string;

Usage Examples:

import katex from "katex";

// Basic string rendering
const html = katex.renderToString("E = mc^2");

// Display mode
const displayHtml = katex.renderToString("\\sum_{i=1}^n i^2", {
  displayMode: true
});

// MathML output
const mathml = katex.renderToString("\\frac{1}{2}", {
  output: "mathml"
});

// Server-side rendering with error handling
const safeHtml = katex.renderToString("\\maybe\\invalid", {
  throwOnError: false,
  errorColor: "#cc0000"
});

Parse Error Handling

KaTeX throws ParseError exceptions for invalid TeX input when throwOnError is true.

/**
 * Error thrown when TeX parsing fails
 */
class ParseError extends Error {
  /** Always "ParseError" */
  name: "ParseError";
  /** Character position where error occurred */
  position: number;
  /** Length of problematic input */
  length: number;
  /** Original error message without context */
  rawMessage: string;
  /** Full error message with TeX source context */
  message: string;
  
  constructor(message: string, token?: object);
}

Usage Examples:

import katex, { ParseError } from "katex";

try {
  katex.render("\\invalid{command}", element);
} catch (error) {
  if (error instanceof ParseError) {
    console.log(`Parse error at position ${error.position}: ${error.rawMessage}`);
    // Show fallback content
    element.textContent = "Math rendering failed";
  }
}

// Alternative: disable throwing
const result = katex.renderToString("\\invalid{command}", {
  throwOnError: false,
  errorColor: "#ff0000"
});
// Returns HTML with error styling instead of throwing

Version Information

/**
 * Current KaTeX version string
 */
const version: string;

Usage Example:

import katex from "katex";

console.log(`Using KaTeX version: ${katex.version}`);

docs

accessibility.md

advanced-apis.md

auto-rendering.md

chemistry.md

cli.md

configuration.md

copy-tex.md

core-rendering.md

index.md

mathtex-script-type.md

tile.json