Markdown 学习

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

使用 Markdown 的优点

• 专注你的文字内容而不是排版样式。
• 轻松的导出 HTML、PDF 和本身的 .md 文件。
• 纯文本内容，兼容所有的文本编辑器与字处理软件。
• 可读，直观。适合所有人的写作语言。

工具

工具茫茫多

• windows
  • markdownPad2
  • MarkPad
• Linux
  • ReText
• Mac
  • Mou
• 在线
  • Dillinger.io
  • Markable.in
• 浏览器插件
  • MaDe (chrome)

MarkdownPad2.5 注册码

邮箱： Soar360@live.com

授权秘钥： GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==

语法

标题

标题有六级

由 # 组成

类比于 h1 ~ h6

例如：

# 这是一级标题（H1，通常用于文档标题）
## 这是二级标题（H2，有些渲染器会为二级标题添加 hr 底线）
### 这是三级标题（H3）
#### 这是四级标题（H4）
##### 这是五级标题（H5）
###### 这是六级标题（H6）

效果：

这是一级标题（H1，通常用于文档标题）

这是二级标题（H2，有些渲染器会为二级标题添加 hr 底线）

这是三级标题（H3）

这是四级标题（H4）

这是五级标题（H5）

这是六级标题（H6）

注：在 # 后加一个空格再跟标题

首行缩进

   写文章时，我们常常希望能够首行缩进，这时可以在段首加入   或 &nbsp 来输入一个空格. 加入   来输入两个空格。这里的空格是英文状态的空格，英文状态的两个空格相当于中文状态的一个空格

添加空行

添加空行可以结束先前的格式状态。个人建议在改变格式时，均添加一个空行

例如：

> 引用状态
[空行]
### 标题状态
[空行]
---
[空行]
- 列表状态
- 列表状态
[空行]

效果：

引用状态

标题状态

• 列表状态
• 列表状态

换行

换行的时候 结尾要加上 两个空格。

在当前行的结尾加 2 个空格 这行就会新起一行

分隔符

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。当前后都有段落时，请空出一行。下面每种写法都可以建立分隔线：

前面的段落
[空行]
* * *
***
*****
- - -
---------------------------------------
[空行]
后面的段落

前面的段落

后面的段落

强调

• 斜体：使用 两个星号 ** 中间夹杂的就是 斜体, 例如：*斜体* _斜体_ 斜体 斜体
• 粗体： 使用 四个星号 **** 中间夹杂的就是 粗体, 例如：**粗体** _粗体_ 粗体 粗体
• 粗斜体文本: 使用 四个星号 **** 中间夹杂的就是 粗斜体文本, 例如：****粗斜体**** ____粗斜体____ **粗斜体** __粗斜体__
• 删除线: 使用 两个波浪线 ~ 中间夹杂的就是 删除线, 例如: ~~删除线~~ 删除线

但是，如果你的 * 、 _ 和 ~ 两边都有空白的话，它们就只会被当成普通的符号：这是一段* 文本强调 *的说明示例。

\*如果要在文字前后直接插入普通的星号或底线，你可以用反斜线（转义符）\*：*如果要在文字前后直接插入普通的星号或底线，你可以用反斜线（转义符）*

无序列表

使用 + - * 都表示无序列表

注：后面也需要跟一个空格

例如：

- 使用 - 号
	- 吃饭
	- 睡觉
	- 打豆豆
	- 再打豆豆
		- 接着打豆豆
- 使用 + 号
	+ 吃饭
	+ 睡觉
	+ 打豆豆
- 使用 * 号
	* 吃饭
	* 睡觉
	* 打豆豆

效果：

• 使用 - 号
  • 吃饭
  • 睡觉
  • 打豆豆
  • 再打豆豆
    • 接着打豆豆
• 使用 + 号
  • 吃饭
  • 睡觉
  • 打豆豆
• 使用 * 号
  • 吃饭
  • 睡觉
  • 打豆豆

有序列表

使用 1. 2. 3. 可以表示有序列表

注：后面也需要跟一个空格

例如：

1. 买菜
2. 洗菜
6. 切菜
4. 炒菜
5. 吃菜
9. 洗碗

效果：

1. 买菜
2. 洗菜
3. 切菜
4. 炒菜
5. 吃菜
6. 洗碗

注：前面数字可以不按顺序来

列表嵌套

1. 列出所有元素：
    - 无序列表元素 A
        1. 元素 A 的有序子列表
    - 前面加四个空格
2. 列表里的多段换行：
    前面必须加四个空格，
    这样换行，整体的格式不会乱
3. 列表里引用：

    > 前面空一行

    > 仍然需要在 >  前面加四个空格

4. 列表里代码段：

    ```
    前面四个空格，之后按代码语法 ``` 书写
    ```

        或者直接空八个，引入代码块

1. 列出所有元素：
   • 无序列表元素 A
     1. 元素 A 的有序子列表
   • 前面加四个空格
2. 列表里的多段换行： 前面必须加四个空格， 这样换行，整体的格式不会乱

3. 列表里引用：

   前面空一行

   仍然需要在 > 前面加四个空格

4. 列表里代码段：

    前面四个空格，之后按代码语法 ``` 书写
   

    或者直接空八个，引入代码块
   

引用

使用 > 表示引用

例如：

> 海明威曾经写过：我可以被杀死，但是不可以被打败

效果：

海明威曾经写过：我可以被杀死，但是不可以被打败

引用嵌套

- 引用里嵌套引用

> 最外层引用
> > 多一个 > 嵌套一层引用
> > > 可以嵌套很多层

- 引用里嵌套列表

> - 这是引用里嵌套的一个列表
> - 还可以有子列表
>     * 子列表需要从 - 之后延后四个空格开始

- 引用里嵌套代码块

