Markdown的编程规则
目录
Markdown标题
Markdown段落
Markdown列表
Markdown区块
Markdown代码
Markdown链接
Markdown图片
Markdown表格
Markdown扩展功能
参考资料
Markdown标题
- 使用
=
-
一级标题
=======
-------
- 使用
#
#
##
###
####
#####
######
Markdown段落
- 换行
- 段落的换行是使用两个以上空格加上回车
- 在段落后面使用一个空行来表示重新开始一个段落
- 字体
- 斜体文本
_
_
*
*
- 粗体文本
__
__
**
**
- 粗斜体文本
___
___
***
***
- 斜体文本
- 分隔线
- 在一行中用三个以上的
*
-
_
***
* * *
---
- - -
___
_ _ _
- 在一行中用三个以上的
- 删除线
- 如果段落上的文字要添加删除线，只需要在文字两旁加上两个波浪线
~~
~~
~~
- 如果段落上的文字要添加删除线，只需要在文字两旁加上两个波浪线
- 下划线
- 下划线可以通过HTML的
<u>
<u>
</u>
- 下划线可以通过HTML的
- 脚注
- 脚注是对文本的补充说明
创建脚注格式 [^1]
[^1]: 脚注
- 脚注是对文本的补充说明
Markdown列表
- 无序列表
- 无序列表使用
*
-
+
*
-
+
- 第一项
- 第一项
- 第一项
- 无序列表使用
- 有序列表
- 有序列表使用数字并加上
.
1.
2.
3.
- 第一项
- 第二项
- 第三项
- 有序列表使用数字并加上
- 列表嵌套
- 列表嵌套只需要在子列表中的选项添加四个空格即可
1.
-
-
2.
-
-
- 第一项
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
- 第二项
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素
- 第一项
- 列表嵌套只需要在子列表中的选项添加四个空格即可
Markdown区块
- 区块
- 区块引用是在段落开头使用
>
>
>
区块引用
形成方框
- 区块引用是在段落开头使用
- 区块嵌套
- 区块是可以嵌套的，一个
>
>
>
>
>
>
>
>
最外层
第一层嵌套
第二层嵌套
- 区块是可以嵌套的，一个
- 区块中使用列表
- 如果要在区块项目内放入列表，那么就需要在
>
>
> 1.
> 2.
> +
> +
> +
区块中使用列表
- 第一项
- 第二项
- 第一项
- 第二项
- 第三项
- 如果要在区块项目内放入列表，那么就需要在
- 列表中使用区块
- 如果要在列表项目内放入区块，那么就需要在
>
*
>
>
*
- 第一项
区块引用
形成方框
- 第二项
- 第一项
- 如果要在列表项目内放入区块，那么就需要在
Markdown代码
- 代码函数
- 如果是段落上的一个函数或片段的代码可以在两端使用反引号 `
printf()
- 如果是段落上的一个函数或片段的代码可以在两端使用反引号 `
- 代码区块
- 代码区块使用四个空格或者一个制表符（Tab 键）
< ?php
echo
;
function test() {
echo
;
}
< ?php
echo
nice
;
function test() {
echo
test
;
}
- 也可以使用 ```包裹一段代码，并选择是否指定一种语言
```javascript
$ (document).ready(function() {
alert('nice');
});
$ (document).ready(function() { alert('nice'); });
- 代码区块使用四个空格或者一个制表符（Tab 键）
Markdown链接
- 普通链接
- 链接名称 + 链接地址
[
](
)
- 直接使用链接地址
<
>
- 链接名称 + 链接地址
- 高级链接
- 通过变量来设置一个链接，变量赋值在文档末尾进行
用 b 作为百度网址变量
[
][
]
[b]: http://www.baidu.com/
- 通过变量来设置一个链接，变量赋值在文档末尾进行
Markdown图片
- 普通格式
- 开头一个感叹号
!
[ ]
( )
"
'title'
! [alt 属性文本] (图片地址)
! [alt 属性文本] (图片地址 "可选标题")
Markdown学习Markdown的编程规则
- 开头一个感叹号
- 链接格式
- 像网址那样对图片网址使用变量
用 p 作为百度 logo 图片的变量
[
][
]
[p]: http://www.baidu.com/img/bd_logo1.png
- 像网址那样对图片网址使用变量
- img标签
- 类似 HTML 使用 img 标签
<img src="http://www.baidu.com/img/bd_logo1.png" width="50%">
Markdown学习Markdown的编程规则
- 类似 HTML 使用 img 标签
Markdown表格
- 表格语法
- 制作表格使用
|
-
| 表头 | 表头 |
| ----- | ----- |
| 单元格 | 单元格 |
| 单元格 | 单元格 |
表头 表头 单元格 单元格 单元格 单元格
- 制作表格使用
- 对齐方式
- 设置内容和标题栏居左对齐
:-
| 左对齐 |
| :----- |
| 单元格单元格 |
| 单元格单元格单元格 |
左对齐 单元格单元格 单元格单元格单元格 - 设置内容和标题栏居右对齐
-:
| 右对齐 |
| -----: |
| 单元格单元格 |
| 单元格单元格单元格 |
右对齐 单元格单元格 单元格单元格单元格 - 设置内容和标题栏居中对齐
:-:
| 居中对齐 |
| :-----: |
| 单元格单元格 |
| 单元格单元格单元格 |
居中对齐 单元格单元格 单元格单元格单元格
- 设置内容和标题栏居左对齐
Markdown扩展功能
- 支持HTML元素
- 不在Markdown涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有
<kbd>
<b>
<i>
<em>
<sup>
<br>
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
- 不在Markdown涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。目前支持的 HTML 元素有
- 转义
- Markdown使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown使用反斜杠
\
\*\*
\*\*
- Markdown支持以下这些符号前面加上反斜杠来帮助插入普通的符号
\ 反斜线
` 反引号
* 星号
_ 下划线
{ } 花括号
[ ] 方括号
( ) 小括号
# 井号
+ 加号
- 减号
. 英文句点
! 感叹号
- Markdown使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown使用反斜杠
- 公式
- 当你需要在编辑器中插入数学公式时，可以使用两个美元符
$$
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin.{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$
Markdown学习Markdown的编程规则
- 当你需要在编辑器中插入数学公式时，可以使用两个美元符
- 流程图
- 利用typora的源码模式画横向流程图
```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
- 利用typora的源码模式画竖向流程图
```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
- 利用typora的源码模式画标准流程图
```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
- 利用typora的源码模式画标准流程图（横向）
```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
- 利用typora的源码模式画横向流程图
- UML图
- 利用typora的源码模式画UML时序图
```mermaid
sequenceDiagram
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？
- 利用typora的源码模式画复杂UML时序图
```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: 没人陪我玩
- 利用typora的源码模式画标准UML时序图
```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
- 利用typora的源码模式画UML时序图
- 甘特图
- 利用typora的源码模式画甘特图
```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
Markdown学习Markdown的编程规则
- 利用typora的源码模式画甘特图
参考资料
RUNOOB.COM
- 脚注 ↩︎