Markdown使用大全

内容目录

语法

@[TOC](title)

效果

标题

语法

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
<h1> 一级标题</h1>
<h2> 一级标题</h2>
<h3> 一级标题</h3>
<h4> 一级标题</h4>
<h5> 一级标题</h5>
<h6> 一级标题</h6>

效果

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题
一级标题
一级标题
一级标题
一级标题
一级标题
一级标题

列表

语法

= 无序列表1
= 无序列表2
   = 无序列表2.1
   = 无序列表2.2
- 无序列表1
- 无序列表2
   - 无序列表2.1
   - 无序列表2.2
* 无序列表1
* 无序列表2
   * 无序列表2.1
   * 无序列表2.2
+ 无序列表1
+ 无序列表2
   + 无序列表2.1
   + 无序列表2.2
<ul>
<li>有序列表</li>
<li>有序列表</li>
</ul>

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

 1. 有序列表1
 	- 有序列表1.1
 	- 有序列表1.2
 2. 有序列表3
 3. 有序列表3
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>

定义型列表

markdown
:    轻量级文本标记语言(左侧有一个可见的冒号和四个不可见的空格)

效果

  • 无序列表1
  • 无序列表2
    • 无序列表2.1
    • 无序列表2.2
  • 无序列表1
  • 无序列表2
    • 无序列表2.1
    • 无序列表2.2
  • 无序列表1
  • 无序列表2
    • 无序列表2.1
    • 无序列表2.2
  • 有序列表
  • 有序列表
  1. 有序列表1
    • 有序列表1.1
    • 有序列表1.2
  2. 有序列表3
  3. 有序列表3
  1. 有序列表
  2. 有序列表
First Term
This is the definition of the first term.
Second Term
This is one definition of the second term.
This is another definition of the second term.

定义型列表

markdown
轻量级文本标记语言(左侧有一个可见的冒号和四个不可见的空格)

字体

语法

**加粗**
<strong>加粗</strong>
<em>斜体</em>
<strong><em>加粗斜体</em></strong>
__加粗__
_斜体_
***加粗斜体***
**_加粗斜体_**
___加粗斜体___
~~删除线~~
++下划线++
==背景高亮==
\* 特殊符号
\& 特殊符号
<font face="黑体">黑体</font>
<font face="楷体">楷体</font>
<font face="微软雅黑">微软雅黑</font>
<font face="STCAIYUN">华文彩云</font>
<font color=red>红色<\font>
<font color=blue>蓝色<\font>
<font color=green>绿色<\font>
<font color=#008000>绿色<\font>
<font size=5>尺寸</font>
<font face="楷体" color=red size=5>尺寸</font>
<table><tr><td bgcolor=yellow>背景色</td></tr></table>
<center>居中</center>
<p align="left">左对齐</p>
<p align="right">右对齐</p>
H<sub>2</sub>O 下标
CO<sub>2</sub> 下标
C=M<sup>2</sup> 上标

效果
加粗
加粗
斜体
加粗斜体
加粗
斜体
加粗斜体
加粗斜体
加粗斜体
删除线
++下划线++
背景高亮
* 特殊符号
& 特殊符号
黑体
楷体
微软雅黑
华文彩云
红色<\font>
蓝色<\font>
绿色<\font>
绿色<\font>
尺寸
尺寸

背景色
居中

左对齐

右对齐

H 2O 下标 CO 2 下标 C=M 2 上标

分割线

语法

* * *
***
***************
---
-----------------

效果






引用

语法

> 引用
>  引用

>> 引用
>> 引用

>>> 引用
>>> 引用

效果

引用
引用

引用
引用

引用
引用

表格

语法

表头|表头|表头
--------|:-:|------:
默认居左|居中|居右

效果

表头表头表头
默认居左居中居右

表情符号

去露营了! :tent: 很快回来。
真好笑! :joy:

去露营了! ⛺️ 很快回来。
真好笑! 😂

todo list

语法

