Markdown

标题

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

换行

[1]. 连续敲击两下「Return」键,再开始写下一段;
[2]. 在行末添加两个空格符,然后「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=5html

强调

*斜体* 斜体
_斜体_

**加粗** 加粗
__粗体__

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

分割线

*** 加分割线
* * * 能够这样
***** 也能够这样
--- 还能够这样
___ 这样也能够

代码

[1]. 用三个反引号把代码包裹起来
[2]. 首行开头缩进四个空格符,或敲一下 tab 键(制表符键)。

表格

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

连接

[连接描述](连接url)

列表

有序(数字+.+空格)
1. option1
2. option2
3. option3

无序(-或者*)
- option1
- option2

有序git

  1. option1
  2. option2
  3. option3

无序github

  • option1
  • option2

清单

[x] option1
[x] option2

流程图

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

```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

实例2url

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

实例33d

```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

实例4code

```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

引用

> 周杰伦《等你下课》

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

周杰伦《等你下课》视频

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

我为何

为何很差好读书

没考上和你同样的大学

锚点

脚注

表情

图片

图片

![图片描述](图片路径)
<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 简明语法参考

lkkwxy - 如何在Markdown中画流程图

相关文章
相关标签/搜索
本站公众号
   欢迎关注本站公众号,获取更多信息