KaTeX

TeX math rendering in HTML

Options

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