一文秒懂markdown

文章目录

1. markdown 是什么
2. markdown 基础语法
- 2.1. 使用#来表示标题
- 2.2. 分块的引用
- 2.3. 插入图片
- 2.4. 插入链接
- 2.5. 插入列表
- 2.6. 添加分割线
- 2.7. 文字强调
3. 高级语法
- 3.1. 插入代码块
- 3.2. 插入表格
4. 补充语法
- 4.1. 如何缩进
- 4.2. 如何换行
- 4.3. 如何给标题添加序号
- 4.4. 给特殊字符进行转义
- 4.5. 如何进行跳转
- 4.6. 如何自动生成目录
- 4.7. 校验 md 的格式
- 4.8. 如何浏览 markdown 文件
- 4.9. 如何修改图片的样式
- 4.10. 如何插入音乐
- 4.11. 如何插入视频
- 4.12. 如何自定义字体的样式
- 4.13. 如何渲染 md 文件
- 4.14. Typora 编辑器常用快捷键
- 4.15. 配置图床

1. markdown 是什么

markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。人话即：markdown 类似于 office word，可以使用简单的语法来实现完美的布局。其效果图如下：

2. markdown 基础语法

2.1. 使用#来表示标题

#h1 字体最大
######h6 字体最小

2.2. 分块的引用

可以使用 >段落xx 放于句首，将句子进行分块

段落

2.3. 插入图片

使用 ！[图片名称](图片地址) 来插入图片

2.4. 插入链接

使用 [超链接名称](链接地址) 来添加超链接，比如百度百科

2.5. 插入列表

1.使用 * + -后接空格 来实现无序列表
2.使用 1.后接空格 来实现有序列表

* 黄小古 1
* 黄小古 2
1. 黄小古 1
2. 黄小古 2

效果如下：

黄小古 1

黄小古 2

黄小古 1

黄小古 2

备注 1：在有序列表中，markdown 只关注第一项，后面的序号可以随便写，比如每一项都写 1.
备注 2：如果不能正常显示列表时，请使用 4 个空格进行缩进

2.6. 添加分割线

1.使用 *** 来添加分割线
2.使用 --- 来添加分割线
比如：

2.7. 文字强调

1.使用 *文字* 来倾斜字体
2.使用 _文字_ 来倾斜字体
3.使用 **文字** 来加粗字体
4.使用 __文字__ 来加粗字体
5.使用 ***文字*** 来加粗字体
6.使用 ___文字___ 来加粗字体

测试一下文字斜体
测试一下文字加粗
测试一下文字加粗斜体

备注：如果使用 _ 失效，可以试一下在前面加空格

3. 高级语法

3.1. 插入代码块

1.如果是在行内插入代码，可以使用 `代码代码`

