markdown高阶使用技巧
目录:
- 一:图片操作指南
- 单张图片排版
- 多张张图片排版
- 居中单张图片排版
- 修改图片大小
- 二:特殊符号编码
- 2.1 ASCII 字符
- 2.2 希腊字母
- 2.3 数学符号
- 2.4 其他符号
- 三:支持HTML元素
- 3.1 目前支持的 HTML 元素有:
等 ,如:- 3.2 转义
- 四:流程图
- 五:高级技巧
- 1. 在Markdown 中,可以直接插入 HTML,目前支持的HTML 元素有:
- 2. 键盘标签
- 3. 可视化差异
- 4. 隐藏不必要的输出
- 6. 较小的文字
- 7. 加注音
一:图片操作指南
单张图片排版

多张张图片排版

居中单张图片排版
修改图片大小
添加图片的代签可码模板:
注意一个小细节,60%这个地方就是修改图片大小的,可以根据自己的喜好调整大小。
二:特殊符号编码
MarkDown 支持 HTML 中的特殊符号编码:
2.1 ASCII 字符
- 对于 ASCII 字符,只需使用
ASCII值;就可以显示对应字符。

- 带有实体名称的 ASCII 字符表如下:
| ASCII 字母 | 实体名称 |
|---|---|
| " | " |
| ' | ' |
| & | & |
| < | < |
| > | > |
2.2 希腊字母
| 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| Α | Α |
Α |
Β | Β |
Β |
Γ | Γ |
Γ |
Δ | Δ |
Δ |
| Ε | Ε |
Ε |
Ζ | Ζ |
Ζ |
Η | Η |
Η |
Θ | Θ |
Θ |
| Ι | Ι |
Ι |
Κ | Κ |
Κ |
Λ | Λ |
Λ |
Μ | Μ |
Μ |
| Ν | Ν |
Ν |
Ξ | Ξ |
Ξ |
Ο | Ο |
Ο |
Π | Π |
Π |
| Ρ | Ρ |
Ρ |
Σ | Σ |
Σ |
Τ | Τ |
Τ |
Υ | Υ |
Υ |
| Φ | Φ |
Φ |
Χ | Χ |
Χ |
Ψ | Ψ |
Ψ |
Ω | Ω |
Ω |
| α | α |
α |
β | β |
β |
γ | γ |
γ |
δ | δ |
δ |
| ε | ε |
ε |
ζ | ζ |
ζ |
η | η |
η |
θ | θ |
θ |
| ι | ι |
ι |
κ | κ |
κ |
λ | λ |
λ |
μ | μ |
μ |
| ν | ν |
ν |
ξ | ξ |
ξ |
ο | ο |
ο |
π | π |
π |
| ρ | ρ |
ρ |
? | ? |
? |
σ | σ |
σ |
τ | τ |
τ |
| υ | υ |
υ |
φ | φ |
φ |
χ | χ |
χ |
ψ | ψ |
ψ |
| ω | ω |
ω |
? | ? |
? |
? | ? |
? |
? | ? |
? |
2.3 数学符号
| 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
∈ | ∈ |
∈ |
? | ? |
? |
? | ? |
? |
| ∏ | ∏ |
∏ |
∑ | ∑ |
∑ |
? | ? |
? |
? | ? |
? |
| √ | √ |
√ |
∝ | ∝ |
∝ |
∞ | ∞ |
∞ |
∠ | ∠ |
∠ |
| ∧ | ∧ |
∧ |
∨ | ∨ |
∨ |
∩ | ∩ |
∩ |
∪ | ∪ |
∪ |
| ∫ | ∫ |
∫ |
∴ | ∴ |
∴ |
~ | ~ |
~ |
? | ? |
? |
| ≈ | ≈ |
≈ |
≠ | ≠ |
≠ |
≡ | ≡ |
≡ |
≤ | ≤ |
≤ |
| ≥ | ≥ |
≥ |
? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
⊕ | ⊕ |
⊕ |
? | ? |
? |
| ⊥ | ⊥ |
⊥ |
? | ? |
? |
2.4 其他符号
| 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
|---|---|---|---|---|---|---|---|---|
| ? | ? |
? |
… | … |
… |
|||
| ′ | ′ |
′ |
″ | ″ |
″ |
 ̄ |  ̄ |
 ̄ |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ← | ← |
