markdown你不知道的高级使用技巧

2021-04-27 本文已影响0人米不开朗基罗

[TOC]

一：图片操作指南

单张图片排版

![图片名字](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://gitee.com/vincentsys/image_ucloud/raw/master/20210427111531.png" width="60%"   alt=""/>

注意一个小细节，60%这个地方就是修改图片大小的，可以根据自己的喜好调整大小。

二：特殊符号编码

MarkDown 支持 HTML 中的特殊符号编码：

2.1 ASCII 字符

对于 ASCII 字符，只需使用 &#ASCII值; 就可以显示对应字符。

image-20210427115124796

带有实体名称的 ASCII 字符表如下：

ASCII 字母	实体名称
"	`"`
'	`'`
&	`&`
<	`<`
>	`>`

2.2 希腊字母

特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码
Α	`Α`	`Α`	Β	`Β`	`Β`	Γ	`Γ`	`Γ`	Δ	`Δ`	`Δ`
Ε	`Ε`	`Ε`	Ζ	`Ζ`	`Ζ`	Η	`Η`	`Η`	Θ	`Θ`	`Θ`
Ι	`Ι`	`Ι`	Κ	`Κ`	`Κ`	Λ	`Λ`	`Λ`	Μ	`Μ`	`Μ`
Ν	`Ν`	`Ν`	Ξ	`Ξ`	`Ξ`	Ο	`Ο`	`Ο`	Π	`Π`	`Π`
Ρ	`Ρ`	`Ρ`	Σ	`Σ`	`Σ`	Τ	`Τ`	`Τ`	Υ	`Υ`	`Υ`
Φ	`Φ`	`Φ`	Χ	`Χ`	`Χ`	Ψ	`Ψ`	`Ψ`	Ω	`Ω`	`Ω`
α	`α`	`α`	β	`β`	`β`	γ	`γ`	`γ`	δ	`δ`	`δ`
ε	`ε`	`ε`	ζ	`ζ`	`ζ`	η	`η`	`η`	θ	`θ`	`θ`
ι	`ι`	`ι`	κ	`κ`	`κ`	λ	`λ`	`λ`	μ	`μ`	`μ`
ν	`ν`	`ν`	ξ	`ξ`	`ξ`	ο	`ο`	`ο`	π	`π`	`π`
ρ	`ρ`	`ρ`	ς	`ς`	`ς`	σ	`σ`	`σ`	τ	`τ`	`τ`
υ	`υ`	`υ`	φ	`φ`	`φ`	χ	`χ`	`χ`	ψ	`ψ`	`ψ`
ω	`ω`	`ω`	ϑ	`ϑ`	`ϑ`	ϒ	`ϒ`	`ϒ`	ϖ	`ϖ`	`ϖ`

2.3 数学符号

特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码
∀	`∀`	`∀`	∂	`∂`	`∂`	∃	`∃`	`∃`	∅	`∅`	`∅`
∇	`∇`	`∇`	∈	`∈`	`∈`	∉	`∉`	`∉`	∋	`∋`	`∋`
∏	`∏`	`∏`	∑	`∑`	`∑`	−	`−`	`−`	∗	`∗`	`∗`
√	`√`	`√`	∝	`∝`	`∝`	∞	`∞`	`∞`	∠	`∠`	`∠`
∧	`∧`	`∧`	∨	`∨`	`∨`	∩	`∩`	`∩`	∪	`∪`	`∪`
∫	`∫`	`∫`	∴	`∴`	`∴`	∼	`∼`	`∼`	≅	`≅`	`≅`
≈	`≈`	`≈`	≠	`≠`	`≠`	≡	`≡`	`≡`	≤	`≤`	`≤`
≥	`≥`	`≥`	⊂	`⊂`	`⊂`	⊃	`⊃`	`⊃`	⊄	`⊄`	`⊄`
⊆	`⊆`	`⊆`	⊇	`⊇`	`⊇`	⊕	`⊕`	`⊕`	⊗	`⊗`	`⊗`
⊥	`⊥`	`⊥`	⋅	`⋅`	`⋅`

2.4 其他符号

特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码	特殊符号	命名实体	十进制编码
•	`•`	`•`	…	`…`	`…`
′	`′`	`′`	″	`″`	`″`	‾	`‾`	`‾`
⁄	`⁄`	`⁄`	℘	`℘`	`℘`	ℑ	`ℑ`	`ℑ`
ℜ	`ℜ`	`ℜ`	™	`™`	`™`	ℵ	`ℵ`	`ℵ`
←	`←`	`←`	↑	`↑`	`↑`	→	`→`	`→`
↓	`↓`	`↓`	↔	`↔`	`↔`	↵	`↵`	`↵`
⇐	`⇐`	`⇐`	⇑	`⇑`	`⇑`	⇒	`⇒`	`⇒`
⇓	`⇓`	`⇓`	⇔	`⇔`	`⇔`	∀	`∀`	`∀`
∂	`∂`	`∂`	∃	`∃`	`∃`	∅	`∅`	`∅`
∇	`∇`	`∇`	∈	`∈`	`∈`	∉	`∉`	`∉`
∋	`∋`	`∋`	∏	`∏`	`∏`	∑	`∑`	`−`
−	`−`	`−`	∗	`∗`	`∗`	√	`√`	`√`
∝	`∝`	`∝`	∞	`∞`	`∞`	∠	`∠`	`∠`
∧	`∧`	`⊥`	∨	`∨`	`⊦`	∩	`∩`	`∩`
∪	`∪`	`∪`	∫	`∫`	`∫`	∴	`∴`	`∴`
∼	`∼`	`∼`	≅	`≅`	`≅`	≈	`≈`	`≅`
≠	`≠`	`≠`	≡	`≡`	`≡`	≤	`≤`	`≤`
≥	`≥`	`≥`	⊂	`⊂`	`⊂`	⊃	`⊃`	`⊃`
⊄	`⊄`	`⊄`	⊆	`⊆`	`⊆`	⊇	`⊇`	`⊇`
⊕	`⊕`	`⊕`	⊗	`⊗`	`⊗`	⊥	`⊥`	`⊥`
⋅	`⋅`	`⋅`	⌈	`⌈`	`⌈`	⌉	`⌉`	`⌉`
⌊	`⌊`	`⌊`	⌋	`⌋`	`⌋`	◊	`◊`	`◊`
♠	`♠`	`♠`	♣	`♣`	`♣`	♥	`♥`	`♥`
♦	`♦`	`♦`				¡	`¡`	`¡`
¢	`¢`	`¢`	£	`£`	`£`	¤	`¤`	`¤`
¥	`¥`	`¥`	¦	`¦`	`¦`	§	`§`	`§`
¨	`¨`	`¨`	©	`©`	`©`	ª	`ª`	`ª`
«	`«`	`«`	¬	`¬`	`¬`
®	`®`	`®`	¯	`¯`	`¯`	°	`°`	`°`
±	`±`	`±`	²	`²`	`²`	³	`³`	`³`
´	`´`	`´`	µ	`µ`	`µ`	"	`"`	`"`
<	`<`	`<`	>	`>`	`>`	'	`'`	`'`
+	`+`	`+`	−	`−`	`-`

image-20210427115144748

MarkDown特殊符号编码.png

三：支持HTML元素

3.1 目前支持的 HTML 元素有：

`<kbd> `等，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

image-20210427111059903

3.2 转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗** 
\*\* 正常显示星号 \*\*

image-20210427111149683

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

四：流程图

以下几个

md-flow

实例效果图如下：

1、横向流程图源码格式：

```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]


**2、竖向流程图源码格式：**

graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]


**3、标准流程图源码格式：**

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、标准流程图源码格式（横向）：**

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时序图源码样例：**

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？


**6、UML时序图源码复杂样例：**

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标准时序图样例：**

%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!


**8、甘特图样例：**

%% 语法示例
        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>`标签使文本看起来像按钮，这与常规反引号文本略有不同。

![image-20210427112406593](https://img.haomeiwen.com/i12905269/8a2cdd068988daa7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### 3. 可视化差异

~~~javascript
```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
`` `
~~~

```diff
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>

<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>

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 可用

markdown你不知道的高级使用技巧

一：图片操作指南

单张图片排版

多张张图片排版

居中单张图片排版

修改图片大小

二：特殊符号编码

2.1 ASCII 字符

2.2 希腊字母

2.3 数学符号

2.4 其他符号

三：支持HTML元素

3.1 目前支持的 HTML 元素有：

`<kbd> <b> <i> <em> <sup> <sub> <br>`等，如：

3.2 转义

四：流程图

4. 隐藏不必要的输出

5. 使图像文字居中

6. 较小的文字

7. 加注音

猜你喜欢

热点阅读

markdown你不知道的高级使用技巧

一：图片操作指南

单张图片排版

多张张图片排版

居中单张图片排版

修改图片大小

二：特殊符号编码

2.1 ASCII 字符

2.2 希腊字母

2.3 数学符号

2.4 其他符号

三：支持HTML元素

3.1 目前支持的 HTML 元素有：

<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：

3.2 转义

四：流程图

4. 隐藏不必要的输出

5. 使图像文字居中

6. 较小的文字

7. 加注音

猜你喜欢

热点阅读

`<kbd> <b> <i> <em> <sup> <sub> <br>`等，如：