MD编辑器用法讲解

引用文本 Blockquotes

> 引用文本 Blockquotes


引用的行内混合 Blockquotes

引用&＃xff1a;如果想要插入空白换行即
标签&＃xff0c;在插入处先键入两个以上的空格然后回车即可&＃xff0c;

1.3 各级标签

标签 1

标签 2

标签 3

标签 4

标签 5

标签 6

# 标签 1
## 标签 2
### 标签 3
#### 标签 4
##### 标签 5
###### 标签 6


1.4. 列表

1.4.1 无序列表&＃xff08;减号&＃xff09;

• 列表一
• 列表二
• 列表三

- 列表一
- 列表二
- 列表三


1.4.2 无序列表&＃xff08;星号&＃xff09;

• 列表一
• 列表二
• 列表三

* 列表一
* 列表二
* 列表三


1.4.3 无序列表&＃xff08;加号和嵌套&＃xff09;

• 列表一
• 列表二
  • 列表二-1
  • 列表二-2
  • 列表二-3
• 列表三
  • 列表一
  • 列表二
  • 列表三

&＃43; 列表一
&＃43; 列表二&＃43; 列表二-1&＃43; 列表二-2&＃43; 列表二-3
&＃43; 列表三* 列表一* 列表二* 列表三


1.4.4 有序列表

1. 第一行
2. 第二行
3. 第三行

1. 第一行
2. 第二行
3. 第三行


1.4.5 任务列表(GFM task list)

• GFM task list 1
• GFM task list 2
• GFM task list 3
  • GFM task list 3-1
  • GFM task list 3-2
  • GFM task list 3-3
• GFM task list 4
  • GFM task list 4-1
  • GFM task list 4-2

- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3- [ ] GFM task list 3-1- [ ] GFM task list 3-2- [ ] GFM task list 3-3
- [ ] GFM task list 4- [ ] GFM task list 4-1- [ ] GFM task list 4-2


1.5 链接

1.5.1普通链接

普通链接

[普通链接](http://www.sa128.cn/)


普通链接带标题

[普通链接带标题](http://www.sa128.cn/ "普通链接带标题")


1.5.2直接链接

直接链接&＃xff1a;https://www.sa128.cn

直接链接&＃xff1a;


1.6 代码显示与预格式文本

1.6.1 行内代码

ptintf("hello,world");

&＃96;ptintf("hello,world");&＃96;


1.6.2 代码块

#includeint main(){ptintf("hello,world");return 0;
}


c
#includeint main(){ptintf("hello,world");return 0;
}


1.6.3 预格式化文本&＃xff1a;

Q&＃xff1a;什么预格式化文本&＃xff1f;

A&＃xff1a;格式化输出&＃xff0c;就是

标记之间的内容按原文件的版式输出&＃xff0c;空格换行不会忽略&＃xff0c;pre标签很适合显示计算机代码。

这个例子演示使用 pre 标签
对空行和 空格
进行控制

这个例子演示使用 pre 标签
对空行和    空格
进行控制

1.7 图片

1.7.1图片插入

