使用总结——markdown用法

对偶尔用到的markdown语法的总结，遇到一个总结一个~~

一、FlowMap

Example1：

上图代码如下：

	~~~mermaid
	graph TD
	    client1-->|read / write|SVN((SVN server))
	    client2-->|read only|SVN
	    client3-->|read / write|SVN
	    client4-->|read only|SVN
	    client5(...)-->SVN
	    SVN---|store the data|sharedrive
	~~~

Example2：

上图代码如下

	~~~mermaid
	graph TD 
		id1(body)-->id11(article)
		id1(body)-->id12(aside)
		id11(article)-->id111(h1)
		id11(article)-->id112(p)
		id111(h1)-->id1111(em)
		id111(h1)-->id1112(em)
		id112-->id1121(em)
	    id12-->id121(p)
	    id121-->id1211(em)
	~~~

其中graph TD表示这个流程图的方向，Top->Down，如果想要从左到右，可以改为graph LR

Example3：

上图代码如下：

```mermaid
	flowchat
	st=>start: .c源文件
	op1=>operation: 操作1
	cond1=>condition: YES or NO?
	sub=>subroutine: 子程序
	e=>end
	
	st->op1->cond1
	cond1(yes)->e
	cond1(no)->sub(right)->op1  
```

二、表格属性设计

方法说明	颜色名称	颜色
第二行第一列	第二行第二列	第二行第三列
第三行第一列	第三行第二列	第三行第三列

方法说明	颜色名称	颜色
列标题	第二行第二列	第二行第三列
列标题	第三行第二列	第三行第三列

方法说明	颜色名称	颜色
列标题	第二行第二列	第二行第三列
列标题	第三行第二列	第三行第三列

第一个表格的语法如下：

<table>
    <tr>
        <th>方法说明</th>
        <th>颜色名称</th>
        <th>颜色</th>
    </tr>
    <tr>
        <td><font color="Hotpink">第二行第一列</font></td>
        <td><font color="Hotpink">第二行第二列</font></td>
        <td bgcolor=yellow>第二行第三列</td>
    </tr>
    <tr>
        <td><font color="Pink">第三行第一列</font></td>
        <td><font color="pink">第三行第二列</font></td>
        <td bgcolor="Pink">第三行第三列</td>
    </tr>
</table>

第二、三个表格的实现可以在此基础上简单修改即可

三、跨行跨列表格

(1,1)	（1,2）	（1,3）	（1,4）
	（2,2）	（2,3）
（3,1）	（3,2）	（3,3）	（3,4）

跨行表格代码如下：

<table>
    <tr>
        <td rowspan="2">(1,1)</td>
        <td>（1,2）</td>
        <td>（1,3）</td>
        <td>（1,4）</td>
    </tr>
    <tr>
        <td>（2,2）</td>
        <td colspan="2">（2,3）</td>
    </tr>
    <tr>
        <td>（3,1）</td>
        <td>（3,2）</td>
        <td>（3,3）</td>
        <td>（3,4）</td>
    </tr>
</table>

tr是table row的缩写
th是table header cell的缩写，表头，故有加粗效果
td是table data cell的缩写，只是普通的单元格，故没有加粗的效果
rowspan是跨列属性
colspan是跨行属性

四、各类特殊符号

符号	语法	说明
$\infty$	$\infty$	无穷
$\to$	$\rightarrow$	向右箭头
$⟶$	$\longrightarrow$	向右长箭头
$\Rightarrow$	$\Rightarrow$	向右双箭头
$⟹$	$\Longrightarrow$	向右长双箭头
“	“	左引号
”	”	右引号

HTML中       等6种空白空格的区别：

这是一段测试的文字
这是    一段测试的文字
这是  一段测试的文字
这是 一段测试的文字

这是一段测试的文字
这是    一段测试的文字
这是  一段测试的文字
这是 一段测试的文字

五、图片的相关表示

关于Markdown里的图片并排显示 - WMN7Q的博客 - CSDN博客

设定宽高

单张居中

并排显示

并排显示，并居中

六、字体相关的设置

字体样式	语法
方正粗黑宋简体	<font face="方正粗黑宋简体">方正粗黑宋简体</font>
腾祥范笑歌楷书简繁合集	<font face="腾祥范笑歌楷书简繁合集">方正粗黑宋简体</font>

---

Reference:

1. https://mermaidjs.github.io/
2. https://blog.csdn.net/katherine_hsr/article/details/79179622
3. https://www.cnblogs.com/chaojiyingxiong/p/9791801.html
4. https://blog.csdn.net/thither_shore/article/details/52328313
5. http://www.oicqzone.com/pc/2015083122336.html
6. Markdown绘制流程图的方法 - zk的专栏 - CSDN博客 https://blog.csdn.net/ww1473345713/article/details/47620577
7. https://blog.csdn.net/WMN7Q/article/details/73138326