All blog features

2026-01-17

Example longform front matter yaml

1
---
2
longform: true
3
title: All blog features
4
dateCreated: 2026-01-17T22:44+01:00
5
datePublished: 2026-01-17T22:44+01:00
6
dateLastChanged: 2026-01-17T22:44+01:00
7
tags: [] # Only tags defined in src/components/blog/tags.ts are allowed
8
excerpt: All blog features explained with examples...
9
references:
10
  - id: einsteinUberErzeugungUnd1905
11
    year: 1905
12
    authors:
13
      - Albert Einstein
14
    title: Über einen die Erzeugung und Verwandlung des Lichtes betreffenden heuristischen Gesichtspunkt
15
    source: Annalen der Physik, 322, 6, p. 132-148
16
    url: https://dx.doi.org/10.1002/andp.19053220607
17
toc: true
18
---

The optional hidden: true hides a post from all lists. Currently only used for this post.

Example shortform

1
---
2
longform: false
3
dateCreated: 2026-01-15T22:44+01:00
4
datePublished: 2026-01-18T22:44+01:00
5
dateLastChanged: 2026-01-18T22:44+01:00
6
tags: ['programming', 'links', 'ai']
7
---

This is an H2 heading

Create an H2 heading via

1
## This is an H2 heading

Note that H1 headings are not available, as they are already used for the page title.

This is an H3 heading

Create an H3 heading via

1
### This is an H3 heading

Basic formatting

Font style

1
**bold**, *italic*, ~~strikethrough~~

renders as

bold, italic, ~~strikethrough~~

This

is an
unordered list with first-level nesting
1. This is
2. a numbered list with fist-level nesting
  - This
  - is an unordered list with second-level nesting
    1. This is
    2. a numbered list with second-level nesting

Simple external links

Have a look at LessWrong.

Block citation

“Whenever you find yourself on the side of the majority, it is time to reform (or pause and reflect).”

— Mark Twain

Code:

1
> “Whenever you find yourself on the side of the majority, it is time to reform (or pause and reflect).”
2
>
3
> -- Mark Twain

Citations with reference section

Add the reference to the front matter yaml:

1
references:
2
  - id: einsteinUberErzeugungUnd1905
3
    authors:
4
      - Albert Einstein
5
    title: Über einen die Erzeugung und Verwandlung des Lichtes betreffenden heuristischen Gesichtspunkt
6
    year: 1905
7
    url: https://dx.doi.org/10.1002/andp.19053220607

Then cite in the text via :cite[einsteinUberErzeugungUnd1905]. Einstein properly explained the photoelectric effet [1].

Math

You can write inline math via $x = \logy(y)$ , which renders as $x = \log(y)$ .

You can write math blocks, e.g.,

1
$$
2
\begin{align}
3
M &=
4
    \begin{pmatrix}
5
    a & b \\
6
    c & d
7
    \end{pmatrix} \\
8
E &= mc^2 \\
9
F &= ma \, .
10
\end{align}
11
$$

which renders as

\begin{align} M &= \begin{pmatrix} a & b \\ c & d \end{pmatrix} \\ E &= mc^2 \\ F &= ma \, . \end{align}

Code

1
You can write inline code `x = log(y)`.

which renders as

You can write inline code x = log(y).

You can write a code block via

1
```python
2
fig, ax = plt.subplots(nrows=1, ncols=2, layout='constrained', figsize=(4, 3))
3

4
ax.plot(xdata, ydata)
5

6
ax2 = ax.twinx()
7
ax2.plot(xdata, ydata)
8

9
# Get plotted objects and their labels
10
lines, labels = ax.get_legend_handles_labels()
11
lines2, labels2 = ax2.get_legend_handles_labels()
12

13
# Add one legend with all labels
14
ax.legend(lines + lines2, labels + labels2)
15
```

which renders as

1
fig, ax = plt.subplots(nrows=1, ncols=2, layout='constrained', figsize=(4, 3))
2

3
ax.plot(xdata, ydata)
4

5
ax2 = ax.twinx()
6
ax2.plot(xdata, ydata)
7

8
# Get plotted objects and their labels
9
lines, labels = ax.get_legend_handles_labels()
10
lines2, labels2 = ax2.get_legend_handles_labels()
11

12
# Add one legend with all labels
13
ax.legend(lines + lines2, labels + labels2)

You can even provide a filename, and highlight code lines

1
```python title="example.py" {9-10, 13}
2
fig, ax = plt.subplots(nrows=1, ncols=2, layout='constrained', figsize=(4, 3))
3

4
ax.plot(xdata, ydata)
5

6
ax2 = ax.twinx()
7
ax2.plot(xdata, ydata)
8

9
# Get plotted objects and their labels
10
lines, labels = ax.get_legend_handles_labels()
11
lines2, labels2 = ax2.get_legend_handles_labels()
12

13
# Add one legend with all labels
14
ax.legend(lines + lines2, labels + labels2)
15
```

which renders as

1
fig, ax = plt.subplots(nrows=1, ncols=2, layout='constrained', figsize=(4, 3))
2

3
ax.plot(xdata, ydata)
4

5
ax2 = ax.twinx()
6
ax2.plot(xdata, ydata)
7

8
# Get plotted objects and their labels
9
lines, labels = ax.get_legend_handles_labels()
10
lines2, labels2 = ax2.get_legend_handles_labels()
11

12
# Add one legend with all labels
13
ax.legend(lines + lines2, labels + labels2)

Figures

Figures use 90% of the text width and have a caption with 80% of the text width.

Add a figure via

1
:::figure{#fig-example}
2
![Example figure](./figs/test.jpg)
3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodtempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
4
At vero eos et accusam et justo duo dolores et ea rebum.
5
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
6
:::

which reneders as

Example figure — Figure 1: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmodtempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

We can create a reference to Figure 1 via :ref[fig-example].

References

[1] Albert Einstein. Über einen die Erzeugung und Verwandlung des Lichtes betreffenden heuristischen Gesichtspunkt. Annalen der Physik, 322, 6, p. 132-148 (1905)

❦