本篇教程使用Typora软件,MarkDown语法编写,文中部分图片,样式效果可能显示不正常,如果需要对应的PDF文档,可在下方评论处寻找链接下载。欢迎大家指出不足之处,共同学习进步,谢谢。
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。
Markdown具有一系列衍生版本,用于扩展Markdown的功能(如表格、脚注、内嵌HTML等等),这些功能原初的Markdown尚不具备,它们能让Markdown转换成更多的格式,例如LaTeX,Docbook。Markdown增强版中比较有名的有Markdown Extra、MultiMarkdown、 Maruku等。这些衍生版本要么基于工具,如Pandoc;要么基于网站,如GitHub和Wikipedia,在语法上基本兼容,但在一些语法和渲染效果上有改动。^ 1
MarkDown有许多不同的版本,其语法在不同的编辑器和解析器中不尽相同。本篇说明使用Typora编辑,使用的是GFM标准( github flavored markdown ),即Github风格的标准。
MarkDown支持Html语法,会对Html标签进行解析。如果对MarkDown自带的功能不够满意,想要更丰富的字体以及大小适当的图片,可以选择使用在MarkDown文本中使用Html标签实现。
下面罗列一下各平台的MarkDown编辑器,排名不分先后^ 2
我目前使用过VScode+插件和Typora两款MarkDown编辑软件
两者相比,我认为Typora更简洁好用
VScode | Typora | MarkDownPad2 |
---|---|---|
HBuliderX | Atom | CuteMarkEd |
Miu | RStudio |
VScode | Typora | Atom |
---|---|---|
ReText | UberWriter | Rstudio |
VScode | HBuilderX | Typora |
---|---|---|
Atom | Byword | Mou |
MacDown | RStudio |
MarkDown标题分为两种形式
类SeTex形式,只支持两级标题
在文字下方添加等号‘=’为一级标题,在文字下方添加减号‘-’为二级标题
类Atx形式
在文字前方添加不同数量的井号‘#‘,表示不同级别的标题
一个等号为一级标题,六个等号为六级标题
GFM标准,一共支持六级标题,通过往标题前面加不同数量的井号#实现
Typora通过设置是否开启严格模式,可以选择支持哪种类型的标题
注意井号#和标题内容之间需要有一个空格分隔,否则无效
MarkDown代码示例:
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
原生效果展示:
如果后续想要给标题标号,以及自动生成目录,可以参照后续的教程
按换行键建立新的一行
可在行尾插入打断线,禁止向后插入
按换行键建立新的一行
大多数MarkDown语法,都支持将字体加粗,倾斜,加下划线,删除线操作
Typora中还支持字体高亮显示,但需要另外设置,默认设置不开启
开启方法见后面的教程
在文本前后加上一个星号‘*’,或者一个下划线,就可将符号内的文本字体进行倾斜处理
Typora软件中可使用快捷键 Ctrl+I 将字体倾斜
一般使用倾斜字体表示专业词汇
MarkDown代码示例:
*倾斜*
_倾斜_
效果展示:
倾斜
倾斜
在文本前后加上两个星号‘*’,或者两个下划线,就可将符号内的文本字体进行加粗处理
Typora软件中可使用快捷键 Ctrl+B 将字体加粗
MarkDown代码示例:
**加粗**
__加粗__
效果展示:
加粗
加粗
在文本前后加上三个星号‘*’,或者三个下划线,就可将符号内的文本字体进行倾斜加粗处理
MarkDown代码示例:
***倾斜加粗***
___倾斜加粗___
效果展示:
倾斜加粗
倾斜加粗
在文本前后加上两个等号‘=’,就可将符号内的文本字体进行高亮处理
MarkDown代码示例:
==高亮==
效果展示:
高亮
在文本前后加上两个波浪线‘~’,就可为符号内的文本添加删除线
Typora软件中可使用快捷键 Alt+Shift+5 为文本添加删除线
MarkDown代码示例:
~~删除线~~
效果展示:
删除线
使用Html的标签将文本内容包裹起来,就可为包裹部分的内容添加下划线
GFM会忽略词中的下划线,因为下划线经常被用在代码和名字中
Typora软件中可使用快捷键 Ctrl+U 添加下划线
MarkDown代码示例:
下划线
效果展示:
下划线
MarkDown支持插入代码片,指定代码语言后,对不同语言会有不同的显示效果
在代码片中的代码,包括MarkDown代码不会被转换,因此只会以文本的方式显示出来
在代码片中的特殊符号,例如‘&’,‘<‘,‘>’不会转义,这样就更容易插入Html源码
因此很容易使用MarkDown语法编撰MarkDown语法教程(本例教程即使用Typora软件,用MarkDown语法编写)
在其他的MarkDown语法教程中,指出插入代码片有三种方法,Typora只支持其中两种
在Typora中添加代码片有两种方式
MarkDown代码示例:
效果展示:
这是一条代码片示例
三倒引号,适用于插入成段代码(Typora快捷键为Ctrl+Shift+K)
在三个倒引号后面可以加上插入代码的语言类型
加上以后,Typora软件就会对语言进行特殊显示,会对代码片段中的关键字进行高亮显示
如果不加,那只是以普通文本字体显示
MarkDown代码示例:
效果展示:
#include
int main()
{
printf("Hello,World\n");
}
#include
int main()
{
printf("Hello,World\n");
}
第三种:在其他的编辑器中(例如我之前使用过的VScode+插件)还支持使用缩进插入代码片
在代码前面加上四个空格或者一个制表符,就生成一个代码片
因此可统一选中插入代码片中的代码,在统一缩进后插入代码片
在LaTex代码前后加上两个美元符号$就可以插入数学公式代码块
在Typora->偏好设置->MarkDown中勾选上内联公式
即可前后只使用一个美元符,输入LaTex内联数学公式
MarkDown代码示例:
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
效果显示:
V 1 × V 2 = ∣ i j k ∂ X ∂ u ∂ Y ∂ u 0 ∂ X ∂ v ∂ Y ∂ v 0 ∣ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} V1×V2=∣∣∣∣∣∣i∂u∂X∂v∂Xj∂u∂Y∂v∂Yk00∣∣∣∣∣∣
MarkDown代码示例:
$$\lim_{x \to \infty} \exp(-x) = 0$$
效果展示:
lim x → ∞ exp ( − x ) = 0 \lim_{x \to \infty} \exp(-x) = 0 x→∞limexp(−x)=0
MarkDown中插入链接有三种方式,专业点把前面两种方式成为行内式
和参考式
,我更习惯于称之为基本语法格式,和变量插入方式。变量插入方式即在后面设定一个标记,链接到文字后面任意位置中拥有同样标记处所表示的内容
基本语法是[]()
MarkDown代码示例:
[百度](http://baidu.com "你要点击吗")
效果展示:
百度
基本语法
[][标记]
[匹配的标记]:链接地址
有些MarkDown编辑器或者解释器需要标记和匹配的标记之间,需要两者之间有分隔,至少一条空格
MarkDown代码示例:
Markdown 支持以比较简短的自动链接形式来处理网址和电子邮件信箱,只要是用尖括号包起来, Markdown 就会自动把它转成链接 。对于标准的URL,会自动识别,自动会转换为链接
MarkDown代码示例:
http://baidu.com
<[email protected]>
[email protected]
效果展示:
http://baidu.com
http://baidu.com
[email protected]
[email protected]
MarkDown中能够插入图片,图片可以来源于本地,也可以来源于网络
Typora软件中可以直接拖入图片
插入方式基本分为两种
这里把MarkDown语法插入图片方式细分为两种,但其基本语法是一致的
基本语法格式是 ![]()
插入图片基本的MarkDown语法格式为! [alt 属性文本] (图片地址 “可选标题”)
(Typora快捷键为Ctrl+Shift+I)
MarkDown代码示例:
![图片示例](https://raw.githubusercontent.com/YukiLx/MyPictureBed/master/img/MarkDown%E6%95%99%E7%A8%8B%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%871.png" 这是一个图片标题示例")
效果展示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vD3XaOue-1580441630373)(https://raw.githubusercontent.com/YukiLx/MyPictureBed/master/img/MarkDown%E6%95%99%E7%A8%8B%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%871.png"这是一个图片标题示例")]
图片来源有三种
和前面链接插入的方式相似,其基本格式是
![alt 属性文本][变量]
[变量]:链接地址
变量为唯一标识符,标识这个图片标签。与之匹配的变量对一般放在末尾,链接地址可以放图片的Base64编码。这种方式好处就是能够有意义的图片变量名,对图片进行统一管理,比较方便进行图片的更换工作
MarkDown默认插入图片的方式不能够设置图片的宽和高,如果需要设置,可以使用Html的标签,在标签内对图片的样式样式进行限定。
代码示例:
<img src="https://raw.githubusercontent.com/YukiLx/MyPictureBed/master/img/MarkDown%E6%95%99%E7%A8%8B%E6%8F%92%E5%85%A5%E5%9B%BE%E7%89%871.png" width="200px" heigh="200px" />
效果展示:
MarkDown支持使用符号插入表格
Typora软件中使用Ctrl+T插入表格
基本语法
|表头1|表头2|表头3|
|:-|-:|:---:|
|内|内|内|
|容|容|容|
在Typora软件中简单输入表头以后,就会自动渲染生成表格,不需要后面的操作,但语法知识还是需要知道的
MarkDown代码示例:
|表头1|表头2|表头3|
|:-|:-:|-:|
|内容|内容|内容|
|内容|内容|内容|
效果展示:
表头1 | 表头2 | 表头3 |
---|---|---|
内容 | 内容 | 内容 |
内容 | 内容 | 内容 |
MarkDown支持三种列表,其中任务列表可做ToDo List
在本文前加上 星号,加号,减号,然后加上一个空格,就可以生成一个列表
MarkDown代码示例:
* 无序列表1
+ 无序列表2
- 无序列表3
效果展示:
有序列表,即列表前面有数字编号
在文本前面加上数字和点号,再加上一个空格,就可以生成一个有序列表
MarkDown代码示例:
1. 有序列表1
2. 有序列表2
3. 有序列表3
效果展示:
注:有序列表数字的编号,只在意第一个数字,后面列表前面的数字不关心,始终是以第一个数字为起点,以1为步长递增(这在Typora软件中无效,在VScode中测试有效,两者标准不同)
基本语法
- [ ] 未完成任务
- [x] 完成任务
注:横线,方括号,文本相互之间的三个空格都不可缺少
表示完成任务则在方括号中填入x即可,代替原来空格的位置
MarkDown中的标记区块类似于Email中的引用方式,使用>就会建立一个区块,把文字包括起来
按换行键换行,双换行键跳出
在文字前使用一个>,就会生成一个区块
MarkDown代码示例:
> 这是一个区块例子
效果展示:
这是一个区块例子
当有一个段落中有多行文字时,可以为每行文字前面加上>,也可以在只在段落最前面加上(这个适用于编辑后在渲染,而Typora是实时渲染,只需要在文本前面加一个尖括号即可)
区块中可以嵌套区块,需要根据层次加上不同数量的>。一般为了表示层次关系,可以在低级区块前面加上四个空格,表示区块层次的划分。当然不加空格时,也能够识别出区块的层次关系 。
MarkDown代码示例:
> 区块1
>> 区块2
>>> 区块3
或者
> 区块1
>> 区块2
>>> 区块3
效果展示:
区块1
区块2
区块3
区块内可以使用使用其他的MarkDown语法,例如标题,列表等。使用这些元素时, 记得根据防止区块的层次不同,在前面放置不同个数的>
MarkDown代码示例:
> 代码示例
> + 无序列表
> 1. 有序列表
效果展示:
代码示例
- 无序列表
- 有序列表
MarkDown可以给文字添加脚注,一般脚注放在本页末尾或者整篇文章末尾
基本语法:
[^id]
[^id]:脚注的文本
MarkDown代码示例:
这是一个脚注示例[^footnote1][^footnote2]
[^footnote1]:脚注示例1
[^footnote2]:脚注示例2
效果展示:
这是一个脚注示例12
页面内跳转有多种实现方法,设置好以后需要使用Ctrl+点击的方式跳转
**第一种:**类似插入链接的方式[]()
只不过现在[ ]中放显示的内容,( )中放跳转到的标题,即锚点
锚点是一个井号+标题名称,无论几级标题都使用一个井号,标题中的空格在设置跳转链接时可使用横线替代
如果页面中重名的标题,那么将会跳转到该名字标题第一次出现的地方,无论几级标题
MarkDown代码样式:
[跳转到MarkDown简介](##MarkDown简介)
效果展示:
跳转到MarkDown简介
这种方式还有一种参考式
代码示例:
[显示的文字][参考标志符]
[与之配对的参考标志符]:#目标内容+可选标题
效果展示:
跳转到MarkDown语法
这种参考式与前面插入图片和插入链接的变量插入方法一样,与上面插入锚点跳转方法一致
只不过使用变量,或者是标志符,把跳转的目标位置(#目标位置)放在别处
a标签中href属性填跳转的标题锚点,成对a标签中的文本为显示的内容
MarkDown代码示例:
效果展示:
跳转到字体
**第三种:**跳转到文中任意位置
需要在跳转的地方增加一个a标签,并使用name属性命名,相当于添加一个锚点
然后在使用a标签使用上面两种方法跳转
代码示例:
<a name='锚点'>锚点a>
<a href='#锚点'>跳转到锚点a>
或者
<a name='锚点'>锚点a>
[跳转到锚点](#锚点)
**第四种:**在浏览器页面中进行跳转
以上方法在浏览器界面中无法进行跳转,如果要实现跳转,则需要在跳转的地方增加一个a标签,使用 id 属性定义名字
在使用[]()
方式跳转 或 a标签+href属性
代码示例:
<a id="titleA">titleAa>
[toA](#titleA)
或者
<a id="titleA">titleAa>
<a href="titleA">toAa>
在Typora软件中编写MarkDown文档时,将 id 属性改为 name 属性以后同样可以使用
总而言之,如果想要跳转到标题,或者文中其他位置,需要有一个锚点
标题本身就是一个锚点,如果是文中位置,需要使用a标签添加一个锚点后才能跳转
方法汇总
[]()
方法,跳转到文档内标题[]()
或者a标签href属性,跳转到文档内任意位置[]()
和a标签+href属性都可以成功跳转
前三种方法进行MarkDown文档页内跳转,最后一种进行浏览器页面 跳转
MarkDown中使用了大量的特殊符号,来表示一些特殊意义
如果要以普通格式输出这样的特殊符号,需要在符号前面加反斜线\表转义
Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号
如果文章内使用了不同层次的标题,那么可以在文章中加入[toc]
自动插入目录。目录会根据文章内容自动更新。Typora软件默认样式的目录是不带数字的,如果需要数字,需要进行额外设置
详情可见4
三个星号或者三个减号连在一起以后换行,就是一条分割线
MarkDown代码示例:
***
---
效果展示:
Typora支持输入Emoji表情
在两个冒号之间输入表情的关联词,就可以输入Emoji表情
MarkDown代码样式
:smile:
效果展示:
Typora支持sequence, flowchart 和 mermaid等图标,需要则可以在设置中启用此功能
具体语法在这里就不做过多阐述,需要的话可以参考官网的参考文档
Draw-Diagrams-With-Markdown
以下功能需要进行额外设置
打开软件菜单栏中的文件–>偏好设置–>MarkDown标签
把MarkDown扩展语法中需要的功能勾选上,这样就可使用扩展语法
开启高亮以后,可以在文本前后加两个等号,高亮扩中的文本
MarkDown代码示例:
==高亮==
效果展示:
高亮
开启以后,可以使用符号显示出上标和下标
文本前后加两个^,扩中的内容就会变为上标
文本前后加两个~,扩中的内容就会变为下标
MarkDown代码示例:
x^2^=4
H~2~O
效果展示:
x2=4
H2O
可以使用Html标签,插入一些MarkDown语法不支持的功能
例如:
还可以进行更高级的操作
<iframe height='265' scrolling='no' title='Fancy Animated SVG Menu' src='http://codepen.io/jeangontijo/embed/OxVywj/?height=265&theme-id=0&default-tab=css,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>iframe>
效果展示:
使用Html的 details 标签可实现内容的收缩和展开
因为使用了Html标签,因此这个功能在文档转为PDF格式以后会失效
summary:折叠语法展示的摘要
details:折叠语法标签
pre:以原有格式显示元素内的文字是已经格式化的文本。文字需要放在p标签内
code:指定代码范例。
代码示例:
<details>
<summary>点击查看详细内容summary>
<p> - 测试 测试测试p>
<pre><code>
for i in a:
print(i)
code>pre>
details>
效果展示:
点击查看详细内容- 测试 测试测试
for i in a:
print(i)
在Typora软件菜单栏
按文件–>偏好设置–>外观–>打开主题文件
打开主题文件夹
创建一个名为base.user.css的文件
在文件内编写一下CSS代码后重启Typora软件,即可实现Typora目录自动进行数字编号
这里的设置是从一级标题开始编号,如果觉得一级标题字体比较大,可以修改代码从其他级别标题位置开始标号
/** initialize css counter */
#write, .sidebar-content,.md-toc-content {
counter-reset: h1
}
#write h1, .outline-h1, .md-toc-item.md-toc-h1 {
counter-reset: h2
}
#write h2, .outline-h2, .md-toc-item.md-toc-h2 {
counter-reset: h3
}
#write h3, .outline-h3, .md-toc-item.md-toc-h3 {
counter-reset: h4
}
#write h4, .outline-h4, .md-toc-item.md-toc-h4 {
counter-reset: h5
}
#write h5, .outline-h5, .md-toc-item.md-toc-h5 {
counter-reset: h6
}
/** put counter result into headings */
#write h1:before,
h1.md-focus.md-heading:before,
.outline-h1>.outline-item>.outline-label:before,
.md-toc-item.md-toc-h1>.md-toc-inner:before{
counter-increment: h1;
content: counter(h1) " "
}
#write h2:before,
h2.md-focus.md-heading:before,
.outline-h2>.outline-item>.outline-label:before,
.md-toc-item.md-toc-h2>.md-toc-inner:before{
counter-increment: h2;
content: counter(h1) "." counter(h2) " "
}
#write h3:before,
h3.md-focus.md-heading:before,
.outline-h3>.outline-item>.outline-label:before,
.md-toc-item.md-toc-h3>.md-toc-inner:before {
counter-increment: h3;
content: counter(h1) "." counter(h2) "." counter(h3) " "
}
#write h4:before,
h4.md-focus.md-heading:before,
.outline-h4>.outline-item>.outline-label:before,
.md-toc-item.md-toc-h4>.md-toc-inner:before {
counter-increment: h4;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) " "
}
#write h5:before,
h5.md-focus.md-heading:before,
.outline-h5>.outline-item>.outline-label:before,
.md-toc-item.md-toc-h5>.md-toc-inner:before {
counter-increment: h5;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) " "
}
#write h6:before,
h6.md-focus.md-heading:before,
.outline-h6>.outline-item>.outline-label:before,
.md-toc-item.md-toc-h6>.md-toc-inner:before {
counter-increment: h6;
content: counter(h1) "." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) " "
}
/** override the default style for focused headings */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
color: inherit;
border: inherit;
border-radius: inherit;
position: inherit;
left:initial;
float: none;
top:initial;
font-size: inherit;
padding-left: inherit;
padding-right: inherit;
vertical-align: inherit;
font-weight: inherit;
line-height: inherit;
}
脚注示例1 ↩︎
脚注示例2 ↩︎