Post Rendering Example en

February 15, 2025 This post was last updated on January 8, 2026

Hugo Markdown HackYourHeart

Hello，Read this pdf： A Letter to You

Text Style

bold text
italicized text
underlined
underlined italicized
~~strikethrough~~
inline code
bold and italic
~~bold and strikethrough and ilalic~~

1**bold text**
2*italicized text*
3<u>underlined</u>
4<u>_underlined italicized_</u>
5~~strikethrough~~
6`inline code`
7***bold and italic***
8_~~**bold and strikethrough and ilalic**~~_

Long Text

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.

Horizontal Rule

List Style

Unordered Lists

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

Ordered list

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

Definition list

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.

Links and Images

1、Standard link

GitHub

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

2、Link with hover title

Hover Effect

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

3、Direct link

https://autolink.example

1<https://autolink.example>

4、Image example:

1![](/test/img/hugo-logo-wide.webp "Image Title")

5、Resized image:

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

Code Block

Fence syntax

Here, Chroma’s fence syntax is supported, allowing you to customize the highlighting of specific code lines and name code blocks. Other design elements such as tables, anchors, and the like have already been implemented in the site and cannot be configured here.

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

Table and Quote

Table：

Left-aligned	Center-aligned	Right-aligned
Content1	Content2	Content3
Long-text example	Uses the vertical bar \| character	$100.00

markdown

1| Left-aligned      |           Center-aligned           | Right-aligned |
2| :---------------- | :--------------------------------: | ------------: |
3| Content1          |              Content2              |      Content3 |
4| Long-text example | Uses the vertical bar \| character |       $100.00 |

Quote：

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

Mathematical Formula

1、Inline formula

Inline formula：$E = mc^2$

markdown

1$E = mc^2$

2、Fraction

Fraction：$\frac{1}{2}$

markdown

1$\frac{1}{2}$

3、Block-level formula

$$ \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$$

ShortCode

1、PDF

Hugo Introduction

markdown

1{{< pdf name="Hugo Introduction" src="/test/file/letter.pdf" >}}

2、Youtube

This shortcode is built into Hugo. For more shortcodes, visit: Hugo ShortCodes

markdown

1{{< youtube 0RKpf3rK57I >}}

3、Bilibili

Because the Hugo theme demo doesn’t allow external links, there’s no Bilibili example available—only the code usage is provided.

markdown

1{{< bilibili BVXXXXXXXXXX>}}

4、Video

You can specify an external URL or a relative path here, such as /hugo_tutorial.mp4.

markdown

1{{< video src="https://youtu.be/0RKpf3rK57I?si=IUGkbZFHPHyxyyph" cover="/test/img/hugo_tutorial.png">}}

Post encryption

Encryption is true encryption, not merely obfuscation or pseudo-encryption.

The encryption algorithm is AES-GCM. Decryption invokes the browser’s WebCrypto API for decryption and features built-in hardware acceleration, resulting in extremely fast decryption speeds. It can only run on HTTPS and localhost.

Add the field password="123456" to the front-matter of the post, and the article and its table of contents will be encrypted according to the password you enter.

Other elements

1、HTML Mixing

Red Text

html

1<span style="color:red">Red Text</span>

2、Emoji

😄 🚀 ⚠️ ❤️

emoji

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

3、Ruby notation

汉hàn字 zì

漢かん字じ

html

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

4、Mermaid diagram example

Only the goat, class, git, and pie chart types are shown here; for other chart types, refer to the official Mermaid documentation.

goat diagram：

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

class diagram：

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 diagram：

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 diagram：

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

markdown

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