近期任务安排:
- [x] 整理Markdown手册
- [ ] 改善项目
   - [x] 优化首页显示方式
   - [x] 修复闪退问题
   - [ ] 修复视频卡顿
- [ ] A3项目修复
   - [x] 修复数值错误

效果
近期任务安排:

  • 整理Markdown手册
  • 改善项目
    • 优化首页显示方式
    • 修复闪退问题
    • 修复视频卡顿
  • A3项目修复
    • 修复数值错误

代码

语法

    四个空格或者一个制表符
`单行代码`
\```
多行代码
多行代码
\```
\```java
标准语言代码
标准语言代码
\```

效果
四个空格或者一个制表符
单行代码

多行代码
多行代码
标准语言代码
标准语言代码

HTML代码块

HTML代码块

注释

语法

<div style='display: none'>
代码法注释
</div>
html注释
<!--html注释-->
<!--
html注释
-->

hack方法
[//]: # (hack方法注释)
[^_^]: # (hack方法注释)
[//]: <> (hack方法注释)
[comment]: <> (hack方法注释)

效果
代码法

代码法注释

html注释

hack方法
//: # (hack方法注释)

段落和换行

语法

**段落**
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
**首行缩进**
 首行缩进(半角改为全角、两个空格)
&ensp;首行缩进&#8194;首行缩进
&emsp;首行缩进或&#8195;首行缩进
&nbsp;首行缩进或&#160;首行缩进 
**空行**
\
\
**换行**
<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段<br>落段落段落段落</p>

效果
段落

段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落

段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落

**首行缩进**  首行缩进(半角改为全角、两个空格)  首行缩进 首行缩进  首行缩进或 首行缩进  首行缩进或 首行缩进 **空行** \ \ **换行**

段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段
落段落段落段落

链接

语法

行内式链接
[行内式链接](http://example.com/ "鼠标悬停在链接上会出现指定的 title文字")
[行内式链接](http://example.com/ "鼠标悬停在链接上会出现指定的 title文字")
<a href="http://example.com/" title="超链接title">行内式链接</a>

参考式链接
[Google][1]  [Yahoo][2]  [MSN][3]
[1]: http://google.com/ "Google"
[2]: http://google.com/ "Yahoo"
[3]: http://google.com/ "MSN" 

[Google][]  [Yahoo][]  [MSN][]
[google]:http://google.com/ "Google"
[yahoo]:http://search.yahoo.com/ "Yahoo Search"
[msn]: http://search.msn.com/ "MSN Search"

自然链接
http://www.example.com
<http://example.com/>
<address@example.com>
&lt;http://example.com/&gt; &emsp;&emsp; 
&lt;address@example.com&gt;

脚注
使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2]。
[^1]:Markdown是一种纯文本标记语言
[^2]:HyperText Markup Language 超文本标记语言

锚点(页内超链接)
在你准备跳转到的指定标题后插入锚点{#标记},然后在文档的其它地方写上连接到锚点的链接。
跳转到[注释](#index)

效果
行内式链接
行内式链接
行内式链接
行内式链接

参考式链接
[Google][1] [Yahoo][2] [MSN][3]
[1]: http://google.com/ “Google”
[2]: http://google.com/ “Yahoo”
[3]: http://google.com/ “MSN”

[Google][] [Yahoo][] [MSN][]
[google]:http://google.com/ “Google”
[yahoo]:http://search.yahoo.com/ “Yahoo Search”
[msn]: http://search.msn.com/ “MSN Search”

自然链接
http://www.example.com
http://example.com/
address@example.com
<http://example.com/>   
<address@example.com>

脚注
使用 Markdown1可以效率的书写文档, 直接转换成 HTML2

锚点(页内超链接)
在你准备跳转到的指定标题后插入锚点{#标记},然后在文档的其它地方写上连接到锚点的链接。
跳转到注释

图片

语法

行内式
![伯努利函数](https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png#pic_center)

![伯努利函数](https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png#pic_center "Optional title") 

参考式
![伯努利函数] [1]
[1]: <https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png> "Optional title"

图片位置
<div align =center>![伯努利函数](https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png "Optional title")

![伯努利函数](https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png#pic_center "Optional title")

<center>  <!--开始居中对齐-->
![GitHub set up](http://zh.mweb.im/asset/img/set-up-git.gif "图片Title")
格式: ![图片Alt](图片地址 "图片Title")
</center> <!--结束居中对齐-->

图片大小
<img src="https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png" width = "100" height = "100" div align=center/>

<img src="https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png" “title”>

<img src="https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png" width="50%" div align=center/>

![伯努利函数](https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png#pic_center =100x100)

效果
行内式
伯努利函数

伯努利函数
参考式
![伯努利函数][1]
[1]: https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png “Optional title”

图片位置

![伯努利函数](https://img-blog.csdnimg.cn/img_convert/0e3301636ac1ab7fbbff6ae48d764a31.png "Optional title")

伯努利函数

图片大小

伯努利函数

伯努利函数

LaTex公式

语法

行内公式
$ X\stackrel{F}{\longrightarrow}Y $

整行公式
$$ X\stackrel{F}{\longrightarrow}Y $$
参见Latex各种箭号符号

![](http://www.forkosh.com/mathtex.cgi? 简书:在此处插入Latex公式)

效果
行内公式
$ X\stackrel{F}{\longrightarrow}Y $

整行公式
X ⟶ F Y X\stackrel{F}{\longrightarrow}Y XFY
参见Latex各种箭号符号

特殊字符

空格符	&nbsp;
<	小于号	&lt;
/>	大于号	&gt;
&	和号	&amp;
¥	人民币	&yen;
©	版权	&copy;
®	注册商标	&reg;
°C	摄氏度	&deg;C
±	正负号	&plusmn;
×	乘号	&times;
÷	除号	&divide;
²	平方(上标²)	&sup2;
³	立方(上标³)	&sup3;

空格符  
< 小于号 <
/> 大于号 >
& 和号 &
¥ 人民币 ¥
© 版权 ©
® 注册商标 ®
°C 摄氏度 °C
± 正负号 ±
× 乘号 ×
÷ 除号 ÷
² 平方(上标²) ²
³ 立方(上标³) ³

HTML

语法

<kbd>Ctrl</kbd>
CO<sub>2</sub>
X<sup>2</sup>
\*
<a href="http://example.com/" target="_blank">行内式链接</a>
&lt;
&gt;
&amp;

第一个例子:
<div class="footer">
© 2004 Foo Corporation
</div>

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

效果
Ctrl
CO2
X2
*
行内式链接
<
>
&

第一个例子:

第二个例子:

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

流程图

语法


\```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]
\```
\```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]
\```
\```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
\```
\```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
\```
\```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗?
\```
\```mermaid
sequenceDiagram
Title: 标题:复杂使用
对象A->>对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗?
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩
\```
\```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗?
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!
\```
\```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h
\```

效果

a=1
a=2
方形
圆角
条件a
结果1
结果2
横向流程图
a=1
a=2
方形
圆角
条件a
结果1
结果2
竖向流程图
Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
Created with Raphaël 2.2.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no
对象A 对象B 对象B你好吗?(请求) 对象B的描述 对象A的描述(提示) 我很好(响应) 你真的好吗? 对象A 对象B 标题:复杂使用
对象A 对象B 小三 C 对象B你好吗?(请求) 对象B的描述 对象A的描述(提示) 我很好(响应) 你好吗 对象B找我了 你真的好吗? 我们是朋友 没人陪我玩 对象A 对象B 小三 C 标题:复杂使用
张三 李四 王五 王五你好吗? 与疾病战斗 loop [健康检查] 合理 食物 看医生... 很好! 你怎么样? 很好! 张三 李四 王五 标题:复杂使用
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

  1. Markdown是一种纯文本标记语言 ↩︎

  2. HyperText Markup Language 超文本标记语言 ↩︎

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ShownSun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值