使用KaTeX

KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

It can be enabled by adding katex: true or math: true in the front matter (assuming you’re using YAML format). It’s also possible to enable it globally.

Configuring delimiters

If you want to configure the delimiters, just copy the assets/js/katex-auto-render-options.js from the theme folder to your site folder (keeping the same path structure) and edit as you wish.

Here’s the default configuration:

renderMathInElement(document.body, {
  delimiters: [
    { left: '$$', right: '$$', display: true },
    { left: '\\[', right: '\\]', display: true },
    { left: '$', right: '$', display: false },
    { left: '\\(', right: '\\)', display: false }
  ]
});

Which means you can render expressions as inline elements by using $...$ or \\(...\\) as delimiters, like this: $ \sqrt{\smash[b]{y}} $.

While block elements can be rendered by using $$...$$ or \\[...\\], like this:

For more details about how to configure the delimiters, see: Auto-render Extension.

Extensions

The extensions mhchem and copy-tex are also included (along the necessary auto-render).

The mhchem extension allows chemistry notation, like $ \ce{H2O} $ or:

While copy-tex allows users to copy the processed KaTeX and paste it in its native format. (Try to copy the formula above and paste anywhere else.)

About how to load the extensions, here’s a quick example:

---
title           : "Using KaTeX"
katex           : true
katexExtensions : [ mhchem, copy-tex ]
---

Fences

Another tweak here is that KaTeX blocks are accessible via keyboard and long expressions can be scrolled:

Pretty much like code blocks:

$$
  \text{Damage} = \text{Skill Level} * \lfloor A * (1 - B) * (1 - C) * (1 - D) * (1 - E) * F * G \lfloor \frac{H * 0.7 * \text{INT} * \text{INT} * \text{VIT}}{(\text{INT} + \text{VIT})} \rfloor \rfloor
$$