KaTeX

TeX math rendering in HTML

Options

cssSelector string

The css selector to apply katex

Default: 
".language-math"
cssFile string

The CSS file to output the CSS styles

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 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">