Featured image of post Markdown语法指南

Markdown语法指南

本文章展示了HTML元素的基本Markdown语法和格式。

一、Markdown简介

Markdown 是一种轻量级标记语言,创始人为约翰·格鲁伯(John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的 XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。

由于 Markdown 的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如 GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。

二、Markdown语法指南

本篇博文提供了一些可以在 Hugo 内容文件(可以使用它生成静态页面)中使用的基本 Markdown 语法指南,还展示了Hugo 主题中是否使用 CSS 装饰基本 HTML 元素。

博文中介绍的 MarkDown 语法可以使用 MarkDown 在线工具(如:https://tool.lu/markdown/)进行编写练习,也可使用本地支持 MarkDown 的编辑器软件(如:VS Code、Typra等)进行编写练习。

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

2.1 Markdown标头(Headings)语法

Markdown 使用 # 符号表示标头,# 符号的数量表示标题的级别,例如,# 表示一级标题,## 表示二级标题,以此类推,最多支持六级标题。

Markdown标头 的六个元素依次对应 HTML 中的 <h1><h6> 六个级别的 h 标签(用于定义标题)元素,<h1>是最高级别的标题,而<h6>是最低级别的标题。

The following HTML <h1><h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

以下Markdown 1-6级标头语法示例:

1
2
3
4
5
6
# Markdown 一级标题语法(<`h`>元素)
## Markdown 二级标题语法(<`h`>元素)
### Markdown 三级标题语法(<`h`>元素)
#### Markdown 四级标题语法(<`h`>元素)
##### Markdown 五级标题语法(<`h`>元素)
###### Markdown 六级标题语法(<`h`>元素)

以下是Markdown标头Headings)的展示效果: Markdown标头(Headings)效果

2.2 Markdown段落(Paragraph)语法

Markdown 的段落(Paragraph)语法为直接书写,段落之间使用空行分隔开,如下是一个不带任何修饰的Markdown段落示例:

1
2
3
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.

以下是Markdown段落(Paragraph)的展示效果:

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.

2.3 文字的格式(text format)语法

1、斜体文本写法

1
2
3
*斜体文本1*

`_斜体文本2_`

展示效果:

斜体文本1

斜体文本2

2、粗体文本语法

1
2
3
**粗体文本1**

__粗体文本2__

展示效果:

粗体文本1

粗体文本2

3、粗斜体文本语法

1
2
3
***粗斜体文本1*** 

___粗斜体文本2___

展示效果:

粗斜体文本1

粗斜体文本2

4、高亮文本语法

1
 `高亮文本`

展示效果:

高亮文本

5、带有删除线的文本

1
~~带有删除线的文本~~

展示效果:

带有删除线的文本

6、带有下划线的文本

1
<u>带有下划线的文本</u>

展示效果:

带有下划线的文本

7、带有白框(表示键盘按键)的文本

1
2
3
<kbd>带有白框的文本</kbd>

<kbd>Ctl</kbd>键、<kbd>Shift</kbd>

展示效果:

Ctl键、Shift

2.4 Markdown区块(Blockquotes)语法

1、普通的Markdown区块(Blockquotes)

Markdown 区块(Blockquotes)元素是使用反引号 `` 包围的内容区域,用来表示从另一个源引用的内容,可以是有必须在页脚或引用内的引文,也可以是注释和缩写。

以下是Markdown区块((Blockquotes)的示例:

1
2
3
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.

这是一行C代码 `int i = 100;`

以下是普通的Markdown区块(Blockquotes)的展示效果:

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.

这是一行C代码 int i = 100;

2、不标注出处的区块(Blockquote without attribution)

Markdown 使用大于符号 > 作为行首字符表示不标注出处的区块(Blockquotes)元素, 以下是Markdown 不标注出处的区块(Blockquotes)元素的示例:

1
2
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use *Markdown syntax* within a blockquote.

不标注出处的区块(Blockquotes)元素的展示效果:

Tiam, ad mint andaepu dandae nostion secatur sequo quae.

Note that you can use Markdown syntax within a blockquote.

3、标注出处的区块(Blockquote with attribution)

以下是Markdown 标注出处的区块(Blockquotes)元素的示例:

1
2
3
4
> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.

标注出处的区块(Blockquotes)元素的展示效果:

Don’t communicate by sharing memory, share memory by communicating.
Rob Pike1

Tips: 出处1 在文章末尾显示。

4、嵌套的区块

以下是Markdown 嵌套的区块(Blockquotes)元素的示例:

1
2
3
> abc
> > abcd
> > > abcde

展示效果:

abc

abcd

abcde

2.5 表格(Tables)

1、表格不是Markdown核心规范的一部分,但Hugo支持开箱即用

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Markdown 中表格的语法:

1
2
3
4
5
6
7
8
9
   | Name  | Age |
   | ----- | --- |
   | Bob   | 27  |
   | Alice | 23  |

| 左对齐   |   右对齐 | 居中对齐 |
| :------- | -------: | :------: |
| 文本内容 | 文本内容 | 文本内容 |
| 文本内容 | 文本内容 | 文本内容 |

Markdown 中表格的效果:

Name Age
Bob 27
Alice 23
左对齐 右对齐 居中对齐
文本内容 文本内容 文本内容
文本内容 文本内容 文本内容

2、表格中使用内联Markdown (Inline Markdown within tables)的 语法:

1
2
3
| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| *italics* | **bold** | `code` |

Markdown 表格中使用内联Markdown的效果:

Italics Bold Code
italics bold code

3、设置表格列宽度 语法:

1
2
3
| <div style="width:100px;"> Italics | Bold     | Code   |
| ---------------------------------- | -------- | ------ |
| *italics*                          | **bold** | `code` |

Markdown 表格中使用内联Markdown的效果:

Italics
Bold Code
italics bold code

2.6 代码块(Code Blocks)

1、Code block with backticks(反引号)

使用三个反引号 ``` 开头的行开始 到再一次遇到 三个反引号 ``` 的区域为代码块,代码块可以在开头的 ``` 后紧跟着代码标签如 c、c++、html、golang、mysql 等等。

代码块(Code Blocks)的语法:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
  ```html
  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
  </html>
  ```html(编写code块时,结束处的 html 标签不需要)

代码块(Code Blocks)的展示效果:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

2、Diff code block

Diff代码块(Code Blocks)的语法:

1
2
3
4
5
6
7
```diff
[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]
```diff(编写code块时,结束处的 diff 标签不需要)

Diff代码块(Code Blocks)的展示效果:

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

3、One line code block

1
<p>A paragraph</p>

2.7 列表类型(List Types)

1、有序列表(Ordered List)

有序列表(Ordered List)的写法:

1
2
3
4
5
6
7
1. First item
2. Second item
3. Third item

1) First item
2) Second item
3) Third item

有序列表(Ordered List)的展示效果:

  1. First item
  2. Second item
  3. Third item
  1. First item
  2. Second item
  3. Third item

2、无序列表(Unordered List)

无序列表(Unordered List) 是以 *+- 和一个空格连接使用,但不建议用后两项,易与其它符号相关联,

无序列表(Ordered List)的写法:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
* List item
* Another item
* And another item

+ List item
+ Another item
+ And another item

- List item
- Another item
- And another item

无序列表(Ordered List)的展示效果:

  • List item
  • Another item
  • And another item

3、嵌套列表(Nested list)

嵌套列表(Ordered List)的写法:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* Fruit
  * Apple
  * Orange
  * Banana
* Dairy
  * Milk
  * Cheese

+ Fruit
  + Apple
  + Orange
  + Banana
+ Dairy
  + Milk
  + Cheese

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

+ Fruit
  + Apple
  + Orange
  + Banana
+ Dairy
  + Milk
  + Cheese

嵌套列表(Ordered List)的展示效果:

  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese
  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese
  • Fruit
    • Apple
    • Orange
    • Banana
  • Dairy
    • Milk
    • Cheese

2.8 分割线(Divider)语法

1
2
3
4
5
6
7
8
9
***

* * *

*****

- - -

-------

展示效果:






2.9 链接和图片

1、链接

第一种,直接使用链接: https://www.lemubei.com 第二种,文字中包含超链接,做个示范:

1
[牧北的小站](https://www.lemubei.com)

效果如下:

牧北的小站

2、图片

图片的格式为一个: ! + [文本,可不填] + (图片地址 “可选标题”)

1
2
3
4
5
![hugo1](images/hugo.jpg "hugo11")

![hugo2](https://lemubei.com/images/hugo.jpg "hugo22")

![图片不存在1](images/hugovsv.jpg "图片不存在11")

展示效果 hugo1

hugo2

图片不存在1

2.10 其它MarkDown元素(Other Elements)

1、abbr元素写法:

1
<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

展示效果:

GIF is a bitmap image format.

2、sub元素写法:

1
H<sub>2</sub>O

展示效果:

H2O

3、pub元素写法:

1
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

展示效果:

Xn + Yn = Zn

4、kbd元素写法:

1
Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.

展示效果:

Press CTRL + ALT + Delete to end the session.

5、mark元素写法:

1
Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

展示效果:

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

6、注释写法:

1
<!-- 这是注释,这种写法在MarkDown文档中,页面不会显示 -->

三、数学类型设置(Math Typesetting)

MarkDown文档中的 数学类型设置(Math Typesetting) 链接。


  1. The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎

Licensed under CC BY-NC-SA 4.0
最后更新于 2024-03-20 22:32 CST