>     同样的，在前面加四个空格形成代码块
>
> ```
> 或者使用 ``` 形成代码块
> ```

• 引用里嵌套引用

最外层引用

多一个 > 嵌套一层引用

可以嵌套很多层

• 引用里嵌套列表

• 这是引用里嵌套的一个列表
• 还可以有子列表
  • 子列表需要从 - 之后延后四个空格开始

• 引用里嵌套代码块

同样的，在前面加四个空格形成代码块

或者使用 ``` 形成代码块

表格

| 默认对齐 | 居左对齐 | 居中对齐 | 居右对齐 |
|---|:---|:---:|---:|
| 窗前 | 明月 | 光 |，|
| 疑是 | 地上 | 霜 |，|

| 姓名 | 性别 | 年纪 | 班级 |
|--|:--|:--:|--|
| 张三 | 男 | 29|0830|
| 李四 | 女 | 28|0830|

| 时间 | 地点 | 人物 | 事件事件事件事件事件事件事件 |
|--|--|--|:--:|
| 上午 | 北京 | 我 | 吃面 |

效果：

注：表格开始与结尾都需要一行空行

插入代码

插入代码的方式有两种

1. 在每行代码前加入 4 个空格或者添加一个制表符（TAB 键）.制表符长度为 4
2. 在代码两侧添加三个反引号 “```“。

方式一

其缩进是相对于当前格式状态下的。

例如：

- 列表项
- 列表项
[空行]
[TAB][TAB]printf("hello world!");
[空行]
本例中制表符长度为 2

效果：

• 列表项

• 列表项

    printf("hello world!");
  

方式 2

如果你只想高亮语句中的某个函数名或关键字，可以使用这个符号 ` 中间夹着代码 `function_name()` function_name() 实现

通常编辑器根据代码片段适配合适的高亮方法，但你也可以用 ``` 包裹一段代码，并指定一种语言

```js

$(document).ready(function () {

alert(‘hello world’);

});

```

// js
$(document).ready(function () {
    alert('hello world');
});

<!-- html -->
<ul>
	<li> 好好学习 </li>
	<li> 天天向上 </li>
	<li> 锻炼身体 </li>
</ul>

/* css */
a {
	color: red;
}

支持的语言：1c, abnf, accesslog, actionscript, ada, apache, applescript, arduino, armasm, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, cs, csp, css, d, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, erb, erlang, erlang-repl, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, go, golo, gradle, groovy, haml, handlebars, haskell, haxe, hsp, htmlbars, http, hy, inform7, ini, irpf90, java, javascript, json, julia, kotlin, lasso, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, markdown, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, mojolicious, monkey, moonscript, n1ql, nginx, nimrod, nix, nsis, objectivec, ocaml, openscad, oxygene, parser3, perl, pf, php, pony, powershell, processing, profile, prolog, protobuf, puppet, purebasic, python, q, qml, r, rib, roboconf, rsl, ruby, ruleslanguage, rust, scala, scheme, scilab, scss, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, tap, tcl, tex, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, x86asm, xl, xml, xquery, yaml, zephir

在 这里 可以找到 github 支持的语言

反引号最好在代码的前后行添加，而不是直接加在代码两边。

如你不需要代码高亮，可以用下面的方法禁用：

``` nohighlight

// js

$(document).ready(function () {

alert(‘hello world’);

});

```

// js
$(document).ready(function () {
    alert('hello world');
});

链接

下面是行内链接示例:

[百度](http://www.baidu.com)
http://www.baidu.com
<http://www.baidu.com>

百度

http://www.baidu.com

http://www.baidu.com

下面是一个参考链接的示例:

[链接到百度][1]

[链接到 Google][2]

[还是链接到百度][1]

[1]:https://www.baidu.com
[2]:https://www.google.com

注：
'[1]:https://www.baidu.com' 和 '[2]:https://www.google.com' 这几个链接可以写到文章的最后，就相当于 word 中的引用

效果：

链接到百度

链接到 Google

还是链接到百度

图片

![图片的 alt](图片的路径，可以是相对路径，也可以是绝对路径 "图片的 title")
例如：
![无名](/assets/images/posts/markdown/6G0U014.jpg "无名")
其中图片的 alt 和 title 可以不写
例如：
![](/assets/images/posts/markdown/6G0U014.jpg)

效果：

图片也可以使用参考链接的形式

![无名][id]

[id]: /assets/images/posts/markdown/6G0U014.jpg "无名"

限制图片大小并居中

许多 MarkDown 编辑器中直接按原图大小显示图片，造成版面凌乱。使用该命令 <img src="图片地址" width="图片显示宽度" height="显示高度" alt="图片名称"/> 设置图片大小，再用 <div style="text-align:center"></div> 命令包裹达到居中效果。

<div style="text-align:center"><img src="/assets/images/posts/markdown/aw8an.gif" width="157" height="160" alt="亦菲表演机器猫"/></div>

使用表情

Git 中的 Markdown 语法扩展中包括了一些表情包。

用法：使用两个冒号将表情夹杂起来即可

例如：

表情一：:+1:, 表情二：:o:

效果：

表情一： :+1: , 表情二： :o:

更多表情可以查看 表情大全 或 scotch-io/All-Github-Emoji-Icons

忽略 Markdown 关键字 (转义)

和 C 语言 printf 函数一样，如果我们不想让某个字符转换成 Markdown 关键字，可以在前面加上 \ . 比如我们想输入两个 *, 就可以用：

\*\* 取消 Markdown 关键字

效果：** 取消 Markdown 关键字

实践

• 简书
• github

参考资料

• 简明版 Markdown 语法说明(简体中文版)
• 完整版 Markdown 语法说明(简体中文版)
• Markdown 编辑器语法指南
• 怎样引导新手使用 Markdown？