Markdown 速查表

此页面也用于测试文章和页面中使用的组件。

实用链接

• 维基百科上的 XML 和 HTML 字符实体参考列表

我的博客信息

• 检查我的域名是否在中国大陆被封锁

设计

• Font Awesome

常用表情符号

更多请参考 Emoji Cheatsheet

CSS

按键 (kbd)

• {{ kbd Control }} → Control
• {{ kbd Shift ⇧ }} → Shift ⇧ - 使用 Unicode 字符
• {{ kbd Command }} → Command⌘ （展开为 ⌘）
• {{ kbd Option }} → Option⌥ （展开为 ⌥）
• {{ kbd enter }} → enter↵ （enter 之后会自动追加 ↵ 符号）
• {{ kbd style="font-weight bold" Ctrl }} → Ctrl （内联样式属性；见下方说明）
• 注意：style="..." 的值不能包含冒号（:），会与 remark-directive 的标签语法冲突。请使用空格分隔的简单声明，例如 font-weight bold。

按键对齐占位符

在固定宽度列中排布按键时，可使用以下占位符对齐单元格：

• {{ box }} → — 标准 keymap 宽度的空单元格
• {{ mbox }} → — 较窄的中间单元间隙
• {{ left-space }} → — 左侧空白
• {{ mid }} → — 中心间隙

这些占位符在 :::keymap 容器中最为实用（见下文）。

键盘映射

:::keymap 指令会将正文按换行符拆分为多行渲染。结合 {{ kbd }} 与上述占位符，可构建键盘布局图。

代码：

:::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 }}
:::

结果：

使用占位符居中布局：

代码：

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

结果：

Markdown（含插件）

• ++Inserted++ Inserted
• 脚注 [^1] 用于标记¹，[^1]: 用于注释
• 原生 markdown 转义： 将字面量 {{ }}、{%%} 或 ::: 用反引号包裹（例如 `{{ kbd }}`）或放入代码块。没有 {% raw %} 插件 —— 它看起来能用，只是因为解析器会忽略未识别的 {% ... %} 标签。
• {% youtube [youtube id] %} 仅作为历史参考保留在此处。没有插件实现它 —— 该标签会作为字面文本渲染。如果在旧文章中看到它，请视为无效标签。

使用样式类的属性，例如：

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

输出

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

带样式的图片

在图片所在行的末尾追加 {.className}（或 {: .className}）即可为图片添加 class。该简写仅在段落中生效，不适用于表格单元格。

代码：

![cert](https://neo01.com/image.jpg){.cert-thumb}

结果：

表格列对齐

代码：

结果：

引用块

代码：

一些引用文字

结果：

一些引用文字

有序列表

代码：

1. 项目 1
2. 项目 2

结果：

1. 项目 1
2. 项目 2

无序列表

代码：

• 项目 1
• 项目 2

结果：

• 项目 1
• 项目 2

水平线

代码： ---

结果：

代码块（Shiki）

通用围栏代码由 Shiki 使用 github-dark 主题进行高亮。

添加 showLineNumbers 元数据可渲染行号：

代码：

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

结果：

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

代码块

结果：

代码块

代码：

代码块

GitHub 卡片

用户

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

结果：

neoalienson

@neoalienson

📁 --

Repositories

⭐ --

Stars

📈 --

Commits

👥 --

Followers

🔄 --

Pull Requests

❗ --

Issues

仓库

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

结果：

Mermaid JS

柱状图

结果：

折线图：

提示框块

LaTeX (KaTeX)

行内公式使用单美元符号：$E=m{c}^2$ 会与正文一同渲染。

块级公式使用双美元符号：

常用片段

代码：

行内：$a^2 + b^2 = c^2$

块级：

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

结果：

行内：$a^2+b^2=c^2$

块级：

矩阵与分段函数

代码：

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

$$
f(n) = \begin{cases}
n/2 & \text{若 } n \text{ 为偶数} \\
3n+1 & \text{若 } n \text{ 为奇数}
\end{cases}
$$

结果：