2.如果是插入整段代码，可以使用 ```

```javascript
代码代码代码
```

let url = "http://www.baidu.com";

备注：``` 或 ` 可以用于生成文字区域（转义字符不需要转义），如
```html
测试特殊字符#
```
测试特殊字符#

3.2. 插入表格

字段名|字段长度|备注
:---:|:---:|:---:
name|18|用户名
sex|男|性别

字段名	字段长度	备注
name	18	用户名
sex	男	性别

备注 1： :---: 左右两边的 : 用于控制表格内容的位置。中间的 - 数量没有要求。左边 : 表示居左，右边 : 表示居右
备注 2：表格后面要有分行

4. 补充语法

4.1. 如何缩进

当输入多个 空格 时，最多只显示一个空格。在 md 中，需要使用特殊字符来插入空格。
1.  一个空格
2.&ensp; 两个空格
3.&emsp; 四个空格

一个空格
两个空格
四个空格

4.2. 如何换行

1.可以使用 <br/> 进行手动换行
2.也可以在句末添加 两个空格 来自动换行

4.3. 如何给标题添加序号

1.在 VS Code 编辑器中安装 Markdown-index 插件
2.在编辑好的 md 文件中，使用快捷键 F1 打开命令行窗口
3.输入 Markdown add index

注：注意命令行的大小写

4.4. 给特殊字符进行转义

可以使用 \+特殊字符 进行转义，如输入 \#

4.5. 如何进行跳转

1.添加跳转点 [关注一下嘛](#jump)
2.在某处添加定点 <span id="jump"/>

4.6. 如何自动生成目录

使用 [TOC] 来生成目录，其会捕获所有带 # 的标题

4.7. 校验 md 的格式

在 VS Code 编辑器中安装 dmlint 插件即可

4.8. 如何浏览 markdown 文件

1.下载 Markdown Reader 插件，并安装在 Chrome 浏览器中
2.将 .md 文件拖入浏览器中即可
Markdown Reader 插件下载

4.9. 如何修改图片的样式

使用 html 标签来修改图片的样式
1.修改图片位置:

<div align=center><img width="" height ="" src=""/>
</div>

2.修改图片大小:

<img width="" height ="" src=""/>

居中、限制图片大小的效果如下图

3.使用 七牛云图床来修改图片的大小
官方文档
例子：在 url 后面增加 ?imageView2/2/w/1000/q/100!
备注：2 表示按比例变化，w 表示宽度，q 表示缩略图的质量（q 只对 jpg 有效），! 表示强制使用该质量

4.有时候图片加载的过程中会出现样式跳动，怎么办呢？可以先给图片设定大小
4.1 安装 markdown-image-size，在 cmd 中输入 npm install -g markdown-image-size
4.2 使用指令 mimgs -s "dirPath or baseUrl" file/to/*.md -o 来将所有的图片设置长度和宽度
4.3 原理：将会解析 markdown 文本，得到 <img> ![]() 文本中的 src ，通过读本地文件或发送请求得到图片数据，从而得到图片大小，然后进行文本替换/插入
4.4 参考指令

 Usage: mimgs [options] <files...>Options:-v --version                get current version-h --help                   how to use it-s --source <path or url>   base path from relative path-o --overwrite              overwrite files-q --quiet                  Don't print any-l --log                    Do print log, Don't print text--ignore-relative           ignore relative path, overrides any -s options.

4.10. 如何插入音乐

使用 html 标签来插入音乐
1.在网易云音乐中导出音乐的外链（要求是 iframe 外链）
2.插入代码

<div align=center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="" height="" src=""/>
</div>

备注：如何生成网易云的音乐外链？看下面的 gif

<div align=center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=30375690&auto=0&height=66"></iframe></div>

备注：如果不自动播放，将 auto 设置为 0

4.11. 如何插入视频

使用 html 标签来插入视频
1.找到视频的外链（要求是 iframe 外链）
2.插入代码

<iframe width="" height="" src="" frameborder="0" allowfullscreen/>

备注：如何获取视频的外链呢？看下面 gif 动图

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=k0020b47y1z" allowFullScreen="true"></iframe>

4.12. 如何自定义字体的样式

使用 html 标签来自定义字体样式
1.插入代码

<font color="" size="">文字</font>

测试一下<font color="green" size="6px">字体</font>样式

测试一下字体样式

4.13. 如何渲染 md 文件

1.打开 Md2All 网站
2.将 md 代码复制到该网站的文本框中
3.点击复制（会自动复制 Md2All 网站生成的 html 文档）
4.将 html 文档拷贝到需要的地方，如 CSDN、微信推文
Md2All 地址

4.14. Typora 编辑器常用快捷键

热键	描述
ctrl + `+ / -`	修改字体的大小
ctrl + b	字体加粗
ctrl + i	字体倾斜
ctrl + u	字体加下划线
alt + shift + 5	添加删除线
ctrl + t	插入表格？
ctrl + shift + l	关闭/打开左侧导航栏
ctrl + /	切换 markdown 基本语法和展示效果
ctrl + \	清除格式

4.15. 配置图床

申请域名并进行备案
在七牛云中添加域名

在域名服务商中添加解析记录【用于域名的二次跳转】

字段	值	描述
记录类型	CNAME	域名跳转
主机记录	img	填入在七牛云中配置的主机
解析线路	默认
记录值		填入七牛云给我们的 CNAME 值
TTL	10 分钟

备注：本例以阿里云服务器作为案例展示

等待 8-15 分钟后，切换图床的域名

使用 PicGo 作为图床客户端
PicGo 地址

简称	地区
z0	华东
z1	华北
z2	华南
na0	北美
as0	东南亚

使用
a、快捷键 ctrl + shift + p 实现快速上传，并在剪贴板中生成图片的地址
b、将图片拖拽到上传区也可以实现图片的上传