markdown语法介绍

We believe that writing is about content, about what you want to say ,

not about fancy formatting.

我们坚信写作写的是内容，所思所想，而不是花样格式

—Ulysses for Mac

我们始终相信，信息的传递是交流过程中的头等大事，markdown使我们得以尽可能高效地写出自己心中所想的文字，格式的美观是相对次要的，更何况markdown的格式简洁而美观。

---

基于typora的markdown语法介绍

说是markdown语法介绍，其实是基于typora，应用于hexo的md文档编辑经验语法罗列，以作快速入门和备忘

1.首先是标题

首先是我们的口号

typora，书写即美学

markdown有着出色且简单易懂的标题分级

首先是格式，markdown语法中对标题等级的描述是#符号的个数

具体形式为 #(一个空格)title

示例：

一级标题 # title
二级标题 ## subtitle
三级标题 ### subsubtitle
。。。
六级标题 ###### subsubsubsubsubtitle

。。。

####### sub

如上所示markdown最多只支持六级标题

tips

一二级标题自带分割线

六级标题颜色变浅

标题的使用可以起到提纲挈领的作用，还能在文章中设置锚点，在文章内快速转到

2. 列表

列表分为有序列表和无序列表

也就是word中常说的项目符号

有序列表就是用数字加英文的点 .后加空格

而无序列表是只需要*/-/+加空格即可，这三种符号任意一个都可以，效果完全相同

示例

1. 为了演示项目符号的使用
2. 我这句话不得不
3. 分成好几句
4. 但是效果应该达到了
5. 就算说可以把想表达的内容分点详述

//无序列表类似于清单
* 待办事项1
* 待办事项2
- 代办事项3
+ 代办事项4

效果如下：

1. 为了演示项目符号的使用
2. 我这句话不得不
3. 分成好几句
4. 但是效果应该达到了
5. 就算说可以把想表达的内容分点详述

//无序列表类似于清单

• 待办事项1
• 待办事项2

• 代办事项3

• 代办事项4

3. *的使用

*的用法有三种，简单却常用

加粗

斜体

还有加粗斜体

#代码示例
*斜体*
**加粗**
***加粗斜体***

实际效果

斜体

加粗

加粗斜体

理论上一对星号中间是斜体，两对中间是加粗，三对是加粗斜体

4. 超链接

markdown语法支持超链接导入（Markdown这么强大怎么可能不支持呢）

#语法 
[renYiWenZi](url)
[Link Text](link-address "optional title")

这里有尝试过以ip地址代替url以期达到直接访问ip地址的效果，换了门牌号也能到你家门口，然而经尝试，大概markdown语法并不支持这样的操作，也识别不了ip地址

以阿里为例

阿里巴巴

optional title 是在光标指向 link text时预览的文字

当然有时你所能拿到的URL是那种，就是很长的那种，原网站作者不知道或者没有短链接，如果超链接还有很多就会影响文章的美观性。主要是自己写的时候看着不爽

如果在这种情况下对行内式感到绝望，还可以选择用另一种插入链接的方式

我姑且称之为参考式

参考式有两个应用场景，一个是找不到短url而url长到了影响观感的程度，另一个是同一个网址在文章中反反复复反反复复使用，为达到省略格式，化繁为简的效果，在文末采取参考式，类似于文章引用， reference 的格式

#语法以及示例
[renYiWenZi][1]	 
[AnyWords][]

[1]: https://www.xx.com "xx网"
[Anywords]:https://www.aw.com "suiyi网"

我们常去的几个网站分别是[谷歌][1]、[知乎][2]、[b站][3]和[GitHub][4]
其中[GitHub][3]是最大的[开源社区][]

[1]:https://www.google.com "google"
[2]:https://www.zhihu.com "逼乎"
[3]:https://www.bilibili.com "bili"
[4]:https://www.github.com "github"
[开源社区]:https://www.github.com

效果展示：

我们常去的几个网站分别是谷歌、知乎、b站和GitHub
其中GitHub是最大的开源社区

为了美观，reference list 往往放在文末

而超链接的使用远远不止于此

插入图片

插入图片的方式与超链接转到外部网址的格式类似，主要区别在于要加！字符

#语法展示及示例
！[Figure](URL www.xxx.com)
#figure此处的文字有时作为图片标题显示，有时不显示，optional，可留空
#URL处也可以不填写url，也可以选择上传本地图片，此时只需填写相对路径即可，
#相对路径指的是在与此markdown文档同路径下的相对路径，可在此md文档同路径下新建img文件夹，
#在此处填/img/xx.png 具体情况具体分析，或许在主题配置文件中亦有提及*

*这里是对于搭建hexo个人博客来说的

