Markdown 使用方法
前序
Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。
由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,当前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如 CSND、GitHub、简书、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge等,甚至还能被使用来撰写电子书。
在CSDN中也支持markdown的使用。如果想要快捷的编辑出排版整洁的博文,个人认为markdown是个不错的选择。
本文使用markdown编辑,将主要讲解 Markdown 的语法及使用方法。
Typora 官网:https://typora.io/
参考书籍:《了不起的Markdown》
一、标题
-
使用#号标记
# 一级标题 ## 二级标题 ### 三级标题
-
使用=和-标记一级和二级标题
这是一级标题 === 这是二级标题 ---
二、段落格式
1. 段落
-
段落换行
-
段落的换行是使用两个以上空格加回车
-
当然也可以在段落后面使用一个空行来表示重新开始一个段落
-
-
段落居中 | 左对齐 | 右对齐
- 居中:
<center>诶嘿</center>
- 左对齐:
<p align="left">诶嘿</p>
- 右对齐:
<p align="right">诶嘿</p>
2. 字体
-
斜体
*斜体文本* _斜体文本_
-
粗体
**粗体文本** __粗体文本__
-
粗斜体
***粗斜体文本*** ___粗斜体文本___
-
下划线
下划线可以通过 HTML 的
<u>
标签来实现:<u>下划线</u>
3. 分隔线
你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:
*** (最少使用三个及其以上的*)
* * * (插入空格)
- - - (减号)
---------- (底线)
4. 删除线
如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可,
例如BAIDU.COM :
~~BAIDU.COM~~
5. 脚注
脚注是对文本的补充说明。Markdown 脚注的格式如下:
[^要注明的文本]
以下实例演示了脚注的用法:
# 创建脚注格式类似这样 [^RUNOOB]:注释词
[^qzp]: qzp牛批 - - 这里称之为qzp广场 全体起立!
结果显示:
创建脚注格式类似于这样 1
三、列表
1. 常规列表
Markdown 支持有序列表和无序列表。
-
无序列表
使用星号(
*
)、加号(+
)或是减号(-
)作为列表标记:
```
* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项
```
- 有序表
使用数字并加上 . 号来表示,如:
1. 第一项
2. 第二项
3. 第三项
2. 列表嵌套
列表嵌套只需在子列表中的选项添加四个空格即可:
示例代码:
1. 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
效果展示:
1. 第一项:
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项:
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
四、区块
1. 常规区块
Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号:
-
示例代码:
> 区块1引用 > 区块2引用 > 区块3引用
-
效果展示:
区块1引用
区块2引用
区块3引用
2. 区块嵌套
区块是的引用也是可以嵌套的,一个 > 符号是最外层,两个 > 符号是第一层嵌套,以此类推。
示例代码:
> 最外层
> > 第一层嵌套
> > > 第二层嵌套
效果展示:
最外层
第一层嵌套
第二层嵌套
3. 区块中使用列表
区块中使用列表实例如下:
示例代码:
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项
效果展示:
区块中使用列表
- 第一项
- 第二项
- 第一项
- 第二项
- 第三项
4. 列表中使用区块
如果要在列表项目内放进区块,那么就需要在 > 前添加四个空格的缩进。
区块中使用列表实例如下:
- 第一项
> qzpnb
> 全体起立哈哈哈
- 第二项
效果展示:
- 第一项
qzpnb
全体起立哈哈 - 第二项
五、代码
1. 函数|代码片段
如果是段落上的一个函数或片段的代码可以用反引号把它包起来(`),例如:
示例代码:
这里显示`printf()` 函数
这里显示printf()`函数`
效果展示:
这里显示printf()
函数
这里显示printf()函数
2. 代码区块
- 常用表示
你可以用 ` ````包裹一段代码,并指定一种语言(也可以不指定):
代码展示
```javascript $(document).ready(function () { alert('RUNOOB'); });
效果展示
$(document).ready(function () { alert('RUNOOB'); });
- 其他表示
代码区块使用4 个空格
或者一个制表符(Tab 键)
。
代码展示
<?php echo function echo }
效果展示
echo function echo }
六、链接
1. 直接使用
直接引用链接地址的使用方法如下:
<链接地址>
-
示例代码:
<https://quincyper.github.io>
-
显示结果
2. 文本上链接
常规的文本上使用超链接的使用方法如下:
[链接名称](链接地址)
-
示例代码:
这是一个链接 [qzp的博客](https://quincyper.github.io)
-
显示结果
这是一个链接 qzp的博客
3. 高级链接
类似于使用脚注的方式进行链接。
我们可以通过变量来设置一个链接,变量赋值在文档末尾进行:
[链接名称][脚注]
[脚注]:网址
- 示例代码
这个链接用 1 作为网址变量 [Google][1]
这个链接用 quincyper 作为网址变量 [qzp的博客][quincyper]
然后在文档的结尾为变量赋值(网址)
[1]: http://www.google.com/
[quincyper]: http://quincyper.github.io/
七、图片
1. 常规使用
常规使用,Markdown 图片语法格式如下:
![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")
注:
- 开头一个感叹号 !
- 接着一个方括号,里面放上图片的替代文字
- 接着一个普通括号,里面放上图片的网址,最后还可以用引号包住并加上选择性的 'title' 属性的文字
- 示例代码
![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)
![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")
-
显示结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HA8mLKl9-1585279130200)(http://static.runoob.com/images/runoob-logo.png “RUNOOB”)]
2. 链接网址使用
同样的也可以用类似于脚注的方式对图片网址使用变量。
[文本文字][脚注].
[脚注]: 含有图片的网址
- 示例代码
这个链接用 1 作为网址变量 [RUNOOB][1].
然后在文档的结尾为变量赋值(网址)
[1]: http://static.runoob.com/images/runoob-logo.png
-
显示结果
这个链接用 2 作为网址变量 RUNOOB.
然后在文档的结尾为变量赋值(网址)
注:
Markdown 还没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的 <img> 标签。
例如:
<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">
八、表格
1.表格建立
Markdown 制作表格使用 |
来分隔不同的单元格,使用 -
来分隔表头和其他行。
语法格式如下:
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
以上代码显示结果如下:
表头 | 表头 |
---|---|
单元格 | 单元格 |
单元格 | 单元格 |
2.表格对齐方式
我们可以按照以下方式来设置表格的对齐方式:
-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。
- 示例代码
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
- 显示结果
左对齐 | 右对齐 | 居中对齐 |
---|---|---|
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
九、其他技巧
正在学习ing…
持续更新,敬请期待!
1. HTML元素
2. 转义
3. 公式
4. 流程图|时序图(顺序图)|甘特图
参考
Markdown 教程| 菜鸟教程 https://www.runoob.com/markdown/md-tutorial.html
qzp牛批 - - 这里称之为qzp广场 全体起立! ↩︎