Markdown examples

$\KaTeX$

$\KaTeX$ is a fast and easy-to-use library that enables the rendering of mathematical notation, using LaTeX syntax.

You can use $\KaTeX$ inline by wrapping the expression between $ or between \\( and \\).

For example, $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $ would render: $ \sin(x) = \sum_{n=0}^{\infty} \frac{(-1)^n}{(2n + 1)!} x^{2n + 1} $

To display the expression on its own line and centered, wrap it around $$ or between \\[ and \\].

For example, \\[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \\] renders: \[ r = \frac{\sum_{i=1}^{n}(x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum_{i=1}^{n}(x_i - \bar{x})^2}\sqrt{\sum_{i=1}^{n}(y_i - \bar{y})^2}} \]

Enable $\KaTeX$ by setting katex = true in [extra]:

title = "Testing KaTeX"
date = 2002-11-30

[extra]
katex = true

Works in: page front matter, section _index.md, or globally in config.toml.

For enhanced performance and security, the $\KaTeX$ JavaScript, CSS, and fonts are hosted locally.

Note: After enabling $\KaTeX$, if you want to use $ without rendering a mathematical expression, escape it with a single backslash: \$.

Chemistry formulas

Chemistry formulas are supported via the mhchem extension, which loads automatically when using \ce{} or \pu{}.

\ce{} for chemistry: $\ce{H2O}$, $\ce{CO2 + H2O -> H2CO3}$

\pu{} for units: $\pu{25 °C}$, $\pu{1.2 mol/L}$

Table

Here’s an example of a table¹. Its colours change depending on the current theme.

Code Block

fn main() {
    println!("Hello, world!") -> ();
}

With line numbers

1use std::collections::HashMap;
2
3#[derive(Debug)]
4struct TwinPeaksCharacter {
5    name: String,
6    coffee_rating: f32,
7    pie_preference: String,
8}
9
10fn main() {
11    let mut black_lodge = HashMap::new();
12
13    black_lodge.insert("agent", TwinPeaksCharacter {
14        name: String::from("Dale Cooper"),
15        coffee_rating: 9999.99,
16        pie_preference: String::from("Damn Fine Cherry"),
17    });
18
19    black_lodge.insert("giant", TwinPeaksCharacter {
20        name: String::from("The Fireman"),
21        coffee_rating: 42.424242,
22        pie_preference: String::from("Garmonbozia"),
23    });
24
25    // Calculate total appreciation of damn fine coffee
26    let total_coffee: f32 = black_lodge.values()
27        .map(|character| character.coffee_rating)
28        .sum();
29
30    println!("☕ Total coffee appreciation: {:.2} cups", total_coffee);
31}

Code tags

In Rust, you declare a mutable variable with let mut x = 5;, whereas in Python, you simply use x = 5. Similarly, to print a value in Rust, you would use println!("Value: {}", x);, but in Python, it’s as straightforward as print(f"Value: {x}").

Quote

“We’re all hurtling towards death. Yet here we are, for the moment, alive. Each of us knowing we’re going to die. Each of us secretly believing we won’t.”

— Charlie Kaufman, Synecdoche, New York

GitHub-style alerts

Setting github_alerts = true in the [markdown] section of your config.toml (requires Zola 0.21+) enables GitHub-style alerts:

> [!NOTE]
> This is a note!
>
> It can span multiple paragraphs.

> [!CAUTION]
> Pay caution before continuing!

The result looks like:

This is a note!

It can span multiple paragraphs.

Pay caution before continuing!

The supported alert types are NOTE, TIP, IMPORTANT, WARNING, and CAUTION.

The labels are translated automatically based on the page’s language. To change them (or to add a missing language), override the --alert-{type}-label CSS variables in custom CSS:

html:lang(eo) {
    --alert-note-label: "Noto";
    --alert-caution-label: "Atentu";
}

For full control over the title, icon, and colours, see the admonitions shortcode.