这篇文章提供了一个关于 Markdown 基本语法的示例,展示了在 Hugo & PaperMod 内容文件中如何使用这些语法,同时也展示了基础的 HTML 元素在 Hugo 主题中的 CSS 装饰效果。
标题
以下 HTML <h1>—<h6> 元素代表六个级别的章节标题。<h1> 是最高级别的标题,而 <h6> 是最低级别。
H1
H2
H3
H4
H5
H6
段落
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
强调语法(粗体、斜体、删除线)
粗体
你好,**我的朋友**
你好,我的朋友
斜体
否定昨天,_创造明天_
否定昨天,创造明天
粗体和斜体
世事如棋局,不着得才是高手;**_人生似瓦盆,打破了方见真空_**。
世事如棋局,不着得才是高手;人生似瓦盆,打破了方见真空。
删除线
~众生皆苦,你也不能认输~
众生皆苦,你也不能认输
引用
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
blockquote 元素表示引用自其他来源的内容,可以选择性地附带一个 footer 或 cite 元素的引文,并可以在其中进行注释或缩写。
没有引用来源的 Blockquote
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
带有引用来源的 Blockquote
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
表格
表格不是 Markdown 语法的核心部分,但 Hugo 支持它们。
| Name | Age |
|---|---|
| Bob | 27 |
| Alice | 23 |
表格中的内联 Markdown
| Italics | Bold | Code |
|---|---|---|
| italics | bold | code |
列表类型
有序列表
- First item
- Second item
- Third item
无序列表
- List item
- Another item
- And another item
嵌套无序列表
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
N嵌套有序列表
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
- Third item
- Sub One
- Sub Two
代码语法
转义反引号
`Console.WriteLine("Full Name: {0}", fullname);`
Console.WriteLine("Full Name: {0}", fullname);
代码块
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Donghai's Blog</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Donghai's Blog</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
分割线
---
链接语法
这是一个链接 [Donghai's Blog](https://mgrowup.com/ "这是个人博客")。
这是一个链接 。
网址和Email地址
使用尖括号可以很方便地把URL或者email地址变成可点击的链接
<https://mgrowup.com>
<fake@example.com>
禁用自动URL链接
如果您不希望自动链接URL,则可以通过将URL表示为带反引号的代码来删除该链接
`https://mgrowup.com`
呈现的输出如下所示:
<https://mgrowup.com>
图片

![]()
链接图片
给图片增加链接,将图像的 Markdown 括在方括号中,然后将链接添加在圆括号中
[](https://mgrowup.com/avatar.webp)
其他元素 — abbr, sub, sup, kbd, mark
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
转移字符
要显示原本用于格式化 Markdown 文档的字符,需在字符前面添加反斜杠字符 \
\* 红鸢依靠哪种独特尾部特征实现精准飞行?
A. 圆形的
B. 球拍形
C. 分叉的
* 红鸢依靠哪种独特尾部特征实现精准飞行?
A. 圆形的
B. 球拍形
C. 分叉的
以下列出的字符都可以通过使用反斜杠字符从而达到转义目的
| 字符 | 名称 |
|---|---|
| \ | 反斜杠 |
| ` | 反引号 |
| * | 星号 |
| _ | 下划线 |
| { } | 花括号 |
| [ ] | 中括号 |
| ( ) | 小括号 |
| # | 井号 |
| + | 加号 |
| - | 减号 |
| . | 句号 |
| ! | 感叹号 |
| | | 竖线 |
内嵌 HTML 标签
对于 Markdown 涵盖范围之外的标签,都可以直接在文件里面用 HTML 本身。如需使用 HTML,不需要额外标注这是 HTML 或是 Markdown,只需 HTML 标签添加到 Markdown 文本中即可
行级內联标签
HTML 行级內联标签和区块标签不同,在內联标签的范围内, Markdown 的语法是可以解析的
好的**问题**,其实就是<em>答案的一半</em>。
好的问题,其实就是答案的一半。
新标签打开链接
Markdown 不能指定 target="_blank",但 HTML 可以:
<a href="https://www.ruankao.org.cn/" target="_blank">中国计算机技术职业资格网</a>
自定义样式
<span style="color: blue">别告诉别人你今天难受过,什么也别对别人说,因为说了也没有用</span>
别告诉别人你今天难受过,什么也别对别人说,因为说了也没有用
下面是常用的标签
| 标签 | 用途 | markdown 等效 | 备注 |
|---|---|---|---|
<br> |
强制换行 | 两个空格 + 回车 | |
<small> |
小号字体 | 无直接等效 | 可用于免责声明、注释 |
<em> |
斜体 | *text* 或 _text_ |
|
<strong> |
粗体 | **text** 或 __text__ |
块级标签
可折叠内容
<!-- 可折叠区块 -->
<details>
<summary>点击查看答案</summary>
这里是隐藏的详细内容。
</details>
点击查看答案
这里是隐藏的详细内容。复杂表格
<!-- 复杂表格 -->
<table>
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>张三</td><td>25</td></tr>
</table>
| 姓名 | 年龄 |
|---|---|
| 张三 | 25 |
任务列表
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
- Write the press release
- Update the website
- Contact the media
-
The above quote is excerpted from Rob Pike’s during Gopherfest, November 18, 2015. ↩︎
如果本文对你有所帮助,可以请我喝杯咖啡
(完)