主题开发 | 10分钟
本主题Markdown渲染测试文件
一月 22, 2025
MarkDown 网页渲染 Hugo 博客

测试本主题的Markdown渲染

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

分割线


段落与换行

这是普通段落文本,包含加粗文字斜体文字,也可以使用__下划线加粗__和_下划线斜体_。行尾添加两个空格
实现强制换行效果。

段落之间用空行分隔。

新段落开始,这里演示删除线行内代码,以及组合效果:加粗斜体和~~加粗删除~~。


列表系统

无序列表

  • 项目符号(星号)
    • 子项(连字符)
      • 三级项(加号)
  • 任务列表未完成
  • 任务列表已完成

有序列表

  1. 第一项
  2. 第二项
    1. 嵌套子项
    2. 使用相同数字
  3. 第三项

定义列表(扩展语法)

术语一
定义内容一
术语二
定义内容二第一段
定义内容二第二段

链接与图片

标准链接:GitHub
带标题链接:Hover效果
直接链接:https://autolink.example
引用式链接:参考链接

图片示例:
替代文字
带尺寸图片:


代码区块

行内代码:print("Hello World")

缩进代码: def factorial(n): return 1 if n == 0 else n * factorial(n-1)

围栏代码(指定语言):

这里支持chroma的围栏语法,可以自定义高亮代码行。代码文件名。其他表格、锚点等等设计我已写到站点里,这里不能再设置。

markdown
1```rust {hl_lines=[9,"15-17"],linenostart=199,title="test.rs"}
2```
rust
199struct A;          // Concrete type `A`.
200struct S(A);       // Concrete type `S`.
201struct SGen<T>(T); // Generic type `SGen`.
202
203fn reg_fn(_s: S) {}
204
205fn gen_spec_t(_s: SGen<A>) {}
206
207fn gen_spec_i32(_s: SGen<i32>) {}
208
209fn generic<T>(_s: SGen<T>) {}
210
211fn main() {
212    // Using the non-generic functions
213    reg_fn(S(A));          // Concrete type.
214    gen_spec_t(SGen(A));   // Implicitly specified type parameter `A`.
215    gen_spec_i32(SGen(6)); // Implicitly specified type parameter `i32`.
216
217    // Explicitly specified type parameter `char` to `generic()`.
218    generic::<char>(SGen('a'));
219
220    // Implicitly specified type parameter `char` to `generic()`.
221    generic(SGen('c'));
222}

语法高亮测试:

javascript
1const data = [
2  { id: 1, name: 'Item 1' },
3  { id: 2, name: 'Item 2' }
4];
5console.log(JSON.stringify(data, null, 2));

表格系统

基础表格:

左对齐居中对齐右对齐
内容1内容2内容3
长文本示例使用竖线|字符$100.00

引用与注释

标准引用:

这是引用文本
多行引用内容

嵌套引用

带来源的引用:

《论语》
– 孔子

脚注示例1和行内脚注[^这是行内脚注内容]


数学公式(扩展语法)

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

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

块级公式:

latex
 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$$
$$ \begin{bmatrix} a & b \\ c & d \end{bmatrix} \times \begin{bmatrix} x \\ y \end{bmatrix}= \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix} $$

其他元素

HTML混合:红色文字

表情符号(扩展): 😄 🚀 ⚠️ ❤️

Ruby注释: 漢かん字じ漢かん字じかん

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```
&AMSioiqfbBxujoea(-xdra>efR>coCnuob(nr))dneeJdrosinNoRDtoiuaangddloitneDiagonalsCVuerrvteidcalnotANC:ouldrriAa/Ivnsineehstd-e-trlBihiision'sreqn.u*oobttoelasd'*lineDonSee?arc3h

流程图

markdown
1```mermaid
2graph TD
3A[开始] --> B(处理过程)
4B --> C{判断条件}
5C -->|是| D[结束]
6C -->|否| B
7```
graph TD A[开始] --> B(处理过程) B --> C{判断条件} C -->|是| D[结束] C -->|否| B

类图

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```
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
2pie
3    "Dogs" : 386
4    "Cats" : 85
5    "Rats" : 15
6```
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15

Git图

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```
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

其他时序图、状态图、甘特图就不写了,搜一下mermaid图即可


综合测试区

这个段落包含多种样式组合:

  1. 列表项包含代码链接
  2. 斜体文字中嵌入^[行内脚注]
  3. 表格中的强调
    特征描述
    重要必须使用特殊处理

数学公式与代码混合: 当 \( x > 0 \) 时:

python
1if x > 0:
2    print("Positive")
3else:
4    print("Non-positive")

最后测试段落的边界情况

  • 空值处理:``
  • 特殊符号:~`!@#$%^&()_+-=[]{}|;’:",./<>?
  • 长文本测试:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. 这里是第一个脚注 ↩︎