标记语言Markdown介绍以及日常使用

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>

空     格没 &nbsp;&nbsp;&nbsp;&nbsp;换行段落<!-- 少见情况 -->本行结尾空两格  回车就会换一行连续换行多行<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实现
• 
  

![图片描述](images/markdown.png)

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. 有序列表11. 有序列表2    1. 有序列表3        1. 有序列表4        1. 有序列表5

无序列表

• 无序列表1
• 无序列表2
  • 无序列表3
    • 无序列表4
    • 无序列表5

有序列表

1. 有序列表1
2. 有序列表2
   1. 有序列表3
      1. 有序列表4
      2. 有序列表5

---

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>```javascriptfunction aaa(){  var a = 1;}```</pre>

效果：

```javascriptfunction 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. 数字+点，被转成有序列表

标题

也是着重标记

1. 数字+点，被转成有序列表
2. 数字+点，被转成有序列表

反斜杠转义

\### 标题\__也是着重标记__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，不支持

使用方式：

1. 载入MathJax.js
2. Jupyter不需要，默认已载入
3. 载入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>

1. 将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#