百科狗Markdown 语法教程 - vue3 项目实战
Markdown 语法教程
Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。Markdown 编写的文档后缀为.md,.markdown。
Markdown 能被使用来撰写电子书，如：Gitbook。当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。例如：GitHub、简书、reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等。
- Markdown 是内容写作工具。Markdown 语法由一些符号所组成，这些符号经过精挑细选，其作用一目了然，其目标是实现「易读易写」。Markdown 语法的目标是：成为一种适用于网络的书写语言。本身并不支持文字排版，理论上它只是指出哪些内容是表格、哪些内容是标题、哪些是正文图片代码超链
- Markdown 是一种书写的格式，HTML 是一种发布的格式，Markdown 是兼容 HTML。Markdown 的格式语法只涵盖纯文本可以涵盖的范围。不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写，可以将直接使用 Markdown 语法和 HTML 的标签混合进行使用，因为最后都会转换成 HTML。但要注意的是，在 HTML 区块标签间的 Markdown 格式语法将不会被处理。
VSCode默认集成了 Markdown 文档编辑插件，支持预览。支持高亮 Markdown 的语法。安装Markdown Preview Enhanced插件来实现更强大的功能。
标题
使用=标记一级标题，-标记二级标题。任何数量标记都可以。
This is H1 ======= This is H2 ----------由于分割线也是
----，因此在使用分割线时，一定要空一行，不然会把上方的文字识别为第二阶标题。使用#号可表示 1-6 级标题，一级标题对应一个# 号，二级标题对应两个# 号，以此类推。
# This is H1 ## This is H2 ### This is H3 #### This is H4 ##### This is H5 ###### This is H6
字体
使用*（星号）或者_（下划线），标记字体。单个表示斜体，两个表示加粗，三个表示斜体加粗。
*斜体文本* _斜体文本_ **粗体文本** __粗体文本__ ***粗斜体文本*** ___粗斜体文本___
使用~~（双波浪线），标记删除线。
~~带有删除线的文本~~强调也可以直接插在文字中间，但是如果你的*和_两边都有空白的话，它们就只会被当成普通的符号。如果要在文字前后直接插入普通的星号或底线，你可以用反斜线\。
分割线
你可以在一行中用三个以上的*（星号）、_（下划线）、-（减号）建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。
*** * * * --- - - - __________ ----------
段落
Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。
Markdown 段落是由一个或多个连续的文本行组成，它的前后要有一个以上的空行（空行的定义是显示上看起来像是空的，便会被视为空行。比方说，若某一行只包含空格和制表符，则该行也会被视为空行）。普通段落不该用空格或制表符来缩进。我们在两个不同的文字块之间，一定要空行以示区分，不然就会被归入同一文字块中。
Markdown 允许段落内的强迫换行（插入换行符）。
引用
区块引用是在段落开头使用>符号，然后后面紧跟一个空格。
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, > consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. > Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse > id sem consectetuer libero luctus adipiscing.
Markdown 也允许你偷懒只在整个段落的第一行最前面加上>：
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.
区块引用是可以嵌套的，一个>符号是最外层，两个>>符号是第一层嵌套，以此类推：
> 最外层 >> 第一层嵌套 >>> 第二层嵌套
列表
无序列表，使用星号*（星号）、+（加号）或是-（减号）标记，这些标记后面要添加一个空格，然后再填写内容：
* 第一项 * 第二项 * 第三项 + 第一项 + 第二项 + 第三项 - 第一项 - 第二项 - 第三项
有序列表，使用数字加上.（英文半角句号）标记，这些标记后面要添加一个空格，然后再填写内容：
1. 第一项 2. 第二项 3. 第三项
列表嵌套，只需在子列表中的选项前面添加两个或四个空格即可：
1. 第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
要让列表看起来更漂亮，你可以把内容用固定的缩进。
* Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi,
viverra nec, fringilla in, laoreet vitae, risus.
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
Suspendisse id sem consectetuer libero luctus adipiscing
列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：
1. This is a list item with two paragraphs. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam hendrerit
mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum
sit amet velit.
2. Suspendisse id sem consectetuer libero luctus adipiscing.
列表中使用区块引用。如果要在列表项目内放进区块引用，那么就需要在>前添加四个空格的缩进。
* 第一项
> 菜鸟教程
> 学的不仅是技术更是梦想
* 第二项
表格
制作表格，使用|来分隔不同的单元格，使用-来分隔表头和其他行。
| 表头 | 表头 | | ----- | ---- | | 单元格 | 单元格 | | 单元格 | 单元格 |
我们可以设置表格的对齐方式：
- -:：设置内容和标题栏居右对齐。
- :-：设置内容和标题栏居左对齐。
- :-:：设置内容和标题栏居中对齐。
| 左对齐 | 右对齐 | 居中对齐 | | :-----| ----: | :----: | | 单元格 | 单元格 | 单元格 | | 单元格 | 单元格 | 单元格 |
代码
如果是段落上的一个函数或片段的代码可以用`（反引号），把它包起来。
`printf()` 函数
代码区块，使用 4 个空格或者一个制表符（Tab 键）。
$(document).ready(function () {
alert('RUNOOB');
});
代码区块，用```包裹一段代码，后面可以注明你的代码类型（标明语言），可以产生相应的代码高亮。也可以不指定
```javascript
$(document).ready(function () {
alert('RUNOOB');
});
```
链接
行内式的链接，只要在[]（方块括号），后面紧接着()（圆括号），并插入网址链接。注意方括号和圆括号之间一定不能有空格，如果你还想要加上链接的 title 文字，只要在网址后面，用""（双引号）把 title 文字包起来即可。
[This link](http://example.net/) has no title attribute. This is [an example](http://example.com/ "Title") inline link.
也可以用 HTML 语言的 a 标签。
;This link>/a>
参考式的链接，我们可以通过变量来设置一个链接，变量赋值在文档末尾进行
This is [an example][id] reference-style link. # 接着，在文件的任意处，你可以把这个标记的链接内容定义出来: [id]: http://example.com/ "Optional Title Here"
链接内容的形式为：方括号（前面可以选择性地加上至多三个空格来缩进），里面输入链接辨别标志（可以有字母、数字），接着一个:（冒号），接着一个以上的空格或制表符，接着链接的网址，选择性地接着 title 内容（可以用单引号、双引号或是括弧包着）
还可以直接用链接名称的方式写：
I get 10 times more traffic from [Google][] than from [Yahoo][] or [MSN][]. [google]: http://google.com/ "Google" [yahoo]: http://search.yahoo.com/ "Yahoo Search" [msn]: http://search.msn.com/ "MSN Search"
自动链接形式来处理网址和电子邮件信箱，只要是用（尖括号）包起来， Markdown 就会自动把它转成链接。
图片
行内式的图片语法：
开头!（感叹号），然后是[]（方括号），里面放上图片的 alt 描述文字，然后是()（小括号），里面放上图片的网址或路径（可以是相对路径或绝对路径），然后是可以用""（引号）包住的选择性的 title文字。
 
参考式的图片语法：
![Alt pic][id] [id]是图片参考的名称，图片参考的定义方式则和连结参考一样： [id]: url/to/image "Optional title attribute"
这个链接用 1 作为网址变量 [RUNOOB][1]. 然后在文档的结尾为变量赋值（网址） [1]: http://static.runoob.com/images/runoob-logo.png
支持的 HTML 元素
不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。
使用 Ctrl+Alt+Del 重启电脑
转义
Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用\（反斜杠），转义特殊字符：
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
**文本加粗** \*\* 正常显示星号 \*\*
公式
Markdown Preview Enhanced 使用 KaTeX 或者 MathJax 来渲染数学表达式。
KaTeX 拥有比 MathJax 更快的性能，但是它却少了很多 MathJax 拥有的特性。你可以查看 KaTeX supported functions/symbols 来了解 KaTeX 支持那些符号和函数。
默认下的分隔符：
$...$或者\(...\)中的数学表达式将会在行内显示。$$...$$或者\[...\]或者```math中的数学表达式将会在块内显示。
$$
\begin{Bmatrix}
a & b \\
c & d
\end{Bmatrix}
$$
$$
\begin{CD}
A @>a>> B \\
@VbVV @AAcA \\
C @= D
\end{CD}
$$
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
