文章目录
一:图片操作指南
单张图片排版
![图片名字](some.jpg图片链接)
多张张图片排版
<div align="center">
<img src="2222.jpg" height="300px" ><img src="2222.jpg" height="300px" >
</div>
居中单张图片排版
<div align="center">
<img src="2222.jpg" height="300px" >
</div>
修改图片大小
添加图片的代签可码模板:
<img src="https://i-blog.csdnimg.cn/blog_migrate/02bd7d146dcbbffbaf923efa029ba91a.png" width="60%" alt=""/>
注意一个小细节,60%这个地方就是修改图片大小的,可以根据自己的喜好调整大小。
二:特殊符号编码
MarkDown 支持 HTML 中的特殊符号编码:
2.1 ASCII 字符
- 对于 ASCII 字符,只需使用
&#ASCII值;
就可以显示对应字符。
- 带有实体名称的 ASCII 字符表如下:
ASCII 字母 | 实体名称 |
---|---|
" | " |
’ | ' |
& | & |
< | < |
> | > |
2.2 希腊字母
特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
---|---|---|---|---|---|---|---|---|---|---|---|
Α | Α | Α | Β | Β | Β | Γ | Γ | Γ | Δ | Δ | Δ |
Ε | Ε | Ε | Ζ | Ζ | Ζ | Η | Η | Η | Θ | Θ | Θ |
Ι | Ι | Ι | Κ | Κ | Κ | Λ | Λ | Λ | Μ | Μ | Μ |
Ν | Ν | Ν | Ξ | Ξ | Ξ | Ο | Ο | Ο | Π | Π | Π |
Ρ | Ρ | Ρ | Σ | Σ | Σ | Τ | Τ | Τ | Υ | Υ | Υ |
Φ | Φ | Φ | Χ | Χ | Χ | Ψ | Ψ | Ψ | Ω | Ω | Ω |
α | α | α | β | β | β | γ | γ | γ | δ | δ | δ |
ε | ε | ε | ζ | ζ | ζ | η | η | η | θ | θ | θ |
ι | ι | ι | κ | κ | κ | λ | λ | λ | μ | μ | μ |
ν | ν | ν | ξ | ξ | ξ | ο | ο | ο | π | π | π |
ρ | ρ | ρ | ς | ς | ς | σ | σ | σ | τ | τ | τ |
υ | υ | υ | φ | φ | φ | χ | χ | χ | ψ | ψ | ψ |
ω | ω | ω | ϑ | ϑ | ϑ | ϒ | ϒ | ϒ | ϖ | ϖ | ϖ |
2.3 数学符号
特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
---|---|---|---|---|---|---|---|---|---|---|---|
∀ | ∀ | ∀ | ∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ | ∋ | ∋ | ∋ |
∏ | ∏ | ∏ | ∑ | ∑ | ∑ | − | − | − | ∗ | ∗ | ∗ |
√ | √ | √ | ∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
∧ | ∧ | ∧ | ∨ | ∨ | ∨ | ∩ | ∩ | ∩ | ∪ | ∪ | ∪ |
∫ | ∫ | ∫ | ∴ | ∴ | ∴ | ∼ | ∼ | ∼ | ≅ | ≅ | ≅ |
≈ | ≈ | ≈ | ≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ | ⊄ | ⊄ | ⊄ |
⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ | ⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ |
⊥ | ⊥ | ⊥ | ⋅ | ⋅ | ⋅ |
2.4 其他符号
特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 | 特殊符号 | 命名实体 | 十进制编码 |
---|---|---|---|---|---|---|---|---|
• | • | • | … | … | … | |||
′ | ′ | ′ | ″ | ″ | ″ | ‾ | ‾ | ‾ |
⁄ | ⁄ | ⁄ | ℘ | ℘ | ℘ | ℑ | ℑ | ℑ |
ℜ | ℜ | ℜ | ™ | ™ | ™ | ℵ | ℵ | ℵ |
← | ← | ← | ↑ | ↑ | ↑ | → | → | → |
↓ | ↓ | ↓ | ↔ | ↔ | ↔ | ↵ | ↵ | ↵ |
⇐ | ⇐ | ⇐ | ⇑ | ⇑ | ⇑ | ⇒ | ⇒ | ⇒ |
⇓ | ⇓ | ⇓ | ⇔ | ⇔ | ⇔ | ∀ | ∀ | ∀ |
∂ | ∂ | ∂ | ∃ | ∃ | ∃ | ∅ | ∅ | ∅ |
∇ | ∇ | ∇ | ∈ | ∈ | ∈ | ∉ | ∉ | ∉ |
∋ | ∋ | ∋ | ∏ | ∏ | ∏ | ∑ | ∑ | − |
− | − | − | ∗ | ∗ | ∗ | √ | √ | √ |
∝ | ∝ | ∝ | ∞ | ∞ | ∞ | ∠ | ∠ | ∠ |
∧ | ∧ | ⊥ | ∨ | ∨ | ⊦ | ∩ | ∩ | ∩ |
∪ | ∪ | ∪ | ∫ | ∫ | ∫ | ∴ | ∴ | ∴ |
∼ | ∼ | ∼ | ≅ | ≅ | ≅ | ≈ | ≈ | ≅ |
≠ | ≠ | ≠ | ≡ | ≡ | ≡ | ≤ | ≤ | ≤ |
≥ | ≥ | ≥ | ⊂ | ⊂ | ⊂ | ⊃ | ⊃ | ⊃ |
⊄ | ⊄ | ⊄ | ⊆ | ⊆ | ⊆ | ⊇ | ⊇ | ⊇ |
⊕ | ⊕ | ⊕ | ⊗ | ⊗ | ⊗ | ⊥ | ⊥ | ⊥ |
⋅ | ⋅ | ⋅ | ⌈ | ⌈ | ⌈ | ⌉ | ⌉ | ⌉ |
⌊ | ⌊ | ⌊ | ⌋ | ⌋ | ⌋ | ◊ | ◊ | ◊ |
♠ | ♠ | ♠ | ♣ | ♣ | ♣ | ♥ | ♥ | ♥ |
♦ | ♦ | ♦ |
|
| ¡ | ¡ | ¡ | |
¢ | ¢ | ¢ | £ | £ | £ | ¤ | ¤ | ¤ |
¥ | ¥ | ¥ | ¦ | ¦ | ¦ | § | § | § |
¨ | ¨ | ¨ | © | © | © | ª | ª | ª |
« | « | « | ¬ | ¬ | ¬ | | | |
® | ® | ® | ¯ | ¯ | ¯ | ° | ° | ° |
± | ± | ± | ² | ² | ² | ³ | ³ | ³ |
´ | ´ | ´ | µ | µ | µ | " | " | " |
< | < | < | > | > | > | ’ | ' | ' |
+ | + | + | − | − | - |
MarkDown特殊符号编码.png
三:支持HTML元素
3.1 目前支持的 HTML 元素
<kbd> <b> <i> <em> <sup> <sub> <br>
等 ,如:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
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、标准流程图源码格式:
```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
```
4、标准流程图源码格式(横向):
```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
```
5、UML时序图源码样例:
```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?(请求)
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗?
```
6、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: 没人陪我玩
```
7、UML标准时序图样例:
```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗?
loop 健康检查
王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!
```
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 元素有:
<kbd>
<b>
<i>
<em>
<sub>
<sup>
<br>
- 等
2. 键盘标签
可以使用<kbd>
标签使文本看起来像按钮,这与常规反引号文本略有不同。
3. 可视化差异
```diff
function addTwoNumbers (num1, num2) {
- return 1 + 2
+ return num1 + num2
}
`` `
function addTwoNumbers (num1, num2) {
- return 1 + 2
+ return num1 + num2
}
`` `
4. 隐藏不必要的输出
<details>
<summary>git clone 成功,点击查看详情信息</summary>
<pre>
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.
</details>
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.#### 5. 使图像文字居中
第一种:
<div align=right><img src="https://gitee.com/vincentsys/image_ucloud/raw/master/20210427111531.pn" width="50%" height="50%"></div>
6. 较小的文字
<sup><strong>Fig 1:</strong> Megatocat into action</sup>
Fig 1: Megatocat into action
7. 加注音
Markdown Nice 这么好用,简直是{喜大普奔|hē hē hē hē}呀!
mdnice 可用