Markdown Cheatsheet

This page also used for testing components used in the posts and pages.

Useful links

• List of XML and HTML character entity references on Wikipedia

My blog’s information

• Check if my domain is blocked in mainland

Design

• Font Awesome

Frequently used Emoji

CSS

Keyboard (kbd)

• {{ kbd Control }} → Control
• {{ kbd Shift ⇧ }} → Shift ⇧ - use Unicode characters
• {{ kbd Command }} → Command⌘ (expands to ⌘)
• {{ kbd Option }} → Option⌥ (expands to ⌥)
• {{ kbd enter }} → enter↵ (enter is followed by the ↵ symbol)
• {{ kbd style="font-weight bold" Ctrl }} → Ctrl (inline style attribute; see note below)
• Note: the style="..." value must not contain colons (:) — they collide with remark-directive label syntax. Use simple space-separated declarations like font-weight bold.

Keyboard alignment spacers

When laying out keys in fixed-width columns, use these spacers to align cells:

• {{ box }} → — empty cell of standard keymap width
• {{ mbox }} → — narrow mid-cell gap
• {{ left-space }} → — left side spacer
• {{ mid }} → — center gap

These are most useful inside a :::keymap container (see below).

Keyboard Maps

The :::keymap directive renders its body with each newline becoming its own row. Combine {{ kbd }} with the spacers above to build keyboard-layout diagrams.

Code:

:::keymap
{{ kbd Esc }} {{ kbd F1 }} {{ kbd F2 }} {{ kbd F3 }} {{ kbd F4 }}
{{ kbd ~ }} {{ kbd 1 }} {{ kbd 2 }} {{ kbd 3 }} {{ kbd 4 }}
{{ kbd Tab }} {{ kbd Q }} {{ kbd W }} {{ kbd E }} {{ kbd R }}
:::

Result:

With a centered cluster using spacers:

Code:

:::keymap
{{ kbd Ctrl }} {{ kbd Alt }} {{ left-space }} {{ kbd Space }} {{ mid }} {{ kbd Space }} {{ left-space }} {{ kbd Alt }} {{ kbd F4 }}
:::

Result:

Markdown (with plugins)

• ++Inserted++ Inserted
• Footnote [^1] for the mark¹, [^1]: for the note
• Native markdown escaping: wrap literal {{ }}, {%%}, or ::: in backticks (e.g., `{{ kbd }}`) or in a code fence. There is no {% raw %} plugin — it only appears to work because unknown {% ... %} tags are ignored by the parser.
• {% youtube [youtube id] %} is documented here for historical reference only. No plugin implements it — the tag is rendered as literal text. If you see this in older posts, treat it as a no-op.

Action	Markdown	Sample
sub	H~2~0	H20
sup	x^2^	x^2^
Bold	**bold**	bold
Italic	*italic*	italic
Bold and Italic	***bold and italic***	bold and italic
Marked	==marked==	==marked==
Strikethrough	~~strikethrough~~	strikethrough
Inline code	`inline code`	inline code
Link	[link text](https://neo01.com)	link text
Image	
Image with class	{.cert-thumb}	n/a (table cells not parsed as paragraphs — see demo below)
Attributes with style class, eg:

# header {.style-me}
paragraph {data-toggle=modal}
paragraph *style me*{.red} more text

output

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>
<p>paragraph <em class="red">style me</em> more text</p>

Image with class

Append {.className} (or {: .className}) to the line after an image to apply a class. The shorthand only works inside a paragraph — not inside table cells.

Code:

![cert](http://localhost:8000/assets/neo16-1002.png){.cert-thumb}

Result:

Table Column Alignment

Code:

| --- | :-- | :-: | --: |
| 1 | 1 | 1 | 1 |
| 22 | 22 | 22 | 22 |
| 333 | 333 | 333 | 333 |

Result:

Blockquote

Code:

> Some quote text

Result:

Some quote text

Ordered list

Code:

1. item 1
2. item 2

Result:

1. item 1
2. item 2

Unordered list

Code:

- item 1
- item 2

Result:

• item 1
• item 2

Horizontal rule

Code:

---

Result:

Code Fences (Shiki)

Generic fenced code is highlighted by Shiki with the github-dark theme.

Add the showLineNumbers meta to render line numbers:

Code:

```js showLineNumbers
function greet(name) {
  return `Hello, ${name}!`;
}
```

Result:

function greet(name) {
  return `Hello, ${name}!`;
}

GitHub Card

User

Code:

:::githubCard{user="neoalienson"}
:::

Result:

neoalienson

@neoalienson

📁 --

Repositories

⭐ --

Stars

📈 --

Commits

👥 --

Followers

🔄 --

Pull Requests

❗ --

Issues

A repository

Code:

:::githubCard{user="neoalienson" repo="pachinko"}
:::

Result:

Mermaid JS

Echarts

Simple bar chart:

Line chart:

Admonition Blocks

LaTeX (KaTeX)

Inline math with single dollar signs: $E=m{c}^2$ renders alongside prose.

Block math with double dollar signs:

Common snippets

Code:

Inline: $a^2 + b^2 = c^2$

Block:

$$
f(x) = \sum_{n=0}^{\infty} \frac{f^{(n)}(a)}{n!}(x-a)^n
$$

Result:

Inline: $a^2+b^2=c^2$

Block:

Matrices and cases

Code:

$$
A = \begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

$$
f(n) = \begin{cases}
n/2 & \text{if } n \text{ is even} \\
3n+1 & \text{if } n \text{ is odd}
\end{cases}
$$

Result: