blog » self-hosted » markdown

Writing Pages in Markdown

If you are still here, you might be interested in How to Add Color to the fenced-code-blocks.

This section documents how Markdown works on this website, how code blocks are rendered, how admonitions behave, and a few extra features supported by my setup.
If you’re used to GitHub-style Markdown, most of this will feel familiar — except the parts that absolutely aren’t.

Code Blocks and Syntax Highlighting

The fenced-code-blocks extra lets you write code with syntax highlighting using triple quotes (```) (in the following example, I replaced ``` by ''' so that it renders).

Here is a simple Python example:

'''python
import numpy as np

print(np.sum(range(100)))
'''

... which renders to:

import numpy as np

print(np.sum(range(100)))

If you forget an import or misspell a function, the syntax highlighter won’t judge you. I might — but the highlighter won’t.

Inline code is supported as usual, try mv /some/path /some/other/path to fix a wrongly placed file, or use it to demonstrate your outstanding typing accuracy.

Strikethrough is also available: very useful for crossing out bad ideas.

Admonitions (Important!)

This website uses the admonitions extra from markdown2, which is not the same syntax as GitHub Markdown.
It’s both more flexible and more obscure — a perfect combination for a self-hosted blog. They use the following synxtax:

Admonitions come in seven flavors:

Each one has its own style in the final HTML.
Use them to highlight information, warn future-you about bad decisions, or add visibility to critical details.

Example of a Tip

Syntax Explained

Anatomy of an Admonition

Common Pitfalls

Blockquotes

Quotes use the classic Markdown syntax:

Hello

Written like this:

> Hello

Useful for callouts, citations, and passive-aggressive comments.

LaTeX Support

Mathematical expressions are rendered using the latex extra.

For example:

$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$

renders to:

i=1ni=n(n+1)2

Block math, inline math, and equations involving actual numbers (as opposed to purely symbolic flexing) all work.

Tables

Tables are fully supported and behave as you’d expect:

Normal Header Italic Header
cmd Italic
Cell 3 bold

Good for structured information, comparisons, or listing all the services you forgot to configure properly the first time.

My Chatbot
Hello! I'm here to answer any question about Mathieu. How can I help you?