思享工具箱

Markdown 语法整理

摘要：
[]][5]｛：target=“_blank”｝//引用[5]：http://www.baidu.com演示[][5][5]：http://www.baidu.com10.视频插入注意：Markdown语法不支持直接插入视频。通常的做法是插入HTML iframe框架，这是通过网站自己的共享功能获得的。如果没有，可以尝试第二种方法。第二个是伪造播放界面，本质上是插入视频图像，然后单击跳转到相关页面代码1注意：大多数第三方平台不支持插入视频优酷演示代码2[！

简明教程：https://ouweiya.gitbooks.io/markdown/

另一份语法说明 https://www.appinn.com/markdown/basic.html

1.标题

代码

注：# 后面保持空格

# h1
## h2
### h3
#### h4
##### h5
###### h6
####### h7      // 错误代码
######## h8     // 错误代码
######### h9    // 错误代码
########## h10  // 错误代码

演示

h1

h2

h3

h4

h5
h6

####### h7
######## h8
######### h9
########## h10

2.分级标题

代码
注：=- 最少可以只写一个，兼容性一般

一级标题
======================
二级标题
---------------------

演示

 
Markdown 语法整理第1张
 

3.TOC

注：根据标题生成目录，兼容性一般

代码

[TOC]

演示

 
Markdown 语法整理第2张
 

4.引用

代码1(单行式)

> hello world!

演示

hello world!

代码2(多行式)

> hello world!
hello world!
hello world!

或者

> hello world!
> hello world!
> hello world!

演示

相同的结果

hello world!
hello world!
hello world!

代码3(多层嵌套)

> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc

演示

aaaaaaaaa

bbbbbbbbb

cccccccccc

5.行内标记

注：用 ` 标记代码块将变成一行

代码

标记之外`hello world`标记之外

演示

标记之外hello world标记之外

错误代码
注：不同平台错误略有差异

 标记之外 ` 
< div>   
    < div></div>
    < div></div>
    < div></div>
< /div>
`标记之外

演示

 
Markdown 语法整理第3张
 

6.代码块

注：与上行距离一空行

代码1(```)

注：用```生成块

```
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代码2(Tab)

注： Tab缩进

我是文字……

    <div>   
        <div></div>
        <div></div>
        <div></div>
    </div>

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

代码3(自定义语法)
注：根据不同的语言配置不同的代码着色

```javascript
var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);
```

演示

var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);

7.插入链接

代码1(内链式)
注：{:target="_blank"}跳转方式兼容性一般 ，多数第三方平台不支持跳转

