说明

本文用于展示常用的 Markdown 语法,同时用作 VOID 主题效果演示。所有语法符号均使用英文半角符号。文中的“显示效果”指的是主题排版目标,实际颜色和间距以当前主题设置为准。

1. 标题

语法:# 后面加一个空格,# 的数量对应标题级别。

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

正文通常建议从二级标题开始书写:

  • 一级标题一般由文章标题占用,不建议在正文中重复使用。
  • 二级标题用于划分主要章节。
  • 三级标题用于划分章节中的小节。
  • 四级标题适合较细的内容层级。
  • 五级和六级标题视觉区分较弱,建议只在确实需要时使用。
  • 不建议跳过层级,例如直接从二级标题跳到四级标题。

VOID 会为正文中的二级到六级标题生成目录锚点。

标题效果参考图:

标题层级效果示例
标题层级效果示例

2. 段落和换行

段落之间保留一个空行:

孔乙己一到店,所有喝酒的人便都看着他笑,有的叫道:“孔乙己,你脸上又添上新伤疤了!”他不回答,对柜里说:“温两碗酒,要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道:“你一定又偷了人家的东西了!”孔乙己睁大眼睛说:“你怎么这样凭空污人清白……”“什么清白?我前天亲眼见你偷了何家的书,吊着打。”孔乙己便涨红了脸,额上的青筋条条绽出,争辩道:“窃书不能算偷……窃书!……读书人的事,能算偷么?”接连便是难懂的话,什么“君子固穷”,什么“者乎”之类,引得众人都哄笑起来:店内外充满了快活的空气。

听人家背地里谈论,孔乙己原来也读过书,但终于没有进学,又不会营生;于是愈过愈穷,弄到将要讨饭了。

同一段中的普通换行通常会被当作连续文字处理。如果需要强制换行,可以在行末保留两个空格:

第一行  
第二行

效果演示:

孔乙己一到店,所有喝酒的人便都看着他笑,有的叫道:“孔乙己,你脸上又添上新伤疤了!”他不回答,对柜里说:“温两碗酒,要一碟茴香豆。”便排出九文大钱。他们又故意的高声嚷道:“你一定又偷了人家的东西了!”孔乙己睁大眼睛说:“你怎么这样凭空污人清白……”“什么清白?我前天亲眼见你偷了何家的书,吊着打。”孔乙己便涨红了脸,额上的青筋条条绽出,争辩道:“窃书不能算偷……窃书!……读书人的事,能算偷么?”接连便是难懂的话,什么“君子固穷”,什么“者乎”之类,引得众人都哄笑起来:店内外充满了快活的空气。

听人家背地里谈论,孔乙己原来也读过书,但终于没有进学,又不会营生;于是愈过愈穷,弄到将要讨饭了。

第一行
第二行

3. 分隔线

分隔线必须单独占一行,并与上下内容各保留一个空行。

当前建议使用连续三个或更多的 - 或 *:

上一段

----------

下一段

也可以使用:

上一段

***

下一段

注意:

  • --- 位于普通段落后且没有空行时,可能被解析为标题下划线,因此建议始终保留空行。
  • +++ 不是当前 HyperDown 稳定支持的分隔线写法,不建议使用。
  • 分隔线只表示内容分隔,不建议在一篇文章中频繁使用。

效果演示:

上一段


下一段

4. 强调

**粗体**
*斜体*
***粗体加斜体***
~~删除线~~

效果示例:

粗体

斜体

粗体加斜体

删除线

中文正文中建议少量使用强调样式,避免整段文字加粗或斜体。

5. 引用

普通引用使用 >:

> 这是一段普通引用。

多段引用:

> 这是引用的第一段。
>
> 这是引用的第二段。

嵌套引用:

> 外层引用
>> 内层引用

普通引用建议只用于引用内容、补充说明或上下文,不要用普通引用模拟提示块。

效果演示:

这是一段普通引用,用于展示引用文字与正文的层次区别。

6. 脚注

脚注由正文引用和脚注定义两部分组成。

需要注释的文字[^1]

[^1]: 这里是脚注内容。

同一个脚注可以在正文中多次引用:

第一处说明[^source]

第二处说明[^source]

[^source]: 两处引用会指向同一个脚注。

也可以直接在正文中写说明:

这段文字带有直接脚注[^这是直接写入的说明]

建议:

  • 正式文章优先使用编号或简短标识符。
  • 脚注定义通常放在文章末尾。
  • 脚注内容较长时,后续行保持缩进。
  • 脚注编号由解析器自动生成,不建议手动写 HTML 上标。
  • VOID 会为脚注提供正文中的编号、文末脚注列表和返回正文的链接。
  • 点击脚注编号时,主题可以显示浮动说明;脚本不可用时仍保留普通脚注列表。

效果演示:

脚注会在正文中显示为编号1,说明内容会集中显示在文章末尾。

7. 图片

基本语法:

