Markdown介绍
- Markdown是一种文本标记语言，用于快速文档排版
- Markdown文件为纯文本文件，后缀名为 .md
- Markdown介于Word和HTML之间
- 比起Word，Markdown是纯文本，排版文档轻量、方便、快速。
- 比起HTML，Markdown简单直观，易读、易写、易修改
Markdown优点
- 简单、流行、B格高且使用广泛，排版功能足够使用(不足之处可用HTML、CSS弥补)
- 广泛用于用于办公、文字工作者、程序员等人员日常文档的写作排版
Markdown缺点
- 太简单，很多复杂的专业排版样式功能无法实现，只适用于要求不高的文字排版场合（办公、技术文档等）
Markdown编辑器
- 任意文本编辑器
- 专业Markdown编辑器：支持Markdown文档排版后预览，适合文字工作者
- MAC：mou，macdown
- Windows：MarkdownPad
- 自带预览功能的专业代码编辑器：适合编程、分析等理工类应用
- VSCode 原生支持预览
- Atom 原生支持预览，并可将md文件另存为HTML文件
- Jupyter Notebook 科学工作者和程序员用交互式笔记本，网页版，可用于数据分析、教学、演讲等
Markdown预览
- Atom：
- 预览快捷键：Ctrl+Shift+M
- 或：Ctrl+Shift+P - 命令窗口输入 markdown ，回车
- VSCode：md文件右上方-打开侧边栏预览
Markdown语法
Markdown有很多扩展方言，这里使用GFM（Github Flavored Markdown）
如何速成Markdown？
一份Markdown格式的文件，
应该要能以纯文字形式直接发表，
并且一眼看过去不存在任何标记用的标签或格式指令。- John Gruber
- 不要机械记忆Markdown标记，如果由我发明一种格式标记语言，写文章时候如何表示标题、段落、列表，你就知道Markdown是怎么发明出来的了。
Markdown基本语法：
- 1：标题(
# h1-h6) - 2：空格、段落和换行(
<p><br>) - 3：超链接(
[]() <a>) - 4：图片(
![]() <img>)和公式 - 5：列表(
<ul><ol><li>) - 6：代码块(
``` <pre>) - 7：着重、强调(
** <em><strong>) - 8：表格(
-|-|- <table>) - 9：转义字符(
\) - 10：分隔线(
--- <hr>)
1：标题(# h1-h6)
<!-- 标题用 2个或2个以上的=或- -->一级标题
==二级标题
--<!-- 或者： --># 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
2：空格、段落和换行(<p><br>)
- 空格：直接在编辑器空格或换行，md都只显示为一个空格
- 段落：回车两次，编辑器换两行，显示为段落（p标签）
少见情况：
- 多个空格：语义性原因不建议这么做，可直接写HTML转义字符
- 换行：上一行结尾加两个空格再回车（
<br>）。建议少用，可用无序列表代替 - 连续换行多行：语义性原因不建议这么做，可直接写HTML换行标签
<br>
空 格
没 换行段落<!-- 少见情况 -->本行结尾空两格
回车就会换一行连续换行多行
<br><br><br>
换行结束
空 格没 换行
段落
本行结尾空两格
回车就会换一行
连续换行多行
换行结束
3：超链接([]() <a>)
3.1：直接写链接地址：http://www.aaa.com/ (VSCode不支持)3.2：[超链接](http://www.aaa.com/)3.3：[本页面锚点](#abc)
<div id="abc">点击跳转到本页面锚点位置，多用于文档目录</div>
4：图片(![]() <img>)和公式
- 图片只比超链接前面多个 !
- 图片路径，相对链接、绝对链接均可
- 复杂的写法，例如 图片加超链接、图片设宽高 等，建议用HTML或CSS实现
URL地址中带括号的图片，一般是公式，
图片调用和URL链接隔行书写，
- 一行调用(描述可以不写)，
- 一行定义图片URL地址(括号内名字或数字对应)。
![][gs][gs]: http://latex.codecogs.com/gif.latex?\prod%20\(n_{i}\)+1
5：列表(<ul><ol><li>)
* 无序列表1
* 无序列表2* 无序列表3* 无序列表4* 无序列表51. 有序列表1
1. 有序列表21. 有序列表31. 有序列表41. 有序列表5
无序列表
- 无序列表1
- 无序列表2
- 无序列表3
- 无序列表4
- 无序列表5
- 无序列表3
有序列表
- 有序列表1
- 有序列表2
- 有序列表3
- 有序列表4
- 有序列表5
- 有序列表3
6：代码块(``` <pre>)
` 反引号
- 将编辑器内程序代码原格式显示
- 内部的HTML特殊符号如
< > &和都会自动转义为< > & - 代码块要离上下内容空一行，否则易出问题
1：行内代码块，一个反引号，HTML转义为<code>包裹区块，保留布局
这是`<strong>行内代码块</strong>`都在一行内
效果：这是<strong>行内代码块</strong>都在一行内
2：块级代码块，三个反引号包含，```，HTML转义为<pre><code>包裹区块，保留布局
```
<div>这是块级代码块
</div>
```
效果：
<div>这是块级代码块
</div>
如要带代码高亮效果，3个反引号开始处加上编程语言名
```html
<div>这是块级代码块
</div>
```
效果：
<div>这是块级代码块
</div>
如要显示一个反引号或者<pre>标签，用两个反引号包裹文档 ``
在这个``文本中夹杂一个`反引号如何显示``？
效果：在这个文本中夹杂一个`反引号如何显示？
如要显示3个反引号，用<pre>标签标签包裹文档
<pre>
```javascript
function aaa(){var a = 1;
}
```
</pre>
效果：
```javascript
function aaa(){var a = 1;
}
```
7：着重、强调(** <em><strong>)
着重 斜体 em *着重 斜体 em*
强调 粗体 strong **强调 粗体 strong**
8：表格(-|-|- <table>)
默认左对齐
表头1 | 表头2 | 表头3
------|------|------
行1列1 | 行1列2 | 行1列3
行2列1 | 行2列2 | 行2列3
行3列1 | 行3列2 | 行3列3
| 表头1 | 表头2 | 表头3 |
|---|---|---|
| 行1列1 | 行1列2 | 行1列3 |
| 行2列1 | 行2列2 | 行2列3 |
| 行3列1 | 行3列2 | 行3列3 |
9：转义字符(\)
\ 反斜杠
- 想在页面显示md标记，
- 或者你不小心写了其他重复md标记，例如：
### 标题__也是着重标记__1986. 数字+点，被转成有序列表
1986. 数字+点，被转成有序列表
标题
也是着重标记
- 数字+点，被转成有序列表
- 数字+点，被转成有序列表
反斜杠转义
\### 标题\__也是着重标记__1986\. 数字+点，被转成有序列表
1986\. 数字+点，被转成有序列表
### 标题
_也是着重标记_
1986. 数字+点，被转成有序列表1986. 数字+点，被转成有序列表
10：分隔线(--- <hr>)
---
- 前面空一行
- 本行最少三个-表示水平线，分隔线
Markdown拓展应用
1：Markdown保存为HTML
- 最简单的方法：
Atom - 预览界面右键 - Save As HTML（注意图片路径默认为绝对路径，需要修改为相对路径） - 高级方法：
- 使用基于Node.js的gitbook库自动生成HTML文档
- 使用基于Python的Sphinx库生成HTML文档
- 使用基于Haskell的Pandoc转换任意电子文档格式
2：在Markdown中直接写HTML/CSS/JavaScript
不在md范围内的标记或样式，或者说用Markdown很难实现的标记或样式，可以直接写HTML/CSS/JavaScript语言实现
你完全可以把md文档当成HTML文档在里面写原生HTML/CSS/JS代码（注意环境支持度）
- HTML： 所有编辑器都支持
- CSS： 大部分支持。Atom VSCode支持，JupyterNotebook只支持行内样式
- JS： 基本都不支持。VSCode设置开启后支持，其他环境如想写JS可导出HTML文档后自行编辑
<div class="d1">d111</div>
<div id="d2">d222</div><style>
.d1{background:#f00;
}
</style><script>
d2.style.background = '#00f';
</script>
d111
d222
3：在Markdown中载入基于文本的公式
上面图片标签讲了怎样载入基于图片的公式，怎样载入基于文本的公式？
- MathJax是一个渲染公式的JS库，LaTex语法书写
- 使用MathJax显示公式，文档浏览器必须支持JS
- Jupyter不需操作，原生支持
- VSCode需手动载入MathJax.js，再启用JS后支持
- Atom默认过滤JS，不支持
使用方式：
- 载入MathJax.js
- Jupyter不需要，默认已载入
- 载入JS库路径问号后面的参数必须带
CDN远程载入
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>或下载JS库后本地载入
<script src="images/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
- 将LaTeX公式写入
$$ $$之间，空格分隔
$$ P(A \mid B) = \frac{P(B \mid A) \, P(A)}{P(B)} $$
效果(需启用JS支持才可预览)：
$$ P(A \mid B) = \frac{P(B \mid A) \, P(A)}{P(B)} $$
- myscript网站可以手写公式，自动转为LaTeX语法：http://webdemo.myscript.com/views/math.html#
