开发 | 11 分钟

文章渲染示例

二月 15, 2025 本文最后更新于一月 8, 2026

Hugo Markdown HackYourHeart

你好，请阅读：给你的信

文字风格

粗体
斜体
下划线
斜体下划线
~~删除线~~
行内代码
粗斜体
~~粗斜删除线~~

1**粗体**
2*斜体*
3<u>下划线</u>
4<u>_斜体下划线_</u>
5~~删除线~~
6`行内代码`
7***粗斜体***
8_~~**粗斜删除线**~~_

长文本

Hugo is a static site generator written in Go, optimized for speed and designed for flexibility. With its advanced templating system and fast asset pipelines, Hugo renders a complete site in seconds, often less. Use Hugo’s embedded web server during development to instantly see changes to content, structure, behavior, and presentation. Then deploy the site to your host, or push changes to your Git provider for automated builds and deployment.

水平分割线

列表风格

无序列表

Bullet points (using an asterisk)
- Sub-items (using a hyphen)
  - Tertiary items (using a plus sign)
Task list incomplete
Task list completed

有序列表

First item
Second item
Nested sub-items
Using the same number
The third item

定义列表

First Term: This is the definition of the first term.
Second Term: This is one definition of the second term.; This is another definition of the second term.

链接和图片

1、标准链接

GitHub

1[GitHub](https://github.com)

2、链接和悬浮标题

Hover Effect

1[Hover Effect](https://example.com "Hover Title")

3、直接链接

https://autolink.example

1<https://autolink.example>

4、图片

1![](/header-logo.webp "博客logo")

5、重设大小的图片

1<img src="/header-logo.webp" style="width:500px" />

代码块

围栏语法

此处支持 Chroma 的围栏语法，允许你自定义高亮显示特定代码行并为代码块命名。诸如表格、锚点等其他设计元素已在此站点中实现，无法在此处进行配置。

78function copy(object1, object2) {
79  if (typeof object1 !== 'object' || object1 === null ||
80      typeof object2 !== 'object' || object2 === null) {
81    return;
82  }
83
84  for (let key in object2) {
85    if (
86      typeof object2[key] === 'object' &&
87      object2[key] !== null &&
88      typeof object1[key] === 'object' &&
89      object1[key] !== null
90    ) {
91      copy(object1[key], object2[key]); // safe ?
92    } else {
93      object1[key] = object2[key]; // safe ?
94    }
95  }
96}

markdown

 1```js {hl_lines=["9-12",14,16],linenostart=78,title="app.js"}
 2function copy(object1, object2) {
 3  if (typeof object1 !== 'object' || object1 === null ||
 4      typeof object2 !== 'object' || object2 === null) {
 5    return;
 6  }
 7
 8  for (let key in object2) {
 9    if (
10      typeof object2[key] === 'object' &&
11      object2[key] !== null &&
12      typeof object1[key] === 'object' &&
13      object1[key] !== null
14    ) {
15      copy(object1[key], object2[key]); // safe ?
16    } else {
17      object1[key] = object2[key]; // safe ?
18    }
19  }
20}
21```

表格和引用

表格

左对齐	居中	右对齐
Content1	Content2	Content3
Long-text example	Uses the vertical bar \| character	$100.00

markdown

1| 左对齐             |                居中                 |   右对齐  |
2| :---------------- | :--------------------------------: | -------: |
3| Content1          |              Content2              | Content3 |
4| Long-text example | Uses the vertical bar \| character |  $100.00 |

引用

This is a quoted text
Multi-line quoted content
Nested quote

markdown

1> This is a quoted text
2>
3> Multi-line quoted content
4>
5> > Nested quote

数学公式

1、行内公式

行内公式：$E = mc^2$

markdown

1$E = mc^2$

2、分数

分数：$\frac{1}{2}$

markdown

1$\frac{1}{2}$

3、块级公式

$$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} \times \begin{bmatrix} x \\ y \end{bmatrix}= \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix} $$

markdown

 1$$
 2\begin{bmatrix}
 3   a & b \\
 4   c & d
 5\end{bmatrix}
 6\times
 7\begin{bmatrix}
 8   x \\
 9   y
10\end{bmatrix}=
11\begin{bmatrix}
12   ax + by \\
13   cx + dy
14\end{bmatrix}
15$$

短代码

1、PDF

给你的信

markdown

1{{< pdf name="给你的信" src="/letter_zh.pdf" >}}

2、Youtube

此短代码内置于 Hugo 中。如需了解更多短代码，请访问：Hugo 短代码

markdown

1{{< youtube 0RKpf3rK57I >}}

3、Bilibili

markdown

1{{< bilibili BV1g24y1N7zZ>}}

4、Video

markdown

1{{< video src="https://fancyapps.com/sample.mp4" cover="https://fancyapps.com/poster.jpg">}}

其他元素

1、HTML 混合

红色文本

html

1<span style="color:red">红色文本</span>

2、Emoji 表情

😄 🚀 ⚠️ ❤️