![](https://i.loli.net/2019/08/23/oW6UcAqpVOSrZCu.jpg)


TIP:![](在这里放入你的图片地址)


Q&＃xff1a;为什么我们网站的MD不能在本地上传图片&＃xff1f;

A&＃xff1a;因为过量的图片会浪费服务器资源&＃xff0c;所以我们需要将图片上传至 https://sm.ms/ &＃xff0c;然后将其中的MAKEDOWN连接放入即可。

1.8 表格

| 项目 | 价格 | 数量 |
| -------- | -----: | :----: |
| 计算机 | $1600 | 5 |
| 手机 | $12 | 12 |
| 管线 | $1 | 234 |


| Function name | Description |
| ------------- | ------------------------------ |
| &＃96;help()&＃96; | Display the help window. |
| &＃96;destroy()&＃96; | **Destroy your computer!** |


1.9 特殊符号与实体符号

1.9.1 特殊符号

© & ¨ ™ ¡ £
& <> ¥ € ® ± ¶ § ¦ ¯ « ·

X² Y³ ¾ ¼ × ÷ »

18ºC " &＃39;

实际填写应加“&＃xff1b;”符号
© & ¨ &trade ¡ £
& < > ¥ &euro ® ± ¶ § ¦ ¯ « ·X² Y³ ¾ ¼ × ÷ »18º C " &apos


1.9.2 实体符号

实体编号:实际填写应加“&＃xff1b;”符号

1.10 分页

1.10.1分页符

Q:这个符号有什么用&＃xff1f;
A&＃xff1a;在到处PDF的情况下&＃xff0c;在你想要的分页就位子插入就可以了&＃xff01;

1.11 emoji

&＃x1f60b;

:yum:


1.11.1 参考网站

https://www.webfx.com/tools/emoji-cheat-sheet/

Print Test: Ctrl &＃43; P

2 插件部分内容

2.1 自动生成目录&＃xff08;新版过时&＃xff0c;老版有效&＃xff09;

你的markdown文件中必须存在目录结构&＃xff0c;即不同级别的标题。

把你的markdown文件转化成html&＃xff0c;这一步可以使用sublime text的插件 Markdown Preview 或 OmniMarkupPreviewer 来完成。推荐使用后者&＃xff0c;预览效果相对丰富一些&＃xff1b;

2.1.(2)前期工作

下载markdownPad软件.
MarkdownPad安装包下载链接
链接&＃xff1a;https://pan.baidu.com/s/1o7c4W7C2d8zCPh5z7y4IvQ
提取码&＃xff1a;e4bf

下载解压之后&＃xff0c;找要MarkdownPad2.exe打开

点击Enter Key 进入输入邮箱和License key
Email address : Soar360&＃64;live.com
License key :
GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B&＃43;L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh&＃43;nzX1xoVQ8NAuH&＃43;s4UcSeQ&＃61;&＃61;

然后我们把markdown文件用markdownPad软件打开。左边是源码右边是效果。
然后我们点击菜单栏的“文件”&＃xff0c;之后是“导出”&＃xff0c;再选择导出的格式&＃xff0c;可以看到有html和pdf两项
保存为html文件后&＃xff0c;markdown文件可以直接用浏览器打开。
保存为pdf文件后&＃xff0c;markdown文件可以直接用pdf阅读器打开。

2.1.2 模板适用

正式开始
首先下载模板

打开下载的文件&＃xff0c;可以看到两个文件夹&＃xff0c;一个是“官网示例”&＃xff0c;另一个是“我的模板”,我们只需要使用“我的模板”&＃xff1b;

将“我的模板”复制一份出来&＃xff0c;然后用文本编辑器打开其中的 markdownToc.html 。里面标记了两条很明显的内容分割线&＃xff0c;你只需要把自己的html文档的正文部分复制到两条内容分割线之间即可&＃xff0c;无需进行其他编辑。

2.1.1 TOC/TOCM&＃xff08;新版&＃xff09;

2.1.1.1 TOC

在顶部写入[TOC]即可根据#生成目录&＃xff1b;

2.1.1.2 TOCM

在顶部写入[TOCM]即可根据#生成目录&＃xff08;下拉菜单形式&＃xff09;&＃xff1b;

2.1.1.3 参考

参考本页面顶部

2.2 绘制流程图 Flowchart

2.2.1 简单事例

2.2.2 说明

这样几行简单的代码就生成了一个优雅的流程图。
流程图大致分为两段&＃xff0c;第一段是定义元素&＃xff0c;第二段是定义元素之间的走向。

2.2.3 定义元素的语法

tag&＃61;>type: content:>url
tag就是元素名字&＃xff0c;
type是这个元素的类型&＃xff0c;有6中类型&＃xff0c;分别为&＃xff1a;
start # 开始
end # 结束
operation # 操作
subroutine # 子程序
condition # 条件
inputoutput # 输入或产出
content就是在框框中要写的内容&＃xff0c;注意type后的冒号与文本之间一定要有个空格。
url是一个连接&＃xff0c;与框框中的文本相绑定

2.2.4 连接元素的语法

用->来连接两个元素&＃xff0c;需要注意的是condition类型&＃xff0c;因为他有yes和no两个分支&＃xff0c;所以要写成
c2(yes)->io->e
c2(no)->op2->e

2.2.5 更多语法参考

http://adrai.github.io/flowchart.js/

2.3. 时序图 squence

2.3.1 时序图事例

sequence
title: MarkDown 画sequence图
participant finefine as ff
participant kunkun as kk
note right of kk:kunkun尽情舞蹈...
ff-->kk: this is kunkun?
kk-->kk:卧槽什么鬼&＃xff1f;
kk-->ff: yes!


2.3.2 时序图部分语法

2.3.3 更多语法参考

https://bramp.github.io/js-sequence-diagrams/

科学公式 TeX(KaTeX)

E&＃61;mc2E&＃61;mc^2E&＃61;mc2

2.3.4 行内公式

E&＃61;mc2E&＃61;mc^2E&＃61;mc2行内的公式&＃xff0c;行内的E&＃61;mc2E&＃61;mc^2E&＃61;mc2公式。

$$E&＃61;mc^2$$行内的公式&＃xff0c;行内的$$E&＃61;mc^2$$公式。


2.3.5 多行公式

\displaystyle
\left( \sum\_{k&＃61;1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k&＃61;1}^n a\_k^2 \right)
\left( \sum\_{k&＃61;1}^n b\_k^2 \right)


\displaystyle\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} &＃61; 1&＃43;\frac{e^{-2\pi}} {1&＃43;\frac{e^{-4\pi}} {1&＃43;\frac{e^{-6\pi}}{1&＃43;\frac{e^{-8\pi}}{1&＃43;\cdots} }}}


f(x) &＃61; \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi


math
\displaystyle
\left( \sum\_{k&＃61;1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k&＃61;1}^n a\_k^2 \right)
\left( \sum\_{k&＃61;1}^n b\_k^2 \right)katex
\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} &＃61; 1&＃43;\frac{e^{-2\pi}} {1&＃43;\frac{e^{-4\pi}} {1&＃43;\frac{e^{-6\pi}}{1&＃43;\frac{e^{-8\pi}}{1&＃43;\cdots} }}}latexf(x) &＃61; \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi


2.3.6 更多公式参考

https://katex.org/

3 其他

3.1 插入部分

3.1.1 插入图片并居中

TIP:同理&＃xff0c;left靠左 right靠右。
TIP2:平时的时候不要这写&＃x1f60b;。

3.1.2 插入音频

3.1.3 插入视频

3.1.4 调整大小