我的第一篇博文——Markdown语法学习 - 南山~南

公告

我的第一篇博文——Markdown语法学习

Markdown是一种轻量级标记语言，它以纯文本形式(易读、易写、易更改)编写文档，并最终以HTML格式发布。 Markdown也可以理解为将以MARKDOWN语法编写的语言转换成HTML内容的工具。

优点：

易读、易写、易更改、纯文本。
兼容HTML，可以转换为HTML格式发布。
跨平台使用。
越来越多的网站支持Markdown。

一、基础语法

1、标题

使用"#"作为标题格式标记，一个为一级标题，两个为二级标题，以此类推（注：最多可到六级标题）。

考虑不同程序的兼容性，最好在 # 和标题之间用一个空格。

示例：

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

效果如下：

还可以在文本下方添加任意数量的 == 号来标识一级标题，或者 -- 号来标识二级标题（注：只识别两级标题）。

示例：

这是一级标题
===============

这是二级标题
---------------

效果如下：

2、段落

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。
也可以在段落后面使用一个空行来表示重新开始一个段落。或采用HTML 的 <br> 标签来实现换行。

注：使用Typora无需特别添加空格，直接Enter即可实现自动切换段落，若要创建段内换行，按Shift+Enter。

不要用空格（spaces）或制表符（ tabs）缩进段落。

考虑兼容性，不建议在行尾添加反斜杠 (\) 的方式实现换行。

3、字体

Markdown 可以使用以下几种字体：

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___
~~这是加删除线的文字~~
<u>带下划线文本</u>

效果如下：

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本
~~这是加删除线的文字~~
带下划线文本

注：考虑兼容性，在单词或短语中间部分进行强调的话，最好使用星号（*）。

脚注说明：

脚注是对文本的补充说明。可以放在除列表，块引号和表之类的其他元素之外的任何位置。

Markdown 脚注的格式如下[^要注明的文本]:

[^要注明的文本]

示例：

创建脚注格式类似这样 ^[1]。

4、引用

在段落的每行或者只在第一行添加一个 > 符号创建块引用，可使用多个嵌套引用，也可以包含其他Markdown格式，包括标题、列表、代码区块等。

考虑兼容性，建议>后面添加一个空格符号

示例：

> 这是引用的内容
>> 这是引用的内容
>>>>>>>>>> 这是引用的内容

效果如下：

5、分割线

三个或者三个以上的 - 或者 * 或者_都可以。

考虑兼容性，建议在分隔线的前后均添加空白行。

示例：

---
----
***
*****
___
____

效果如下：

6、转义符

要显示原本用于格式化 Markdown 文档的字符，在字符前面添加反斜杠字符 \ 。

在 HTML 文件中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果只是想要使用这些符号，必须要使用实体的形式，像是 < 和 &。

比如，你要打「AT&T」，你必须要写成「AT&T」，还得转换网址内的 & 符号，如果你要链接到：

http://images.google.com/images?num=30&q=larry+bird

你必须要把网址转成：

http://images.google.com/images?num=30&amp;q=larry+bird

才能放到链接标签的 href 属性里。不用说也知道这很容易忘记，这也可能是 HTML 标准检查所检查到的错误中，数量最多的。

Markdown 允许你直接使用这些符号，它帮你自动转义字符。如果你使用 & 符号的作为 HTML 实体的一部分，那么它不会被转换，而在其它情况下，它则会被转换成 &。所以你如果要在文件中插入一个著作权的符号，你可以这样写：

&copy;

Markdown 将不会对这段文字做修改，但是如果你这样写：

AT&T

Markdown 就会将它转为：

AT&amp;T

类似的状况也会发生在 < 符号上，因为 Markdown 支持行内 HTML ，如果你使用 < 符号作为 HTML 标签的分隔符，那 Markdown 也不会对它做任何转换，但是如果你是写：

4 < 5

Markdown 将会把它转换为：

4 &lt; 5

需要特别注意的是，在 Markdown 的块级元素和内联元素中， < 和 & 两个符号都会被自动转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML。（在 HTML 语法中，你要手动把所有的 < 和 & 都转换为 HTML 实体。）

7、缩进

推荐缩进方式