[百度1](http://www.baidu.com/" 百度一下"){:target="_blank"}

演示

百度1

代码2(引用式)

[百度2][2]{:target="_blank"}
[2]: http://www.baidu.com/   "百度二下"

演示

百度2

8.插入图片

代码1(内链式)

![](./01.png '描述')

演示

 
Markdown 语法整理第4张
 

代码2(引用式)

![name][01]
[01]: ./01.png '描述'

演示

 
Markdown 语法整理第5张
 

9.插入图片带有链接

代码

[![](./01.png '百度')](http://www.baidu.com){:target="_blank"}        // 内链式

[![](./01.png '百度')][5]{:target="_blank"}                       // 引用式
[5]: http://www.baidu.com

演示

 
Markdown 语法整理第6张

[

 
Markdown 语法整理第6张
 
][5]
[5]: http://www.baidu.com

10.视频插入

注：Markdown 语法是不支持直接插入视频的
普遍的做法是 插入HTML的 iframe 框架，通过网站自带的分享功能获取，如果没有可以尝试第二种方法
第二是伪造播放界面，实质是插入视频图片，然后通过点击跳转到相关页面

代码1
注：多数第三方平台不支持插入<iframe>视频

 
Markdown 语法整理第8张
youku
<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>

演示

 
Markdown 语法整理第9张
 

代码2

[![](./youku2.png)](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"}

演示

 
Markdown 语法整理第9张

11.序表

代码1(有序)

注：序列.后 保持空格

1. one
2. two
3. three

演示

  1. one
  2. two
  3. three

代码2(无序)

* one
* two
* three

演示

  • one
  • two
  • three

代码3(序表嵌套)

1. one
    1. one-1
    2. two-2
2. two 
    * two-1
    * two-2

演示

  1. one
    1. one-1
    2. two-2
  2. two
    • two-1
    • two-2

代码4(序表嵌套代码块)
注：换行+两个Tab

* one

    var a = 10;     // 与上行保持空行并 递进缩进

演示：

  • one

      var a = 10;

12.任务列表

注：兼容性一般 要隔开一行

代码

这是文字……

- [x] 选项一
- [ ] 选项二  
- [ ]  [选项3]

演示

 
Markdown 语法整理第11张
 

13.表情

注：兼容一般

 
Markdown 语法整理第12张
 

表情代码地址

14.表格

注： : 代表对齐方式 ,** : 与 | 之间不要有空格**，否则对齐会有些不兼容

代码1

|    a    |       b       |      c     |
|:-------:|:------------- | ----------:|
|   居中  |     左对齐    |   右对齐   |
|=========|===============|============|

演示

abc
居中左对齐右对齐
====================================

代码2(简约写法)

a  | b | c  
:-:|:- |-:
    居中    |     左对齐      |   右对齐    
============|=================|=============

演示

abc
居中左对齐右对齐
==========================================

代码3(特殊表格)

注：一般对合并单元格，以及其他特殊格式表格，markdown 是无能为力的
所以常规的做法是使用HTML标签，但是这样的编写效率极低。
但是有了这款工具的话，所有问题都迎刃而解。

在线生成HTML代码 Tables Generator (国外的站)

 
Markdown 语法整理第13张
Tables Generator

演示

 
Markdown 语法整理第14张
 

15.支持内嵌CSS样式

代码

<p style="color: #AD5D0F;font-size: 30px; font-family: '宋体';">内联样式</p>

演示

 
Markdown 语法整理第15张
 

16.语义标记

描述效果代码
斜体斜体*斜体*
斜体斜体_斜体_
加粗加粗**加粗**
加粗+斜体加粗+斜体***加粗+斜体***
加粗+斜体加粗+斜体**_加粗+斜体_**
删除线删除线~~删除线~~

17.语义标签

描述效果代码
斜体<i>斜体</i><i>斜体</i>
加粗<b>加粗</b><b>加粗</b>
强调<em>强调</em><em>强调</em>
上标ZaZ<sup>a</sup>
下标ZaZ<sub>a</sub>
键盘文本
 
Markdown 语法整理第16张
 
<kbd>Ctrl</kbd>
换行  

18.格式化文本

保持输入排版格式不变
注：对内含标签需要破坏结构才能显示

代码

<pre>
hello world 
         hi
  hello world 
</pre>

演示

<pre>
hello world
hi
hello world
</pre>

错误解决方法
注：标签内部添加空格 或者 直接使用```标记来处理
代码1(插入空格)

<pre>
    < div>   
        < div>< /div>
        < div>< /div>
        < div>< /div>
    < /div>
</pre>

演示

<pre>
< div>
< div>< /div>
< div>< /div>
< div>< /div>
< /div>
</pre>

代码2( ``` 代码块标记)

```
<div>   
    <div></div>
    <div></div>
    <div></div>
</div>
```

演示

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

19.公式 {#1}

注：1个$左对齐，2个居中

代码

$$ x href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b pm sqrt{b^2-4ac} over 2a}. $

演示

 
Markdown 语法整理第17张
 

20.分隔符

注：最少三个 --- 或 ***或 * * *

代码

***
---
* * *

演示

21.脚注

代码

Markdown[^1]
[^1]: Markdown是一种纯文本标记语言        // 在文章最后面显示脚注

演示

Markdown[1]

22.锚点

代码
注：只有标题支持锚点， 跳转目录方括号后 保持空格

[公式标题锚点](#1)

### [需要跳转的目录] {#1}    // 方括号后保持空格

演示

公式标题锚点

23.定义型列表

注：解释型定义
代码

Markdown 
:   轻量级文本标记语言，可以转换成html，pdf等格式  //  开头一个`:` + `Tab` 或 四个空格

代码块定义
:   代码块定义……

        var a = 10;         // 保持空一行与 递进缩进

演示

 
Markdown 语法整理第18张
 

24.自动邮箱链接

代码

<xxx@outlook.com>

演示

xxx@outlook.com

25.流程图

代码1

```flow                     // 流程
st=>start: 开始|past:> http://www.baidu.com // 开始
e=>end: 结束              // 结束
c1=>condition: 条件1:>http://www.baidu.com[_parent]   // 判断条件
c2=>condition: 条件2      // 判断条件
c3=>condition: 条件3      // 判断条件
io=>inputoutput: 输出     // 输出
//----------------以上为定义参数-------------------------

//----------------以下为连接参数-------------------------
// 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束
st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
c1(no)->e                   // 条件1不满足->结束
c2(no)->e                   // 条件2不满足->结束
c3(no)->e                   // 条件3不满足->结束
```

演示

 
Markdown 语法整理第19张
 

代码详解
流程图分为两个部分： 定义参数 然后 连接参数

定义示例：

tag=>type: content:>url         // 形参格式 
st=>start: 开始:>http://www.baidu.com[blank]  //实参格式

注：** st=>start: 开始 的：后面保持空格**

形参实参含义
tagst标签 (可以自定义)
=>=>赋值
typestart类型 (6种类型)
content开始描述内容 (可以自定义)
:>urlhttp://www.baidu.com[blank]链接与跳转方式 兼容性很差
6种类型含义
start启动
end结束
operation程序
subroutine子程序
condition条件
inputoutput输出

连接示例：

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束
形参实参含义
->->连接
conditionc1条件
(布尔值,方向)(yes,right)如果满足向右连接，4种方向：right ，left，up ，down 默认为：down

注：operation (程序); subroutine (子程序) ;condition (条件)，都可以在括号里加入连接方向。

operation(right) 
subroutine(left)
condition(yes,right)    // 只有条件 才能加布尔值

代码2

注：添加样式和url跳转 需要添加第三方的脚本
实际效果很差，使用起来麻烦，意义不大

```flow                             // 流程
st=>start: 启动|past:>http://www.baidu.com[blank] // 开始
e=>end: 结束                      // 结束
op1=>operation: 方案一             // 运算1
sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent]  // 运算2
sub3=>subroutine: 重新制定方案        // 运算2
cond1=>condition: 行不行？|request  // 判断条件1
cond2=>condition: 行不行？          // 判断条件2
io=>inputoutput: 结果满意           // 输出

// 开始->方案1->判断条件->
st->op1->cond1
// 判断条件1为no->方案2->判断条件2为no->重新制定方案->方案1
cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1
cond1(yes)->io->e       // 判断条件满足->输出->结束
cond2(yes)->io->e       // 判断条件满足->输出->结束
```

演示

 
Markdown 语法整理第20张
 

作者地址：flowchart.js

一般普遍支持的效果

 
Markdown 语法整理第21张
 

26.时序图

代码1

```sequence
A->>B: 你好
Note left of A: 我在左边     // 注释方向，只有左右，没有上下
Note right of B: 我在右边
B-->A: 很高兴认识你
```

演示

 
Markdown 语法整理第22张
 

代码详解

注：A->>B: 你好 后面可以不写文字，但是一定要在最后加上：
Note left of A 代表注释在A的左边

符号含义
-实线
>实心箭头
--虚线
>>空心箭头

代码2

    ```sequence
    起床->吃饭: 稀饭油条
    吃饭->上班: 不要迟到了
    上班->午餐: 吃撑了
    上班->下班:
    Note right of 下班: 下班了
    下班->回家:
    Note right of 回家: 到家了
    回家-->>起床:
    Note left of 起床: 新的一天
    ```

演示

 
Markdown 语法整理第23张
 

27.生成侧边栏扩展

注：生成侧边栏一般是插入JS，再就是模板,
总体来说，很是麻烦，效果一般，不作详解。

作者仓库：i5ting_ztree_toc

 
Markdown 语法整理第24张
 

精简版：作者博客HaleyPKU

END

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



转载：https://www.jianshu.com/p/b03a8d7b1719

标签：#markdown | 浏览：135 | 发布日期：

免责声明：文章转载自《Markdown 语法整理》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇打造完美的xml技术解决方案（dom4j/xstream）第三方授权认证（一）实现第三方授权登录、分享以及获取用户资料下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

Markdown基础教程

基础语法 标题 Markdown支持6种级别的标题，对应html标签 h1 ~ h6 # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 以上标记效果如下： h1 h2 h3 h4 h5 h6 除此之外，Markdown还支持另外一种形式的标题展示形式，其类似于 Setext 标记语言的表现形式，使用下划线进行文本大...

由微博图床挂掉之后想到的

前不久，微博图床挂了，这对于众多使用 Markdown 写技术博客的人简直太残忍了！看来，图片迁移真的是刻不容缓了，在我准备迁移图片的时候，发现了几个平台对图片不同的处理方式，觉得很有意思，所以记录一下。 一、背景知识介绍 1、Markdown 和图床 （1）Markdown Markdown 是一种标记语言，通过简单的标注，可以使文本具有一定格式。例如在...

markdown语法说明

1.先写一个标题 # 一级标题。相当于 &lt;h1&gt; ## 二级标题。相当于 &lt;h2&gt; ### 三级标题。相当于 &lt;h3&gt; #### 四级标题。相当于 &lt;h4&gt; ##### 五级标题。相当于 &lt;h5&am...

Markdown 格式标记符号说明

Markdown 格式标记符号说明 1. 标题 在行首插入 1 到 6个#，分别表示标题 1 到标题 6 # 这是标题1 ## 这是标题1 ###### 这是标题6 点击保存后的效果： 标题1 标题2 标题6 2. 有序列表 在行首增加 1.、2.、3.，即数字和英文句点, 不要求数字一定要连续，可以都是1. 1. 有序列表 1. 有序列表 4. 有...

Markdown基础语法

一、Markdown简介 Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。是一种轻量级的标记语言，主要用于实时快速排版，以及稳定转移内容而版式不乱。 它的语法法类似于html但比html更简单些，具有一系列衍生版本，用于扩展Markdown的功能，这些功能原初的Markdown尚不具备，它...

C#正则表达式引发的CPU跑高问题以及解决方法团队

3月23日（周日）下午16:30左右，博客园主站负载均衡中的2台Web服务器CPU玩起了爬楼梯的游戏（见上图），一直爬到了接近100%。发现这个状况后，我们立即将这2台阿里云临时磁盘云服务器从负载均衡中摘下来，挂上1台云盘云服务器，恢复了正常。 由于曾经多次遇到过阿里云云服务器CPU问题，现在对阿里云云服务器产生了一种偏见，只要出现CPU问题，就会首先怀...

最新文章

随机推荐

思享工具箱导航