TeX math rendering in html

Options See on deno.land

extensions string[]

The list of extensions this plugin applies to

[ ".html" ]
cssSelector string

The css selector to apply katex

options object

Configuration to pass to katex

displayMode boolean undefined

If true, math will be rendered in display mode (math in display style and center math on page)

If false, math will be rendered in inline mode

output html mathml htmlAndMathml undefined

Determines the markup language of the output. The valid choices are:

  • html: Outputs KaTeX in HTML only.
  • mathml: Outputs KaTeX in MathML only.
  • htmlAndMathml: Outputs HTML for visual rendering and includes MathML for accessibility.
leqno boolean undefined

If true, display math has \tags rendered on the left instead of the right, like \usepackage[leqno]{amsmath} in LaTeX.

fleqn boolean undefined

If true, display math renders flush left with a 2em left margin, like \documentclass[fleqn] in LaTeX with the amsmath package.

throwOnError boolean undefined

If true, KaTeX will throw a ParseError when it encounters an unsupported command or invalid LaTex

If false, KaTeX will render unsupported commands as text, and render invalid LaTeX as its source code with hover text giving the error, in color given by errorColor

errorColor string undefined

A Color string given in format #XXX or #XXXXXX

macros any

A collection of custom macros.

See src/macros.js for its usage

minRuleThickness number undefined

Specifies a minimum thickness, in ems, for fraction lines, \sqrt top lines, {array} vertical lines, \hline, \hdashline, \underline, \overline, and the borders of \fbox, \boxed, and \fcolorbox.

colorIsTextColor boolean undefined

If true, \color will work like LaTeX's \textcolor and takes 2 arguments

If false, \color will work like LaTeX's \color and takes 1 argument

In both cases, \textcolor works as in LaTeX

maxSize number undefined

All user-specified sizes will be caped to maxSize ems

If set to Infinity, users can make elements and space arbitrarily large

maxExpand number undefined

Limit the number of macro expansions to specified number

If set to Infinity, marco expander will try to fully expand as in LaTex

strict boolean string object undefined

If false or "ignore", allow features that make writing in LaTex convenient but not supported by LaTex

If true or "error", throw an error for such transgressions

If "warn", warn about behavior via console.warn

trust boolean function undefined

If false (do not trust input), prevent any commands that could enable adverse behavior, rendering them instead in errorColor.

If true (trust input), allow all such commands.

globalGroup boolean undefined

Place KaTeX code in the global group.

delimiters object[] undefined

Auto-render specific options

  { left: "$$", right: "$$", display: true },
  { left: "\\(", right: "\\)", display: false },
    left: "\\begin{equation}",
    right: "\\end{equation}",
    display: true
  { left: "\\begin{align}", right: "\\end{align}", display: true },
  { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
  { left: "\\begin{gather}", right: "\\end{gather}", display: true },
  { left: "\\begin{CD}", right: "\\end{CD}", display: true },
  { left: "\\[", right: "\\]", display: true }
ignoredTags string[] undefined
  "script", "noscript",
  "style",  "textarea",
  "pre",    "code",
ignoredClasses string[] undefined
preProcess function undefined


This plugin uses the KaTeX library to render the math typesetting of your HTML documents. You only need to add the language-math extension to any math content that you want to render. In markdown pages, it can be done in code blocks with the math language:

# This is a markdown document

c = \pm\sqrt{a^2 + b^2}

Or addign the language-math directly to the html element containing the code:

<p class="language-math">
  c = \pm\sqrt{a^2 + b^2}


Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import katex from "lume/plugins/katex.ts";

const site = lume();

site.use(katex(/* Options */));

export default site;

Load styles

To render any HTML generated by katex in the browser, you will need to link the CSS file and use the HTML5 doctype.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.css">


See Browser usage in the KaTeX site documentation for more info.