KaTeX Formulas

Platen supports using KaTeX markup to add mathematical and scientific formulas to your pages. You can add the formulas inline (inside paragraphs or lists) with image links or as blocks on their own with codeblocks.

Example #

Markdown Input
This is the Special Relativity Equation:

```katex
x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}
```

In the equation, ![katex:E]() is energy, ![katex:m]() is mass, and ![katex:c]()
is the speed of light.

In plain words, energy equals mass times the speed of light squared.
HTML Output
<p>This is the Special Relativity Equation:</p>
<div >
  \[
    x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}
  \]
</div><p>In the equation, <span >\(E\)</span> is energy, <span >\(m\)</span> is mass, and <span >\(c\)</span>
is the speed of light.</p>
<p>In plain words, energy equals mass times the speed of light squared.</p>
Rendered Output

This is the Special Relativity Equation:

\[ x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}} \]

In the equation, \(E\) is energy, \(m\) is mass, and \(c\) is the speed of light.

In plain words, energy equals mass times the speed of light squared.

Regardless of whether you’re using the inline or block syntax, you can use any valid KaTeX functions and Platen will render them. If you use the \ce{...} expression for chemistry equations, use the chem language ID for a codeblock, or use the chem: prefix for an image link, Platen loads the mhchem library for you to render chemistry formulas too.

Inline Formulas #

To use KaTeX markup inline, add an image link with the katex:, math:, or chem: prefix for the alt text. The rest of the alt text is treated as KaTeX and rendered.

That turns ![katex:x=y^{2}]() into \(x=y^{2}\).

For more information, see Inline KaTeX.

Block Formulas #

To use KaTeX markup for larger formulas or as standalone figures, add a codeblock with the katex, math, or chem language ID.

That turns this:

```katex
---
caption: The Quadratic Formula
---
x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}
```

Into this:

\[ x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}} \]
The Quadratic Formula

For more information, see Block KaTeX.

Manual Markup #

Platen also supports rendering of KaTeX without using the inline image link or codeblock syntax. While this usage can be concise and convenient, it isn’t always obvious what’s happening when someone is reading the source.

Platen doesn’t use this rendering inside of inline code.

Be mindful when using a display mode syntax outside of a codeblock that the display mode rendering breaks normal paragraph flow.

By default, any text wrapped in the following tag pairs is rendered:

  • Inline Mode Syntaxes:

    • \\(...\\)

      This is \\(x^{2}\\), which is also written as \\(x \times x\\).

      This is \(x^{2}\), which is also written as \(x \times x\).

  • Display Mode Syntaxes:

    • \\[...\\]

      \\[x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}\\]

      \[x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}\]

    • $$...$$

      $$x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}$$

      $$x={\frac {-b\pm {\sqrt {b^{2}-4ac}}}{2a}}$$

Configuration #

You can also use configuration to define how KaTeX behaves on your Platen site. If you want to use KaTeX rendering inside of a codeblock, no special configuration is required as long as you haven’t set platen.markup.katex.enabled to false in your site configuration.

If you want to ensure you can use math or chemistry markup on a page without using a codeblock or shortcode, you’ll need to add platen.markup.katex to your page’s front matter and set always_load to true or set always_load in your site configuration to true.

YAML 
platen:
  markup:
    katex:
      always_load: true
TOML 
[platen]
  [platen.markup]
    [platen.markup.katex]
      always_load = true
JSON 
{
   "platen": {
      "markup": {
         "katex": {
            "always_load": true
         }
      }
   }
}

With always_load set to true, the KaTeX modules added to the page and automatically renders any valid tags outside of codeblocks and inline code declarations.

For more information about the available options for configuring KaTeX site wide, see the configuration documentation.

Edit this page