为了方便图片管理，建议了解并学习图床的使用

这里也可以选择行内式和参考式，方法与此前的超链接完全相同，此处不再赘述

markdown语法中图片可以按照一定的布局组合排列

{% gi total n1-n2-... %}
  ![](url)
  ![](url)
  ![](url)
  ![](url)
  ![](url)
{% endgi %}

total为图片总的数量

n1为第一行的图片数量

n2为第二行的图片数量

。。。

如

{% gi 5 3-2 %}

代表共有五张图， 第一行3张， 第二行4张

锚点

锚点也是markdown语法中超链接类的一种，是md语法中最方便最人性化的闪光点之一

锚点与链接基本相同，区别在于锚点是在文章内部相互传送，锚点的优雅之处在于，在文章内部传送，不跳转换画面。我们可以在一篇文章目录传送到的地方也设置锚点传送回目录，就像是游戏里的传送点一样。

注意：markdown里的锚点只能传送到n级标题的位置

以下是语法展示及示例:

[显示内容](#标题)
#注意此处/#代表的是‘标题’这一性质，而非标题的级别，因此不必加n个#来体现标题等级，会自动根据“标题”的内容匹配

我还没有尝试过取两个及以上相同的标题，或许会造成混乱或者取第一个标题，总之建议不要尝试，至少会对自己和读者造成影响

具体的例子在本文均有体现，这里再举一例：

转到脚注

5.脚注

md里的脚注类似于引用，优点是既可以对文章内容进行解释说明，不打断文章节奏，也可以对文章内容进行引用补充，起到与reference list 相同的效果。

#语法展示及示例
脚注[^1]
脚注[^2]

[^1]:123456
[^2]:456789

#注意这里只能用数字来编码，如果用其他字符（包括字母），会产生很丑的效果，和bug，可以自行尝试

脚注¹
脚注²

可以在这里转到结尾看效果

有一个缺点是好像脚注解释会像reference list一样固定显示在全文章最后，有可能会出现距离相当远的情况

6.引用段落

引用段落在前文已经有了相当多的应用

# >后加一个空格，接想要的文字
> 123
#可以多层嵌套
> 树
>> 树中树
>>> 树中树中树
>> 树中树
> 树

实际效果：

123

树

树中树

树中树中树

树中树

树

一行回车换行，两行回车打断

7.代码块和代码区块

---

代码块

代码块是类似于button的选项

`button`

示例：

button

highlight code and code block

可以做出类似于button的效果，也可以做出类似于高亮格式

代码区块

代码区块就是别的平台的代码块

语法也与各平台完全相同

#include<stdio.h>
int main(){
    printf("hello,world!"/n);
    return0;
}

8.分割线

分割线使用极其普遍但不可滥用，在实际使用中要注意使用的度

语法有三种，效果完全相同

***
---
____
+++

at least three

9.删除线

删除线是一种非常非常非常不正式的用法

删除线主要表示一种文中某种错误用法的演示，强调

#语法
there is ~~a small mistake~~ in this sentence

there is a small mistake in this sentence

10.表格

markdown语法中支持表格

#语法示例
|Tables|are|cool|
|---|:---:|---:|
|A|is|apple|
|B|is|banana|
#这里用|分隔列与列第二行可以用来判断对齐情况
#通常是三个‘减号’，默认左对齐冒号在那边就是照哪边对其
#两边都有就是居中
#如果有某行单独多出来一列，会被自动删除
#列数以最少的一行为准，最左最右的|可以忽略

Tables	are	cool
A	is	apple
B	is	banana

11. 首行缩进

首行缩进无法用空格来实现，同样换行的操作也不能用单纯的回车来实现

同时也能实现小于一个中文字符的首行缩进

*注意末尾的分号不可省略

#语法示例
  #一个中文字符
  #半个中文字符
  #四分之一中文字符

  #一个中文字符
  #半个中文字符
  #四分之一中文字符

12.todo list

看起来非常实用但是实际使用中感觉只是花里胡哨而已

#语法示例
-[]
-[x]

实际效果：

可以随意修改 check or not

13.标签

标签的使用语法

#语法示例：绿色
{% note success %}
文字 或者 `markdown` 均可
{% endnote %}
#或者html格式
<p class="note note-primary">标签</p>

实际效果：

文字 或者 markdown均可

标签

options：

primary

secondary

success

danger

warning

info

light

14.活用HTML

用HTML可以达到很多原本难以达到的效果

但是缺点在于HTML代码相比比较长，难以记忆

目前我发现并且实践过的可用的HTML可以实现的功能有

• 修改字体，字号，色号
• 改变背景色
• todo list
• 自动链接
• 表格

以下一一作出介绍和列举

字体字号

#语法就是HTML语法
#对字体的定义格式
<font some parameters>text</front>
#可以添加的参数有许多 face表示字体 color表示颜色，用十六进制表示颜色，size表示字号，为从1到7的数字，一般浏览器的默认是3
示例：
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=7 face="黑体">color=#0099ff size=72 face="黑体"</font>
<font color=#00ffff size=6>color=#00ffff</font>
<font color=gray size=5>color=gray</font>

实际效果如下：

我是黑体字
我是微软雅黑
我是华文彩云
color=#0099ff size=7 face=”黑体”
color=#00ffff size=6
color=gray size=5

文字的背景色

给文字添加背景色效果就像是以前对着要背的课本拿着荧光笔涂涂涂，但是实际使用中感觉标记效果不明显

<table><tr><td bgcolor=orange>backgroundColor is : orange</td></tr></table>

效果展示：

backgroundColor is : orange

todo list

代码示例

<input type="checkbox">

实际效果不再演示，与[前文所述](#12-todo list)完全相同

自动链接

#只要用一对尖括号包裹住想要的URL，markdown就会自动地把它转为链接
#for example：
<example.com>
markdown会自动将其转为标准的html：
<a href="http://example.com/">http://example.com/</a>

示例：

tecent@foxmial.com

不知道为什么，我也一直很好奇，这里不需要添加 maito:

表格

用HTML实现的表格要远比markdown语法实现的麻烦的多

示例如下

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

值班人员	星期一	星期二	星期三
	李强	张明	王平

markdown语法下的表格不支持合并单元格，为此typora支持对表格在成品状态进行类似于word的方式的修改，添加行列删除合并单元格

这貌似与markdown的初衷背道而驰，我们在markdown中几乎不需要鼠标，不需要点来点去选择各种各样的样式，我们可以专注于内容，所有的格式都可以用代码实现，但这也是markdown语法缺陷的无奈之举，如果熟悉HTML我们可以用HTML对其进行这样的补充

因此HTML与markdown是不分家的

15.XX图

markdown在绘图方面堪称一绝，怎么说呢

我觉得写实验报告最蠢的事情之一就是在画图板上竭尽可能的让流程图的块保持在同一个轴上，用鼠标不停地拖动块，使它们之间的间距看起来美观

时序图

时序图语法

这里早已经有大佬把时序图的语法写的很详尽了，我这里就直接引用好了

放示例及效果：

participant 客户端 as A
participant 服务端 as B
participant 通行证中心 as C
Note over A:用户输入通行证账号、密码
A->C: 发送账号、密码
Note over C:验证账号、密码
C-->>A:返回token
A->B:发送token
B->C:验证token
C-->>B:验证成功
B-->>A:登陆成功
Note left of A:左边注释
B->B:自交互
Note right of C:右边\n注释

流程图

同时序图

流程图语法

示例：

 st=>start: 开始
 io=>inputoutput: 验证
 op=>operation: 选项
 cond=>condition: 是 或 否？
 sub=>subroutine: 子程序
 e=>end: 结束

st->io->op->cond
 cond(yes)->e
 cond(no)->sub->io

st=>start: 开始
io=>inputoutput: 验证
op=>operation: 选项
cond=>condition: 是 或 否？
sub=>subroutine: 子程序
e=>end: 结束

st->io->op->cond
cond(yes)->e
cond(no)->sub->io

甘特图

甘特图语法

示例：

dateFormat YYYY-MM-DD
title 产品计划表
section 初期阶段
明确需求: 2017-03-01, 10d
section 中期阶段
跟进开发: 2017-03-11, 9d
section 后期阶段
抽查测试: 2017-03-20, 9d

Tips

一种有点丑的button

<kbd>

button123

</kbd>

效果：

button123

禁止markdown编译：

{% raw %}
~~**划重点**~~
{% endraw %}

~~**划重点**~~

鸣谢

1.Yubikiri ちゃん

2.看GitHub是来自加州叫bramp的大佬,对时序图的语法介绍方式很赞，https://github.com/bramp

3.fluid官方文档，https://hexo.fluid-dev.com/docs/guide/

---

更新：

之前把``代码块当button之类的东西用

后来在实践中发现和代码区块完全不同，大部分代码在代码区块中不会编译

但是代码在代码块（两个反引号）中仍然会编译

{% xxx %}

类型的代码只要格式有一点不对就会报错，不成对出现也会报错,在button中也会，但是有反引号包裹导致我总是找不到出问题的点

experience： 可以使用三对反引号包裹或者禁止markdown编译

结尾

1. 123456 ↩
2. 456789 ↩