一、Markdown 简介
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。
编写的文档可以导出 HTML 、Word、图像、PDF 等多种格式的文档。
当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛、博客上发表消息。
比较代表性的软件支持为 Typora ,软件官网为:https://www.typora.io
编写的文档后缀为 .md
Typora 软件本质是一个具有 Chrome 内核的浏览器,可以使用 shirt + F12 打开开发者工具。
二、Markdown 常用语法
1. 标题语法
使用 # 号可表示 1-6 级标题,一级标题对应一个 # 号,二级标题对应两个 # 号,以此类推。
注意 # 和文字之间需要至少有一个空格。
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
请在 Typora 编写以上内容进行查看效果
2. 文字显示和分割线
两边使用 *
和 **
分别表示斜体和粗体(也可以使用下划线)
两边使用***
兼有斜体和粗体效果(也可以使用下划线)
两边使用 ~
表示删除线
*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
~~BAIDU.COM~~
效果如下:
斜体文本
粗体文本
粗斜体文本
如果想让文字下面有下划线,需要使用HTML标签<u>
<u>带下划线文本</u>
效果如下:
带下划线文本
在一行中,使用三个型号(*)或者三个横杠(-),然后回车,就能够显示出一行分割线
***
---
效果如下:
3. 列表显示
无序列表使用星号()、加号(+)或是减号(-*)作为列表标记,这些标记后面要添加一个空格,然后再填写内容
* 第1项
* 第2项
* 第3项
+ 第1项
+ 第2项
+ 第3项
- 第1项
- 第2项
- 第3项
效果如下:
- 第1项
- 第2项
- 第3项
有序列表使用数字并加上点(.)号来表示
1. 第1项
2. 第2项
3. 第3项
效果如下:
- 第1项
- 第2项
- 第3项
列表还可以进行嵌套使用
1. 第1项:
- 第1项嵌套的第1个元素
- 第1项嵌套的第2个元素
2. 第二项:
- 第2项嵌套的第1个元素
- 第2项嵌套的第2个元素
效果如下:
- 第1项:
- 第1项嵌套的第1个元素
- 第1项嵌套的第2个元素
- 第二项:
- 第2项嵌套的第1个元素
- 第2项嵌套的第2个元素
4. 区块引用
使用大于号(>),后面紧跟一个空格,然后编写文字,就能展示出区块引用样式
> 天道酬勤
效果如下:
天道酬勤
区块是可以嵌套的,只需要使用多个大于号(>)和空格即可,貌似也没有啥太大的用处
> 第1层引用
> > 第2层引用
> > > 第3层引用
效果如下:
第1层引用
第2层引用
第3层引用
区块中可以使用列表:
> 区块中使用列表
> 1. 第一项
> - aaa
> - bbb
> 2. 第二项
> + ccc
> + ddd
效果如下:
区块中使用列表
- 第一项
- aaa
- bbb
- 第二项
- ccc
- ddd
列表中也可以使用区块
* 第1项
> aaaa
> bbbb
* 第2项
> cccc
> dddd
效果如下:
-
第1项
aaaa
bbbb
-
第2项
cccc
dddd
5. 代码块显示
在文字两边使用反引号(`),就可以表示单行代码片段
`我是代码片段`
效果如下:
我是代码片段
使用至少三个反引号(**`**)或者至少三个波浪线(**~**),就能够表示一个代码块,可以指定具体一种语言(可选)
```javascript
$(document).ready(function () {
alert(‘Hello World‘);
});
效果如下:
$(document).ready(function () {
alert(‘Hello World‘);
});
6. 超链接显示
超链接的使用方式如下:
[链接名称](链接地址)
或者
<链接地址>
例如:
我是百度网址的超链接[百度网站](https://www.baidu.com/)
这是一个直接的超链接 <https://fanyi.baidu.com/>
效果如下:
我是百度网址的超链接百度网站
这是一个直接的超链接 https://fanyi.baidu.com
我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:
我是百度网址的超链接[百度网站][mylink]
[mylink]: https://www.baidu.com
效果如下:
我是百度网址的超链接百度网站
7. 图片的显示
图片的使用格式为:
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
开头一个感叹号 !
接着一个方括号,里面放上图片的替代文字
接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的title属性的文字
例如:
![百度图片](https://www.baidu.com/img/flexible/logo/pc/result.png "万能搜索引擎")
效果如下:
Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 标签
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" width="150">
效果如下:
8. 表格的显示
制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行
我们可以设置表格的对齐方式:
- -: 设置内容和标题栏居右对齐。
- :- 设置内容和标题栏居左对齐。
- :-: 设置内容和标题栏居中对齐。
例如:
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
效果如下:
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
左对齐单元格 | 右对齐单元格 | 居中对齐单元格 |
左对齐单元格 | 右对齐单元格 | 居中对齐单元格 |
一般情况下,这种使用表格的方式不太实用
三、Markdown 其它
不在 Markdown 涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。
因为本质上 Markdown 就是 html 语法的另外一种快捷文本编辑方式。
在 Typora 软件中,可以使用快捷键 Ctrl + / 来查看所编辑文档的源码模式。
使用 Shift + F12 可以打开 开发者窗口 ,用于查看所编辑文档的 HTML 源码。
Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符。
Markdown 使用反斜杠转义特殊字符,支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
当然 Markdown 还支持 流程图,时序图,甘特图 等文本语法表示,这里就不介绍了。因为语法比较复杂,我个人感觉不太实用,还是实用专门绘图工具绘制完,然后截图放到 Markdown 文档中比较方便。