![图片说明](https://static.himiku.com/2021/02/01/23c43007eb0f0.png#vwid=665&vhei=252)

图片说明会作为图片的 alt 文本使用。启用图题设置后,非空的图片说明还会显示在图片下方。

如果已知图片尺寸,可以在 URL 片段中附加 vwid 和 vhei:

![图片说明](https://static.himiku.com/2021/04/24/83493412_p0.jpg#vwid=1515&vhei=1080)

图片尺寸必须是正整数,宽高都应填写。

VOID 正文图片的排版目标:

  • 图片不超过正文宽度。
  • 尽可能提前预留图片比例,减少加载时的跳动。
  • 保留原图链接。
  • 点击图片可以打开单图聚焦层。
  • JavaScript 不可用时,图片仍然可以通过链接打开原图。
  • 不裁切原图,不强制把不同宽高比的图片裁成相同尺寸。

效果演示:

图片效果示例
图片效果示例

8. 链接

普通链接:

[需要链接的文字](https://www.himiku.com/archives/markdown.html)

自动链接:

<https://www.himiku.com/archives/markdown.html>

直接写出的 HTTP 或 HTTPS 地址也会自动识别:

常用 Markdown 语法:https://www.himiku.com/archives/markdown.html

带标题的链接:

[常用 Markdown 语法](https://www.himiku.com/archives/markdown.html "打开 Markdown 语法页面")

也可以使用引用式链接:

[主题文档][void-doc]

[void-doc]: https://www.himiku.com/archives/markdown.html

建议:

  • 链接文字应说明目标内容,不要大量使用“点击这里”。
  • 长 URL 在窄屏中应允许自动换行。
  • URL 后面的中文句号、逗号等标点不要放进链接地址中。

效果演示:

常用 Markdown 语法

https://www.himiku.com/archives/markdown.html

常用 Markdown 语法:https://www.himiku.com/archives/markdown.html

9. 列表

有序列表使用“数字、句点、空格”:

1. 一个苹果
2. 两个苹果
3. 三个苹果

无序列表可以使用 -、+ 或 *:

- 一个苹果
- 两个苹果
- 三个苹果

也可以使用:

+ 一个苹果
+ 两个苹果
+ 三个苹果

嵌套列表建议使用四个空格缩进,同一层级保持一致:

- 一级项目
    1. 二级项目
    2. 二级项目
        - 三级项目

列表样式建议:

  • 一级无序列表使用方块标记。
  • 更深层级依次使用圆点和空心圆点。
  • 有序列表的嵌套层级可以使用小写字母和小写罗马数字。
  • 手机屏幕上仍要保留足够的左侧缩进。
  • 不要在同一个列表中混用没有规律的缩进。

效果演示:

  1. 一个苹果
  2. 两个苹果
  3. 三个苹果
  • 一个苹果
  • 两个苹果
  • 三个苹果

10. 行内代码

行内代码使用一对反引号:

请执行 `make build`。

显示效果:

请执行 make build。

需要显示键盘按键时,可以使用 HTML 的 kbd:

按下 <kbd>Ctrl</kbd> + <kbd>K</kbd> 保存内容。

效果演示:

按下 Ctrl + K 保存内容。

行内代码适合表示:

  • 文件名
  • 命令
  • 函数名
  • 配置项
  • CSS 类名
  • URL 参数
  • 键盘按键

11. 代码块

代码块使用三个反引号或三个波浪线包裹:

```php
echo 'Hello, VOID';
```

也可以使用:

~~~javascript
const message = 'Hello, VOID';
~~~

代码块指定语言后,VOID 会根据语言名称进行 Prism 语法高亮:

```html
<h1>Hello, VOID</h1>
```

代码块的排版目标:

  • 保留代码中的空格和换行。
  • 代码较长时允许横向滚动。
  • 不强行缩小代码字体。
  • 支持复制代码。
  • 可以根据主题设置显示 Mac 风格标题栏和行号。
  • 代码围栏中的 Markdown 符号不会被当作正文语法解析。

效果演示:

echo 'Hello, VOID';

12. 表格

基本表格语法:

| 名称 | 说明 |
| --- | --- |
| VOID | Typecho 主题 |
| Markdown | 文章排版语法 |

带对齐方式的表格:

| 左对齐 | 居中 | 右对齐 |
| :--- | :---: | ---: |
| A | B | C |

表格建议:

  • 第一行作为表头。
  • 第二行必须使用 --- 分隔。
  • 单元格内容尽量简短。
  • 列数较多时,移动端允许横向滚动。
  • 不建议在表格中嵌套复杂的代码块、图片或长段落。

效果演示:

名称说明
VOIDTypecho 主题
Markdown文章排版语法

13. 数学公式

行内公式:

圆的面积为 $S=\pi r^2$。

块级公式:

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

VOID 使用 MathJax 渲染数学公式。数学公式中的美元符号、反斜杠和大括号不要随意省略。

效果演示:

行内公式:$S=\pi r^2$

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

14. 转义特殊符号

如果需要显示 Markdown 的特殊符号,可以在符号前加反斜杠:

\*这不是斜体\*
\[这不是链接\]
\# 这不是标题

常见需要转义的符号包括:

\  `  *  _  {  }  [  ]  (  )  #  +  -  .  !

效果演示:

*这不是斜体*

VOID 增强语法

1. 注音

使用两对大括号,并在文字和读音之间使用英文冒号:

魈(xiāo)

显示效果:

魈(xiāo)

注音会转换为语义化的 Ruby 标记,读音显示在文字上方。

建议:

  • 冒号使用英文半角 :。
  • 一次只标注一组完整文字。
  • 不要在代码块中使用注音语法。
  • 读音较长时,注意窄屏下的换行效果。

2. 黑幕删除线

~~这段内容默认隐藏~~

VOID 可以把删除线显示为黑幕,用于剧透、隐藏答案或表示已经删除的内容。

建议的交互目标:

  • 默认隐藏文字。
  • 鼠标悬停时显示内容。
  • 键盘聚焦时也可以显示内容。
  • 暗色模式下仍保持足够的对比度。
  • 打印时恢复为可读文字。
  • 不依赖颜色传达“删除”这一含义。

效果演示:

这段文字默认以黑幕显示,悬停或聚焦后查看内容。

3. GitHub Alerts 提示块

提示块使用 GitHub Alerts 语法。标记必须位于引用块的第一行,并且正文从下一行开始:

> [!WARNING]
> 升级之前请先备份数据库。

支持以下五种类型:

> [!NOTE]
> 说明内容。

> [!TIP]
> 提示内容。

> [!IMPORTANT]
> 重要内容。

> [!WARNING]
> 警告内容。

> [!CAUTION]
> 危险内容。

VOID 默认显示的中文标题为:

类型标题建议颜色
NOTE说明蓝色
TIP提示绿色
IMPORTANT重要紫色
WARNING警告黄色或橙色
CAUTION危险红色

提示块可以包含多段文字、列表、链接和代码:

> [!IMPORTANT]
> 发布前请完成以下检查:
>
> - 检查配置文件
> - 备份数据库
> - 确认缓存已经刷新

注意:

  • 类型必须使用大写。
  • [!WARNING] 后面必须换行。
  • 不支持自定义提示块标题。
  • 普通引用中的 [!WARNING] 不应被误识别为提示块。
  • 旧文章中的单段 [notice]内容[/notice] 可以继续作为 NOTE 兼容语法,新文章建议使用 GitHub Alerts。

效果演示:

警告

升级之前请先备份数据库。

4. 图集

图集标记必须单独占行,并与前后正文保留空行:

&#91;photos]
![第一张图片](https://static.himiku.com/2021/02/01/23c43007eb0f0.png#vwid=665&vhei=252)
![第二张图片](https://static.himiku.com/2021/04/24/83493412_p0.jpg#vwid=1515&vhei=1080)
&#91;/photos]

这里的 &#91; 只是为了在本参考文档中显示语法字面量。实际文章中请将它还原为 [;真实效果演示会使用原始图集标记。

VOID 根据图片数量自动选择排版:

  • 1 张:按普通正文图片显示。
  • 2 张:保持原始比例并排显示。
  • 3 张及以上:组成横向图片带。
  • 触屏设备可以横向滑动。
  • 桌面设备可以使用鼠标拖动。
  • 每张图片仍保留独立的原图链接和图片说明。
  • JavaScript 不可用时,仍按普通图片显示并可以打开原图。

建议:

  • 图集内部只放图片。
  • 不要在图集内部混入标题、段落或代码。
  • 图片顺序应与文章叙述顺序一致。
  • 图片数量较多时,注意移动端的横向操作体验。

效果演示:

第一张图片
第一张图片
第二张图片
第二张图片
第三张图片
第三张图片

Gallery 独立页面还支持把连续的普通 Markdown 图片自动组成照片墙。标题、文字或其他非图片内容可以用来分隔不同照片组。

5. 友情链接卡片

使用 &#91;links] 和 &#91;/links] 包裹友情链接,每行一个站点:

本参考文档中的语法示例使用 &#91; 代替实际的左方括号,只为了让示例原样显示。复制到文章中时,请将 &#91; 还原为 [。

&#91;links]
[站点名称](https://example.com)+(https://static.himiku.com/2021/02/01/23c43007eb0f0.png#vwid=665&vhei=252)
[另一个站点](https://another.example.com)+(https://static.himiku.com/2021/04/24/83493412_p0.jpg#vwid=1515&vhei=1080)
&#91;/links]

每一行的格式为:

[站点名称](站点链接)+(头像链接)

友情链接卡片建议:

  • 站点名称应简短。
  • 站点链接和头像链接都使用完整的 HTTP 或 HTTPS 地址。
  • 不要在链接格式中插入多余空格。
  • &#91;links]、&#91;/links] 必须保持成对出现。

效果演示:

某些 Typecho 版本可能会转义这类 HTML 内容,可以使用 !!! 包裹:

!!!

&#91;links]
[站点名称](https://example.com)+(https://static.himiku.com/2021/02/01/23c43007eb0f0.png#vwid=665&vhei=252)
&#91;/links]

!!!

!!! 必须单独占一行。


  1. 这是脚注的实际显示效果示例。 ↩