Markdown Syntax

Published: 2020-01-05

For a quick cheatsheet, check out https://simplemde.com/markdown-guide.

This article offers a sample of basic Markdown syntax that can be used in Blades content files, also it shows whether basic HTML elements are decorated with CSS in a Blades theme.

An h1 header

Paragraphs are separated by a blank line.

2nd paragraph. Italic, bold, Strikethrough, and monospace. Itemized lists look like:

• this one
• that one
• the other one

Note that — not considering the asterisk — the actual text content starts at 4-columns in.

Block quotes are written like so.

They can span multiple paragraphs, if you like. Note that you can use Markdown syntax within a blockquote.

Quote break.

Blockquote with attribution Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Quote break.

Blockquotes can also be nested…

…by using additional greater-than signs right next to each other…

…or with spaces between arrows.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all in chapters 12–14”). Three dots … will be converted to an ellipsis. Unicode is supported. ☺

An h2 header

Here’s a numbered list:

1. first item
2. second item
3. third item

Note again how the actual text starts at 4 columns in (4 characters from the left side). Here’s a code sample:

# Let me re-iterate ...
for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of indenting the block, you can use delimited blocks, if you like:

#!/bin/bash
for f in $(find . -maxdepth 2 -name '*.tif' -o -name '*.ppm'); do
    nf=${f%.*}.jpg
    wf=${f%.*}.webp

    convert $f -resize 2048x pnm:- | cjpeg -quality 80 -optimize > ${f%/*}/half/${nf##*/}
    echo ${f%/*}/half/${nf##*/} created

    convert $f -resize 1280x pnm:- | cjpeg -quality 80 -optimize > ${f%/*}/retina/${nf##*/}
    echo ${f%/*}/retina/${nf##*/} created

    convert $f -resize 768x pnm:- | cjpeg -quality 80 -optimize > ${f%/*}/thumb/${nf##*/}
    echo ${f%/*}/thumb/${nf##*/} created

    cwebp -resize 2048 0 -q 80 -m 6 -mt -hint photo -quiet $f -o ${f%/*}/half/${wf##*/}
    echo ${f%/*}/half/${wf##*/} created

    cwebp -resize 1280 0 -q 75 -m 6 -mt -hint photo -quiet $f -o ${f%/*}/retina/${wf##*/}
    echo ${f%/*}/retina/${wf##*/} created

    cwebp -resize 768 0 -q 85 -m 6 -mt -hint photo -quiet $f -o ${f%/*}/thumb/${wf##*/}
    echo ${f%/*}/thumb/${wf##*/} created

    ./rm $f
done

(which makes copying & pasting easier). You can optionally mark the delimited block for Pandoc to syntax highlight it:

20impl Display for HeadingLevel {
21    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
22        match self {
23            Self::H1 => write!(f, "h1"),
24            Self::H2 => write!(f, "h2"),
25            Self::H3 => write!(f, "h3"),
26            Self::H4 => write!(f, "h4"),
27            Self::H5 => write!(f, "h5"),
28            Self::H6 => write!(f, "h6"),
29        }
30    }
31}

An h3 header

Now a nested list:

1. First, get these ingredients:

   • carrots
   • celery
   • lentils

2. Boil some water.

3. Dump everything in the pot and follow this algorithm:

   find wooden spoon
   uncover pot
   stir
   cover pot
   balance wooden spoon precariously on pot handle
   wait 10 minutes
   goto first step (or shut off burner when done)

   Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including that last line which continues item 3 above).

Here’s a link to a website, to a local doc, and to a section heading in the current doc. Here’s a footnote ².

Another footnote ³.

Tables can look like this:

Colons can be used to align columns.

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

A horizontal rule follows.

and images can be specified like so:

Inline math equations go in like so: $𝜔=\frac{d𝜑}{d𝑡}$. Display math should get its own line and be put in in double-dollarsigns:

Web Math Demo.

And note that you can backslash-escape any punctuation characters which you wish to be displayed literally, ex.: `foo`, *bar*, etc.

D2 Diagrams

Task lists

• Finish my changes
• Push my commits to GitHub
• Open a pull request
• @mentions, #refs, links, formatting, and tags supported
• list syntax required (any unordered or ordered list supported)
• this is a complete item
• this is an incomplete item

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.