Markdown

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题

换行

连续敲击两下「Return」键，再开始写下一段；
在行末添加两个空格符，而后「Return」，开始写下一段。

字体

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=#0099ff size=5 face="黑体">color=#0099ff size=5 face="黑体"</font>
<font color=#00ffff size=5>color=#00ffff size=5</font>
<font color=gray size=5>color=gray size=5</font>

我是黑体字

我是微软雅黑

我是华文彩云

color=#0099ff size=5 face="黑体"

color=#00ffff size=5

color=gray size=5

强调

*斜体*
_斜体_

**加粗**
__粗体__

***斜体并加粗***
___斜体并加粗___

分割线

*** 加分割线
* * * 可以这样
***** 也可以这样
--- 还可以这样
___ 这样也可以

代码

```python
```

用三个反引号```把代码包裹起来。
首行开头缩进四个空格符，或敲一下「tab」键（制表符键）。

表格

| header1 | header2 | header3 |
| :-- | :---: | ---: |
| 居左 | 居中 | 居右 |

header1	header2	header3
居左	居中	居右

链接

[链接描述](链接url)

链接描述

列表

有序（数字 + `.` + 空格）
1. option1
2. option2
3. option3

无序（`-` 或者`*`）
- option1
- option2

有序

option1
option2
option3

无序

option1
option2

清单

清单（`-` + [x] 或 [] + 空格）
- [ ] option1
- [x] option2

option1
option2

引用

> 周杰伦《等你下课》

> 你住的巷子里 
> 我租了一间公寓 
> 为了想与你不期而遇 
> 高中三年
> > 我为什么
> > > 为什么不好好读书
> > >
> > > > 没考上和你一样的大学

周杰伦《等你下课》

你住的巷子里
我租了一间公寓
为了想与你不期而遇
高中三年

我为什么

为什么不好好读书

没考上和你一样的大学

锚点

[测试](#测试)
<a id="测试">测试</a>

测试
 测试

<a href="#测试2">测试2</a>
<a id="测试2">测试2</a>

测试2
测试2

脚注

在需要添加注脚的文字后加上脚注名： [^注脚名] 。 然后在文本的任意位置(一般在最后)添加脚注，如：
使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Typora[^T] 编辑器进行书写。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言
[^T]:NEW WAY TO READ & WRITE MARKDOWN.

使用 Markdown^[1]可以效率的书写文档, 直接转换成 HTML^[2], 你可以使用 Typora^[3] 编辑器进行书写。

表情

可查看这两个文档关于emoji的使用。
Emoji Cheat Sheet
GitHub Emoji API

:rofl: :smile: :blush:

🤣 😄 😊

图片

![图片描述](https://jiang-1306747567.cos.ap-beijing.myqcloud.com/avatar.jpeg)
<img src="图片路径" width="图片宽度（px或者%或者auto）" height="图片高度（px或者%或者auto）" alt="图片描述" title="图片标题">

并排

单张居中

单张居中
<center>
    <img src="xxx.png">
</center>
<div align=center>
    <img src ="xxx.png"/>
</div>

单张居左
<figure>
    <img src="http://xxx.jpg">
</figure>
<div align=left>
    <img src ="xxx.png"/>
</div>

两张并排

两张并排并居左
<figure class="half">
    <img src="http://xxx.jpg">
    <img src="http://yyy.jpg">
</figure>

两张并排并居中
<center class="half">
    <img src="http://xxx.jpg">
    <img src="http://yyy.jpg">
</center>

三张并排

三张并排居左
<figure class="third">
    <img src="http://xxx.jpg">
    <img src="http://yyy.jpg">
    <img src="http://zzz.jpg">
</figure>

三张并排居中
<center class="third">
    <img src="http://xxx.jpg">
    <img src="http://yyy.jpg">
    <img src="http://zzz.jpg">
</center>

图片添加链接

<figure class="half">
    <a href="http://jjx/images/xxx.jpg"><img src="http://jjx/images/ xxx.jpg"></a>
    <a href="http://jjx/images/yyy.jpg"><img src="http://jjx/images/ yyy.jpg"></a>
</figure>

视频

添加视频

<div align=center>
    <iframe height=498 width=510 src='http://player.youku.com/embed/XMzkzMTU5Mzg4NA==' frameborder=0 'allowfullscreen'>
    </iframe>
</div>

添加音频

<div align=center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=27955653&auto=1&height=66"></iframe>
</div>

添加star按钮

<iframe style="margin-left: 2px; margin-bottom:-5px;" frameborder="0" scrolling="0" width="100px" height="20px" src="https://ghbtns.com/github-btn.html?user=jaingmengmeng&repo=jaingmengmeng.github.io&type=star&count=true"></iframe>

流程图

如何在 Markdown 中画流程图呢？当然是用mermaid了，mermaid支持三种图形的绘制，分别是流程图，时序图和甘特图。

graph 流程图方向
流程图内容


流程图方向有下面几个值:
·TB 从上到下
·BT 从下到上
·RL 从右到左
·LR 从左到右
·TD 同TB

基本图形:
id + [文字描述]矩形
id + (文字描述)圆角矩形
id + >文字描述]不对称的矩形
id + {文字描述}菱形
id + ((文字描述))圆形

节点之间的连接
A --> B A带箭头指向B
A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
A -- 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .- B  A用不带箭头的虚线指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述

子流程图
subgraph title
    graph definition
end

自定义样式
style id 具体样式

实例1

```mermaid
graph TD
	A --> B
	A -.- C
	A --- D
	A ==> E
	A -.-> F
	A -. 描述 .- G
```

实例2

```mermaid
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```

实例3

```mermaid
graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
```

实例4

```mermaid
graph LR
    start[开始] --> input[输入A,B,C]
    input --> conditionA{A是否大于B}
    conditionA -- YES --> conditionC{A是否大于C}
    conditionA -- NO --> conditionB{B是否大于C}
    conditionC -- YES --> printA[输出A]
    conditionC -- NO --> printC[输出C]
    conditionB -- YES --> printB[输出B]
    conditionB -- NO --> printC[输出C]
    printA --> stop[结束]
    printC --> stop
    printB --> stop
```

参考链接

良有以也 - Markdown 简明语法参考

lkkwxy - 如何在Markdown中画流程图

Markdown是一种纯文本标记语言 ↩︎
HyperText Markup Language 超文本标记语言 ↩︎
NEW WAY TO READ & WRITE MARKDOWN. ↩︎

posted @ 2019-03-25 16:10 仲夏冬蕴Mm 阅读(329) 评论(0) 编辑收藏举报

刷新页面返回顶部

仲夏冬蕴 Mm

滔滔江水，奔流入海。