emoji

1:smile: :rocket: :warning: :heart:

3、Ruby 注音

汉hàn字 zì

漢かん字じ

html

1<ruby>汉<rt>hàn</rt>字 <rt>zì</rt></ruby>
2<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>

4、Mermaid图示例

此处仅展示了goat图、类图、Git 图和饼图这四种图表类型；有关其他图表类型的用法，请参阅官方 Mermaid 文档。

goat 图：

markdown

 1```goat
 2+-------------------+                           ^                      .---.
 3|    A Box          |__.--.__    __.-->         |      .-.             |   |
 4|                   |        '--'               v     | * |<---        |   |
 5+-------------------+                                  '-'             |   |
 6                       Round                                       *---(-. |
 7  .-----------------.  .-------.    .----------.         .-------.     | | |
 8 |   Mixed Rounded  | |         |  / Diagonals  \        |   |   |     | | |
 9 | & Square Corners |  '--. .--'  /              \       |---+---|     '-)-'       .--------.
10 '--+------------+-'  .--. |     '-------+--------'      |   |   |       |        / Search /
11    |            |   |    | '---.        |               '-------'       |       '-+------'
12    |<---------->|   |    |      |       v                Interior                 |     ^
13    '           <---'      '----'   .-----------.              ---.     .---       v     |
14 .------------------.  Diag line    | .-------. +---.              \   /           .     |
15 |   if (a > b)     +---.      .--->| |       | |    | Curved line  \ /           / \    |
16 |   obj->fcn()     |    \    /     | '-------' |<--'                +           /   \   |
17 '------------------'     '--'      '--+--------'      .--. .--.     |  .-.     +Done?+-'
18    .---+-----.                        |   ^           |\ | | /|  .--+ |   |     \   /
19    |   |     | Join        \|/        |   | Curved    | \| |/ | |    \    |      \ /
20    |   |     +---->  o    --o--        '-'  Vertical  '--' '--'  '--  '--'        +  .---.
21 <--+---+-----'       |     /|\                                                    |  | 3 |
22                      v                             not:line    'quotes'        .-'   '---'
23  .-.             .---+--------.            /            A || B   *bold*       |        ^
24 |   |           |   Not a dot  |      <---+---<--    A dash--is not a line    v        |
25  '-'             '---------+--'          /           Nor/is this.            ---
26```

类图：

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

markdown

 1```mermaid
 2classDiagram
 3Class01 <|-- AveryLongClass : Cool
 4Class03 *-- Class04
 5Class05 o-- Class06
 6Class07 .. Class08
 7Class09 --> C2 : Where am i?
 8Class09 --* C3
 9Class09 --|> Class07
10Class07 : equals()
11Class07 : Object[] elementData
12Class01 : size()
13Class01 : int chimp
14Class01 : int gorilla
15Class08 <--> C2: Cool label
16```

git图：

gitGraph commit branch hotfix checkout hotfix commit branch develop checkout develop commit id:"ash" tag:"abc" branch featureB checkout featureB commit type:HIGHLIGHT checkout main checkout hotfix commit type:NORMAL checkout develop commit type:REVERSE checkout featureB commit checkout main merge hotfix checkout featureB commit checkout develop branch featureA commit checkout develop merge hotfix checkout featureA commit checkout featureB commit checkout develop merge featureA branch release checkout release commit checkout main commit checkout release merge main checkout develop merge release

markdown

 1```mermaid
 2gitGraph
 3    commit
 4    branch hotfix
 5    checkout hotfix
 6    commit
 7    branch develop
 8    checkout develop
 9    commit id:"ash" tag:"abc"
10    branch featureB
11    checkout featureB
12    commit type:HIGHLIGHT
13    checkout main
14    checkout hotfix
15    commit type:NORMAL
16    checkout develop
17    commit type:REVERSE
18    checkout featureB
19    commit
20    checkout main
21    merge hotfix
22    checkout featureB
23    commit
24    checkout develop
25    branch featureA
26    commit
27    checkout develop
28    merge hotfix
29    checkout featureA
30    commit
31    checkout featureB
32    commit
33    checkout develop
34    merge featureA
35    branch release
36    checkout release
37    commit
38    checkout main
39    commit
40    checkout release
41    merge main
42    checkout develop
43    merge release
44```

饼图：

pie "Dogs" : 386 "Cats" : 85 "Rats" : 15

markdown

1```mermaid
2pie
3    "Dogs" : 386
4    "Cats" : 85
5    "Rats" : 15
6```

文字风格

列表风格

无序列表

有序列表

定义列表

链接和图片

1、标准链接

2、链接和悬浮标题

3、直接链接

4、图片

5、重设大小的图片

代码块

表格和引用

数学公式

1、行内公式

2、分数

3、块级公式

短代码

1、PDF

2、Youtube

3、Bilibili

4、Video

其他元素

1、HTML 混合

2、Emoji 表情

3、Ruby 注音

4、Mermaid图 示例

4、Mermaid图示例