← |
↑ | ↑ |
↑ |
→ | → |
→ |
| ↓ | ↓ |
↓ |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
∈ | ∈ |
∈ |
? | ? |
? |
| ? | ? |
? |
∏ | ∏ |
∏ |
∑ | ∑ |
? |
| ? | ? |
? |
? | ? |
? |
√ | √ |
√ |
| ∝ | ∝ |
∝ |
∞ | ∞ |
∞ |
∠ | ∠ |
∠ |
| ∧ | ∧ |
⊥ |
∨ | ∨ |
? |
∩ | ∩ |
∩ |
| ∪ | ∪ |
∪ |
∫ | ∫ |
∫ |
∴ | ∴ |
∴ |
| ~ | ~ |
~ |
? | ? |
? |
≈ | ≈ |
? |
| ≠ | ≠ |
≠ |
≡ | ≡ |
≡ |
≤ | ≤ |
≤ |
| ≥ | ≥ |
≥ |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ⊕ | ⊕ |
⊕ |
? | ? |
? |
⊥ | ⊥ |
⊥ |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
? | ? |
? |
? | ? |
? |
| ? | ? |
? |
|
|
? | ? |
? |
|
| ¢ | ¢ |
¢ |
£ | £ |
£ |
¤ | ¤ |
¤ |
| ¥ | ¥ |
¥ |
| | | |
| |
§ | § |
§ |
| ¨ | ¨ |
¨ |
? | ? |
? |
a | a |
a |
| ? | ? |
? |
? | ? |
? |
- | - |
- |
| ? | ? |
? |
ˉ | ˉ |
ˉ |
° | ° |
° |
| ± | ± |
± |
2 | 2 |
2 |
3 | 3 |
3 |
| ′ | ′ |
′ |
μ | μ |
μ |
" | " |
" |
| < | < |
< |
> | > |
> |
' | ' |
' |
| + | + |
+ |
? | ? |
- |

MarkDown特殊符号编码.png
三:支持HTML元素
3.1 目前支持的 HTML 元素有:
等 ,如:
使用 Ctrl+Alt+Del 重启电脑

3.2 转义
Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用转义字符,Markdown 使用反斜杠转义特殊字符:
**文本加粗**
\*\* 正常显示星号 \*\*

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号
四:流程图
以下几个
实例效果图如下:
1、横向流程图源码格式:
?```mermaid
graph LR
A[方形] -->B(圆角)
B --> C{条件a}
C -->|a=1| D[结果1]
C -->|a=2| E[结果2]
F[横向流程图]
?```
2、竖向流程图源码格式:
?```mermaid
graph TD
A[方形] --> B(圆角)
B --> C{条件a}
C --> |a=1| D[结果1]
C --> |a=2| E[结果2]
F[竖向流程图]
?```
3、标准流程图源码格式:
?```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
?```
4、标准流程图源码格式(横向):
?```flow
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
?```
5、UML时序图源码样例:
?```sequence
对象A->对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗?
?```
6、UML时序图源码复杂样例:
?```sequence
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: 没人陪我玩
?```
7、UML标准时序图样例:
?```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗?
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物
看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
?```
8、甘特图样例:
?```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
?```
效果图如下:
五:高级技巧
1. 在Markdown 中,可以直接插入 HTML,目前支持的HTML 元素有:
- 等
2. 键盘标签
可以使用标签使文本看起来像按钮,这与常规反引号文本略有不同。

3. 可视化差异
```diff
function addTwoNumbers (num1, num2) {
- return 1 + 2
+ return num1 + num2
}
`` `
function addTwoNumbers (num1, num2) {
- return 1 + 2
+ return num1 + num2
}
`` `
4. 隐藏不必要的输出
git clone 成功,点击查看详情信息
Cloning into 'php-markdown-blog'...
remote: Enumerating objects: 67, done.
remote: Counting objects: 100% (67/67), done.
remote: Compressing objects: 100% (55/55), done.
remote: Total 67 (delta 12), reused 59 (delta 7), pack-reused 0
Unpacking objects: 100% (67/67), done.
git clone 成功,点击查看详情信息
Cloning into 'php-markdown-blog'... remote: Enumerating objects: 67, done. remote: Counting objects: 100% (67/67), done. remote: Compressing objects: 100% (55/55), done. remote: Total 67 (delta 12), reused 59 (delta 7), pack-reused 0 Unpacking objects: 100% (67/67), done.
第一种:
6. 较小的文字
Fig 1: Megatocat into action
Fig 1: Megatocat into action
7. 加注音
Markdown Nice 这么好用,简直是{喜大普奔|hē hē hē hē}呀!
mdnice 可用