2026年1月3日 / 示例

Markdown 语法指南

本文全面展示了 Hugo 主题中支持的基本 Markdown 语法与 HTML 元素的样式效果。

本文提供了可在 Hugo 内容文件中使用的基本 Markdown 语法示例,同时也展示了 Hugo 主题中 CSS 如何修饰基本的 HTML 元素。

标题

以下 HTML <h1><h6> 元素表示六个级别的部分标题。<h1> 是最高级别,而 <h6> 是最低级别。

三级标题

四级标题

五级标题
六级标题

段落

这是一个段落示例。在这里,我们可以看到文字是如何流动的。它包含了足够多的文字,以至于它可以换行,从而展示行间距和段落间距的效果。

另一个段落,用于展示段落之间的间距。在排版中,空白和文字一样重要。

引用块

引用块元素代表从其他来源引用的内容,可以选择带有来自于 footercite 元素的引用说明,并可选择带有行内修改,如注释和缩写。

无归属的引用块

这是一个没有任何特定归属的引用块示例。 注意 你可以在引用块中使用 Markdown 语法

带归属的引用块

不要通过共享内存来通信,而要通过通信来共享内存。 — Rob Pike1

表格

表格不是 Markdown 核心规范的一部分,但 Hugo 原生支持它们。

姓名年龄
Bob27
Alice23

表格内的行内 Markdown

斜体粗体代码
斜体粗体code
ABCDEF
这是一个很长的单元格内容,主要用于测试表格在不同屏幕尺寸下的响应式表现。这是另一列的内容,同样包含了大量的文字,以确保表格布局能够正确处理长文本。第三列的内容也不短,看看它会如何影响周围的列宽分配以及整体的表格结构。短文本测试中等长度的文本测试,稍微长一点最后的总结性文本,填满表格。

代码块

使用反引号的代码块

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

缩进四个空格的代码块

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

代码差异对比

[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

单行代码块

<p>A paragraph</p>

列表类型

有序列表

  1. 第一项
  2. 第二项
  3. 第三项

无序列表

  • 列表项
  • 另一项
  • 还有一项

嵌套列表

  • 水果
    • 苹果
    • 橘子
    • 香蕉
  • 乳制品
    • 牛奶
    • 奶酪

其他元素 — abbr, sub, sup, kbd, mark

GIF 是一种位图图像格式。

H2O

Xn + Yn = Zn

按 CTRL + ALT + Delete 结束会话。

大多数 蝾螈 都是夜行性的,捕食昆虫、蠕虫和其他小生物。


  1. 上述名言摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 期间的 演讲。 ↩︎

最后更新于2026年1月5日星期一