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. 
两个空格
3. 
四个空格
一个空格
两个空格
四个空格
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=""/>
居中、限制图片大小的效果如下图
![](http://img.hxiaogu.top/md-20200404122523.png)
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、将图片拖拽到上传区也可以实现图片的上传