KaTeX

TeX math rendering in HTML

Options

cssSelector string

The css selector to apply katex

Default: 
".language-math"
cssFile boolean string

The CSS file to output the CSS styles. Set to false to disable saving the CSS and font files.

fontsFolder string

The folder to save the fonts

placeholder string

A placeholder to replace with the generated CSS

options object

Documentation for katex options:

See https://katex.org/docs/autorender.html

delimiters object[] undefined
Default: 
[
  { 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
Default: 
[
  "script", "noscript",
  "style",  "textarea",
  "pre",    "code",
  "option"
]
ignoredClasses string[] undefined
preProcess function undefined

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
}));