KaTeX

TeX math rendering in HTML

Options

cssSelector string
Default: 
".language-math"
cssFile boolean string
fontsFolder string
placeholder string
options object
Default: 
{
  strict: true,
  displayMode: true,
  throwOnError: true,
  delimiters: [
    { 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: [
    "script", "noscript",
    "style",  "textarea",
    "pre",    "code",
    "option"
  ],
  ignoredClasses: [],
  macros: {}
}

Description

This plugin uses the KaTeX library (with the mhchem extension enabled) 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

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

Or adding the language-math directly to the HTML element containing the code:

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

Installation

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;

Apply styles

The plugin use the global configuration of cssFile and fontsFolder to download the required CSS code and fonts (/style.css and /fonts by default). Make sure to link the CSS file and use the HTML5 doctype.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style.css">

Set cssFile to false to disable this behavior, useful if you want to use different styles and fonts:

site.use(katex({
  cssFile: false, // Don't download CSS and fonts
}));