&nbsp;  缩进1/4中文
&ensp;  缩进半个中文，一个字符
&emsp;  缩进一个中文，2个字符

示例:

&nbsp;你若安好，便是晴天。  
&ensp;你若安好，便是晴天。
&emsp;你若安好，便是晴天。

效果如下：

你若安好，便是晴天。
你若安好，便是晴天。
你若安好，便是晴天。

二、不算进阶

1、链接

（1）互联网图片

语法：

![图片title](图片链接 ''图片描述'')

图片title就是显示在图片下面的文字，是图片的标题。
图片描述是当鼠标移到图片上时显示的内容，相当于对图片内容的解释。
注意：图片描述和title均可不加

示例：

![给你看个小姐姐](https://pic4.zhimg.com/80/v2-560623bcbaa438b1627578aa70f5b08c.png)

效果：

小姐姐怎么没有显示

（2）本地图片

语法：

![图片title](图片本地路径 ''图片描述'')

图片title就是显示在图片下面的文字，是图片的标题。
图片描述是当鼠标移到图片上时显示的内容，相当于对图片内容的解释。
注意：图片描述和title均可不加

示例：

![我电脑可没有小姐姐](./image/4b9565e605bccd55f8354609dcd7ebcb.jpg)

（3）超链接

语法：

[超链接名](超链接地址 "超链接描述")
注：名字和描述实际上均可没有

示例：

[知乎](https://www.zhihu.com/)
[有名字方便](https://www.baidu.com/ “这是百度”)

知乎
 有名字方便

网址和Email地址：使用尖括号可以把URL或者email地址变成可点击的链接（使用Typora可以直接复制链接即可，不用尖括号也可以自动识别，如果不希望自动链接URL，则可以通过将URL表示为带反引号的代码来删除该链接。）。

<https://markdown.com.cn>
<fake@example.com>

渲染效果如下：

https://markdown.com.cn
fake@example.com

链接可兼容格式：加粗或斜体等在链接语法前后增加星号。要将链接表示为代码，在方括号中添加反引号。

例如：

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

效果如下：

I love supporting the EFF.
This is the Markdown Guide.
See the section on code

引用样式链接：是一种特殊的链接，它使URL在Markdown中更易于显示和阅读。参考样式链接分为两部分：与文本保持内联的部分以及存储在文件中其他位置的部分，以使文本易于阅读。

链接的第一部分格式：

引用类型的链接的第一部分使用两组括号进行格式设置。第一组方括号包围应显示为链接的文本。第二组括号显示了一个标签，该标签用于指向存储在文档其他位置的链接。

建议在第一组和第二组括号之间包含一个空格。第二组括号中的标签不区分大小写，可以包含字母，数字，空格或标点符号。

以下示例格式对于链接的第一部分效果相同：

[hobbit-hole][1]
[hobbit-hole] [1]

[hobbit-hole][1]

链接的第二部分格式：

引用类型链接的第二部分使用以下属性设置格式：

放在括号中的标签，其后紧跟一个冒号和至少一个空格（例如[label]:）。
链接的URL，可以选择将其括在尖括号中。
链接的可选标题，可以将其括在双引号，单引号或括号中。

以下示例格式对于链接的第二部分效果相同：

[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

可以将链接的第二部分放在Markdown文档中的任何位置。有些人将它们放在出现的段落之后，有些人则将它们放在文档的末尾（例如尾注或脚注）。

不同的 Markdown 应用程序处理URL中间的空格方式不一样。考虑兼容性，尽量使用%20代替空格。

给图片增加链接：需要将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。

例如

[![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)

2、列表

可以将多个条目组织成有序或无序列表。

（1）无序列表：

无序列表用 - + * 任何一种都可以，缩进4空格或按tab键即可实现嵌套（使用Typora用空格方式未实现缩进嵌套）

- 无序列表内容
	+ 无序列表内容
* 无序列表内容

注：- + * 跟内容之间都要有一个空格

效果：

无序列表内容
- 无序列表内容
无序列表内容
列表

注：同一部分最好采用同一个符号做列表

（2）有序列表：

数字加点（英文句号），数字不必按数学顺序排列，但是列表应当以数字 1 起始。（使用Typora未实现任意数字排列，默认按序排列，按tab仍可缩进）

1. 有序列表内容
3. 有序列表内容
2. 有序列表内容

注意：序号跟内容之间要有空格

效果：（使用Typora换行可以自动排序）

有序列表内容
1. 有序列表内容
有序列表内容
- 怎么说

注：列表操作中，体会到Typora与官方语法有差别，需操作体会

（3）任务列表：

任务列表可以创建带有复选框的项目列表。在支持任务列表的Markdown应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格。要选择一个复选框，请在方括号[x]之间添加 x 。

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

呈现的输出如下所示：

Write the press release
Update the website
Contact the media

（4）定义列表：

一些Markdown处理器允许您创建术语及其对应定义的定义列表。要创建定义列表，请在第一行上键入术语。在下一行，键入一个冒号，后跟一个空格和定义。

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.

HTML看起来像这样：

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

呈现的输出如下所示：

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.

3、代码

单行代码：代码之间分别用一个反引号包起来

`代码内容`

转义反引号：

如果要表示为代码的单词或短语中包含一个或多个反引号，则可以通过将单词或短语包裹在双反引号(````)中

代码块：
1.代码之间分别用三个反引号(```)或三个波浪号（~~~）包起来，且两边的反引号单独占一行

```
  代码...
  代码...
  代码...
```

2.使用 4 个空格或者一个制表符（Typora未试验成功）。

    代码...
    代码...
    代码...

示例：

单行代码

`print("hello world!")`

代码块

方式一：

(```)
package main

import "fmt"

func main() {
	fmt.Println("Hello, world. 你好，世界！ ")
}
(```)

方式二、

    package main

    import "fmt"

    func main() {
        fmt.Println("Hello, world. 你好，世界！ ")
    }

效果如下：

单行代码

print("hello world!")

代码块

package main
import "fmt"

func main() {
	fmt.Println("Hello, world. 你好，世界！ ")
}

代码块两种方式显示效果是一样的

语法高亮

代码块要高亮显示，需要在前三个反引号后添加一种语言

示例：

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

效果如下：

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

4、表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行

单元格宽度可以变化，如下所示。呈现的输出将看起来相同。

语法：

|表头|表头|表头|
|---|:--:|---:|
|内容|内容|内容|
|内容|内容|内容|

第二行分割表头和内容。
- 有一个就行，为了对齐，多加了几个
文字默认居左
-两边加：表示文字居中
-右边加：表示文字居右

示例：

|姓名|性别|分数|
|--|:--:|--:|
|小明|男|100|
|小红|女|89|
|小飞|男|88|

效果如下：

可见单元格宽度可以变化，输出看起来相同。

可以在表格中设置文本格式。例如，添加链接，代码（仅反引号（```）中的单词或短语，而不是代码块）和加粗斜体等格式，但不能添加标题，块引用，列表，水平规则，图像或HTML标签等。

此外还可以使用表格的HTML字符代码（|）在表中显示竖线（|）字符。

三、正式进阶

一些用于排版的进阶语法，实际上，需要用到HTML的标签来实现。

1、内嵌 HTML 标签

对于 Markdown 涵盖范围之外的标签，都可以直接在文件里面用 HTML 本身。如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可。

行级內联标签

HTML 的行级內联标签如 <span>、<cite>、<del> 不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用 Markdown 格式，而采用 HTML 标签来格式化。例如：如果比较喜欢 HTML 的 <a> 或 <img> 标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时（例如为文本指定颜色或更改图像的宽度），使用 HTML 标签更方便些。

HTML 行级內联标签和区块标签不同，在內联标签的范围内， Markdown 的语法是可以解析的。

This **word** is bold. This <em>word</em> is italic.

渲染效果如下:

This word is bold. This word is italic.

区块标签

区块元素──比如 <div>、<table>、<pre>、<p> 等标签，必须在前后加上空行，以便于内容区分。而且这些元素的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素，避免在区块标签前后加上没有必要的 <p> 标签。

例如，在 Markdown 文件里加上一段 HTML 表格：

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

请注意，Markdown 语法在 HTML 区块标签中将不会被进行处理。例如，你无法在 HTML 区块内使用 Markdown 形式的*强调*。

HTML 使用注意

出于安全原因，并非所有 Markdown 应用程序都支持在 Markdown 文档中添加 HTML。如有疑问，请查看相应 Markdown 应用程序的手册。某些应用程序只支持 HTML 标签的子集。

对于 HTML 的块级元素 <div>、<table>、<pre> 和 <p>，请在其前后使用空行（blank lines）与其它内容进行分隔。尽量不要使用制表符（tabs）或空格（spaces）对 HTML 标签做缩进，否则将影响格式。

在 HTML 块级标签内不能使用 Markdown 语法。例如 <p>italic and **bold**</p> 将不起作用。

支持原生 HTML 语法，请写内联样式，如下：（设置位置没有成功，有待研究）

橙色居右
橙色居中

2、流程图

MarkDown中的流程图语法叫flow，该语法只有两个注意事项：

定义元素
连接定义好的元素

示例：

(```)flow
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
(```)

注：为了防止转译，前后三个反引号处加了小括号，实际是没有的。这里只是用来演示，实际中去掉两边小括号即可。

效果如下：

复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果：

以下几个实例效果图如下：

1、横向流程图源码格式：

```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
```

2、竖向流程图源码格式：

```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
```

3、标准流程图源码格式：

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

4、标准流程图源码格式（横向）：

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

5、UML时序图源码样例：

```sequence
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
```

6、UML时序图源码复杂样例：

```sequence
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
```

7、UML标准时序图样例：

```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
```

8、甘特图样例：

```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
```

效果图如下：

3、公式

使用

$...$ 或者 $...$ 中的数学表达式将会在行内显示。
$$...$$ 或者 \[...\] 或者 ````math` 中的数学表达式将会在块内显示。

$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$
$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

输出结果为：

$$
like_this
$$

3、特殊使用

注音符号：

Markdown Nice 这么好用，简直是{喜大普奔|hē hē hē hē}呀！（很明显，Typora没有试验成功，还有待探索）

横屏滑动：

通过<![](url),![](url)>这种语法设置横屏滑动滑动片，具体用法如下：

<,,>

标题编号（理解为类似目录的制作）：

许多Markdown处理器支持标题的自定义ID - 一些Markdown处理器会自动添加它们。添加自定义ID允许您直接链接到标题并使用CSS对其进行修改。要添加自定义标题ID，请在与标题相同的行上用大括号括起该自定义ID。

### My Great Heading {#custom-id}

HTML看起来像这样：

<h3 id="custom-id">My Great Heading</h3>

通过创建带有数字符号（#）和自定义标题ID的[标准链接]((/basic-syntax/links.html)，可以链接到文件中具有自定义ID的标题。

Markdown	HTML	预览效果
`[Heading IDs](#heading-ids)`	`<a href="#heading-ids">Heading IDs</a>`	Heading IDs

其他网站可以通过将自定义标题ID添加到网页的完整URL（例如[Heading IDs](https://markdown.com.cn/extended-syntax/heading-ids.html#headid)）来链接到标题。

使用表情：

将表情符号复制并粘贴到Markdown格式的文本中，或者键入emoji shortcodes。

在大多数情况下，您可以简单地从Emojipedia 等来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。

Tip: 如果您使用的是静态网站生成器，请确保将HTML页面编码为UTF-8。

一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾，并包含表情符号的名称。

去露营了！ :tent: 很快回来。

真好笑！ :joy:

呈现的输出如下所示：

去露营了！⛺很快回来。

真好笑！😂

Note: 注意：您可以使用此表情符号简码列表，但请记住，表情符号简码因应用程序而异。有关更多信息，请参阅Markdown应用程序的文档。

4、未完待续~

尚待整理

Typora操作指南

Reference

我是脚注，看到了吗？ ↩︎

posted on 2024-01-18 09:01 南山~南阅读(0) 评论(0) 编辑收藏举报

刷新页面返回顶部

i-nan-shan

公告

一、基础语法

1、标题

2、段落

3、字体

4、引用

5、分割线

6、转义符

7、缩进

二、不算进阶

1、链接

（1）互联网图片

（2）本地图片

（3）超链接

2、列表

（1）无序列表：

（2）有序列表：

（3）任务列表：

（4）定义列表：

3、代码

4、表格

三、正式进阶

1、内嵌 HTML 标签

2、流程图

3、特殊使用

4、未完待续~

Reference