题前篇

第一篇博客写点什么呢？这是一个问题，好在我还是一个小白，对于很多前端的交互存在很多好奇的地方，这第一篇文章就写一篇关于一个轻量级的文字编辑工具MarkDown的日志吧。再次声明我也是一个小白，这篇笔记更加偏向于是和大家分享我在学习MarkDown过程中遇到的一些问题和解决方法。在文章的开头要感谢在学习MarkDown过程中参考过的blog以及一些document，这里我把他们的链接列在这里。
Markdown 语法手册 （完整整理版）
Markdown 书写风格指南
Cmd Markdown 简明语法手册

斜体和粗体

使用 * 和 ** 表示斜体和粗体。

代码示例： *斜体*
显示样式： 斜体

代码示例： **粗体**
显示样式： 粗体

分级标题

两种分级标题写作方式

• 1. 使用===表示一级标题，使用---表示二级标题。

     代码示例： 一级标题 ======== 二级标题 -----------

     显示样式：

     这是一级标题

     这是二级标题 —

• 1. 使用 #、##、###、####、#####、###### 表示1-6级标题

  代码示例：

  一级标题 `#`
  二级标题 `##`
  三级标题 `###`
  四级标题 `####`
  五级标题 `#####`
  六级标题 `######`
  

这里就不演示了，可在编辑器中观察，很简单，一级标题字号最大，依级递减。

超链接

Markdown 支持两种形式的链接语法：行内式和参考式。行内式一般使用较多

• 行内式

  语法说明：

  形如：[链接文字](链接地址 “链接标题”)。[]里写链接文字，()里写链接地址,()中的“”中可以为链接指定title属性，title属性可加可不加。title属性的效果是鼠标悬停在链接上会出现指定的title文字。链接地址与链接标题之间有一个空格。

  代码示例： 欢迎来到[Levin Blog](https://levin000.github.io/) 显示样式： 欢迎来到Levin Blog

  代码示例： 欢迎来到[Levin Blog](https://levin000.github.io/ "Levin Blog")
  显示样式： 欢迎来到Levin Blog

• 参考式

  参考式超链接一般用在学术论文上面，或者另一种情况，如果某一个链接在文章中多处使用，那么使用引用的方式创建链接将非常好，它可以让你对链接进行统一的管理。

  语法说明：

  参考式链接分为两部分，文中的写法[链接文字][链接标记]，在文本的其他任意位置（通常文末参考部分）添加[链接标记]: 链接地址 “链接标题”，链接地址与链接标题之间有一个空格。

  如果链接文字本身可以做为链接标记，你也可以写成[链接文字][],[链接文字]：链接地址的形式，见示例代码的最后一行。

  代码示例：

  我经常去的几个网站[ResearchGate][1]、[GitHub][2]以及[自己的博客][3][GitHub][2]是一个不错的[网站][]。
  

  [1]: https://www.researchgate.net "ResearchGate"
  [2]: https://github.com "GitHub"
  [3]: http://levin.hebnu.top "Levin blog"
  [网站]: http://levin.hebnu.top
  

  显示样式：

  我经常去的几个网站ResearchGate、GitHub以及自己的博客
  GitHub是一个不错的网站。

自动链接

语法说明：

Markdown支持以比较简短的自动链接形式来处理网址和电子邮件信箱，只要是用<>包起来，Markdown就会自动把它转成链接。一般网址的链接文字就和链接地址一样，例如：

代码示例：

  <http://example.com>
  <address@example.com>

显示样式： http://example.com/ address@example.com

锚点

网页中，锚点其实就是页内超链接，也就是链接本文档内部的某些元素，实现当前页面中的跳转。比如我这里写下一个锚点，点击回到目录，就能跳转到目录。 在目录中点击这一节，就能跳过来。还有下一节的注脚。这些根本上都是用锚点来实现的。

• 注意：

  1. Markdown Extra 只支持在标题后插入锚点，其它地方无效。

  语法说明：

  在你准备跳转到的指定标题后插入锚点，然后在文档的其它地方写上连接到锚点的链接。

  代码示例： 跳转到[超链接]() （其中锚点设置为“## 超链接 #index”）

  显示样式： 跳转到超链接

列表

列表主要分类有三种：无序列表、有序列表、定义型列表

• 无序列表 语法说明： 使用 *、+、- 表示无序列表
  代码示例： ```
  • 无序列表项 一
  • 无序列表项 二
  • 无序列表项 三 ``` 显示样式：
  • 无序列表 一
  • 无序列表 二
  • 无序列表 三

• 有序列表 语法说明： 有序列表则使用数字接着一个英文句点(数字的大小顺序无关紧要)。
  代码示例： 1. 有序列表项 一 2. 有序列表项 二 3. 有序列表项 三

  显示样式：

  1. 有序列表项 一
  2. 有序列表项 二
  3. 有序列表项 三
• 定义型列表 语法说明： 定义型列表由名词和解释组成。一行写上定义，紧跟一行写上解释。解释的写法:紧跟一个缩进(Tab)
  代码示例：

  Markdown
  :    轻量级文本标记语言，可以转换成html，pdf等格式（左侧有一个可见的冒号和四个不可见的空格）
  代码块2
  :    这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）
  代码块（左侧有八个不可见的空格）
  

  显示样式：

  Markdown

  轻量级文本标记语言，可以转换成html，pdf等格式（左侧有一个可见的冒号和四个不可见的空格）

  代码块 2

  这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格） 代码块（左侧有八个不可见的空格）

• 列表缩进
  语法说明： 列表项目标记通常是放在最左边，但是其实也可以缩进，最多 3 个空格，项目标记后面则一定要接着至少一个空格或制表符。 要让列表看起来更漂亮，你可以把内容用固定的缩进整理好（显示效果与代码一致）：

  代码示例：

     轻轻的我走了， 正如我轻轻的来； 我轻轻的招手， 作别西天的云彩。
     那河畔的金柳， 是夕阳中的新娘； 波光里的艳影， 在我的心头荡漾。
     软泥上的青荇， 油油的在水底招摇； 在康河的柔波里， 我甘心做一条水草！
     那榆荫下的一潭， 不是清泉， 是天上虹； 揉碎在浮藻间， 沉淀着彩虹似的梦。
     寻梦？撑一支长篙， 向青草更青处漫溯； 满载一船星辉， 在星辉斑斓里放歌。
     但我不能放歌， 悄悄是别离的笙箫； 夏虫也为我沉默， 沉默是今晚的康桥！
     悄悄的我走了， 正如我悄悄的来； 我挥一挥衣袖， 不带走一片云彩。
  

  显示样式：

  轻轻的我走了， 正如我轻轻的来； 我轻轻的招手， 作别西天的云彩。
  那河畔的金柳， 是夕阳中的新娘； 波光里的艳影， 在我的心头荡漾。 
  软泥上的青荇， 油油的在水底招摇； 在康河的柔波里， 我甘心做一条水草！ 
  那榆荫下的一潭， 不是清泉， 是天上虹； 揉碎在浮藻间， 沉淀着彩虹似的梦。 
  寻梦？撑一支长篙， 向青草更青处漫溯； 满载一船星辉， 在星辉斑斓里放歌。 
  但我不能放歌， 悄悄是别离的笙箫； 夏虫也为我沉默， 沉默是今晚的康桥！ 
  悄悄的我走了， 正如我悄悄的来； 我挥一挥衣袖， 不带走一片云彩。
  

• 包含段落的列表
  语法说明： 列表项目可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符（显示效果与代码一致）： 代码示例：

  *   轻轻的我走了， 正如我轻轻的来； 我轻轻的招手， 作别西天的云彩。
      那河畔的金柳， 是夕阳中的新娘； 波光里的艳影， 在我的心头荡漾。
      软泥上的青荇， 油油的在水底招摇； 在康河的柔波里， 我甘心做一条水草！
  *   那榆荫下的一潭， 不是清泉， 是天上虹； 揉碎在浮藻间， 沉淀着彩虹似的梦。
      寻梦？撑一支长篙， 向青草更青处漫溯； 满载一船星辉， 在星辉斑斓里放歌。
      但我不能放歌， 悄悄是别离的笙箫； 夏虫也为我沉默， 沉默是今晚的康桥!
      悄悄的我走了， 正如我悄悄的来； 我挥一挥衣袖， 不带走一片云彩。
  

  如果你每行都有缩进，看起来会看好很多，当然，再次地，如果你很懒惰，Markdown 也允许：

  显示样式：

  • 轻轻的我走了， 正如我轻轻的来； 我轻轻的招手， 作别西天的云彩。 那河畔的金柳， 是夕阳中的新娘； 波光里的艳影， 在我的心头荡漾。 软泥上的青荇， 油油的在水底招摇； 在康河的柔波里， 我甘心做一条水草！
  • 那榆荫下的一潭， 不是清泉， 是天上虹； 揉碎在浮藻间， 沉淀着彩虹似的梦。 寻梦？撑一支长篙， 向青草更青处漫溯； 满载一船星辉， 在星辉斑斓里放歌。 但我不能放歌， 悄悄是别离的笙箫； 夏虫也为我沉默， 沉默是今晚的康桥！ 悄悄的我走了， 正如我悄悄的来； 我挥一挥衣袖， 不带走一片云彩。
• 包含引用的列表 语法说明： 如果要在列表项目内放进引用，那 > 就需要缩进： 代码示例：

  阅读的方法:
  > 打开书本
  > 打开电灯
  

  显示样式：

  阅读的方法:

  打开书本
  打开电灯

• 包含代码区块的引用
  语法说明： 如果要放代码区块的话，该区块就需要缩进两次，也就是 8 个空格或是 2 个制表符：
  代码示例：

  一列表项包含一个列表区块：   
  <代码写在这>
  

  显示效果：

  • 一列表项包含一个列表区块：
  <代码写在这>
• 一个特殊情况
  在特殊情况下，项目列表很可能会不小心产生，像是下面这样的写法： ```
  1. What a great season. ``` 会显示成：
  2. What a great season.

  换句话说，也就是在行首出现数字-句点-空白，要避免这样的状况，你可以在句点前面加上反斜杠：

  1986\. What a great season.
  

  会显示成： 1986. What a great season.

引用

语法说明： 引用需要在被引用的文本前加上>符号。
代码示例：

   > 这是一个有两段文字的引用,
   > 无意义的占行文字1.
   > 无意义的占行文字2.
   
   
   > 无意义的占行文字3.
   > 无意义的占行文字4.

显示样式：

这是一个有两段文字的引用,
无意义的占行文字1.
无意义的占行文字2.

无意义的占行文字3.
无意义的占行文字4.

Markdown 也允许你偷懒只在整个段落的第一行最前面加上 > ：
代码示例：

   > 这是一个有两段文字的引用,
   无意义的占行文字1.
   无意义的占行文字2.

   > 无意义的占行文字3.
   无意义的占行文字4.

显示样式：

这是一个有两段文字的引用,
无意义的占行文字1.
无意义的占行文字2.

无意义的占行文字3.
无意义的占行文字4.

• 引用的多层嵌套

  语法说明： 区块引用可以嵌套（例如：引用内的引用），只要根据层次加上不同数量的>：

  代码示例：

  >>> 请问 Markdwon 怎么用？ - 小白
  >>
  >> 自己看教程！ - 愤青
  >
  > 教程在哪？ - 小白
  

  显示样式：

  请问 Markdwon 怎么用？ - 小白

  自己看教程！ - 愤青

  教程在哪？ - 小白

• 引用其它要素

  语法说明： 引用的区块内也可以使用其他的 Markdown 语法，包括标题、列表、代码区块等：

  代码示例：

  > 1.   这是第一行列表项。
  > 2.   这是第二行列表项。
  > 
  > 给出一些例子代码：
  > 
  >     return shell_exec("echo $input | $markdown_script");
  

  显示样式：

  1. 这是第一行列表项。
  2. 这是第二行列表项。

  给出一些例子代码：

  return shell_exec(“echo $input

  $markdown_script”);

插入图像

图片的创建方式与超链接相似，而且和超链接一样也有两种写法，**行内式**和**参考式**写法。语法中**图片Alt**的意思是如果图片因为某些原因不能显示，就用定义的图片Alt文字来代替图片。图片Title则和链接中的Title一样，表示鼠标悬停与图片上时出现的文字。 图片Alt 和 图片Title 都不是必须的，可以省略，但建议写上。

• 行内式
  语法说明： ![图片Alt](图片地址 “图片Title”)
  代码示例：

  美丽花儿：
  ![美丽花儿Alt](http://ww2.sinaimg.cn/large/56d258bdjw1eugeubg8ujj21kw16odn6.jpg "美丽花儿")
  

  显示样式： 美丽花儿：
  

• 参考式

  语法说明： 在文档要插入图片的地方写 ![图片Alt]\[标记] 在文档的最后写上[标记]:图片地址 “Title” 示例代码：

  美丽花儿：
  ![美丽花儿Alt][flower]
  

  [flower]:http://ww2.sinaimg.cn/large/56d258bdjw1eugeubg8ujj21kw16odn6.jpg  "美丽花儿"
  

  显示效果：

  美丽花儿:
  

内容目录

在段落中填写 [TOC]以显示全文内容的目录结构。效果参见最上方的目录

注脚

语法说明：

在需要添加注脚的文字后加上脚注名字 [^注脚名字],称为加注。然后在文本的任意位置(一般在最后)添加脚注，脚注前必须有对应的脚注名字。注意：经测试注脚与注脚之间必须空一行，不然会失效。成功后会发现，即使你没有把注脚写在文末，经Markdown转换后，也会自动归类到文章的最后。

代码示例：

  使用 Markdown[^1]可以效率的书写文档, 直接转换成 HTML[^2], 你可以使用 Cmd Markdown[^Le] 编辑器进行书写。
  [^1]:Markdown是一种纯文本标记语言
  [^2]:HyperText Markup Language 超文本标记语言
  [^Le]:开源笔记平台，支持Markdown和笔记

显示样式：

使用 Markdown¹可以效率的书写文档, 直接转换成 HTML², 你可以使用 Cmd Markdown³ 编辑器进行书写。

注： 脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

LaTeX 公式

$E = m2$

更多使用方法，欢迎访问 MathJax 参考更多使用方法。

表格

语法说明：

1. 不管是哪种方式，第一行为表头，第二行分隔表头和主体部分，第三行开始每一行为一个表格行。
2. 列于列之间用管道符|隔开。原生方式的表格每一行的两边也要有管道符。
3. 第二行还可以为不同的列指定对齐方向。默认为左对齐，在-右边加上:就右对齐。

代码示例： 简单方式写表格：

  学号|姓名|分数
  -|-|-
  小明|男|75
  小红|女|79
  小陆|男|92

原生方式写表格：

  |学号|姓名|分数|
  |-|-|-|
  |小明|男|75|
  |小红|女|79|
  |小陆|男|92|

为表格第二列指定方向：

  产品|价格
  -|-:
  Leanote 高级账号|60元/年
  Leanote 超级账号|120元/年

显示样式: 简单方式写表格：
学号|姓名|分数

• |-|-
  小明|男|75
  小红|女|79
  小陆|男|92
  原生方式写表格：
  |学号|姓名|分数|
  |-|-|-|
  |小明|男|75|
  |小红|女|79|
  |小陆|男|92|
  为表格第二列指定方向：
  产品|价格

• Leanote 高级账号	60元/年
  Leanote 超级账号	120元/年

分隔线

你可以在一行中用三个以上的*、-、_来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。 下面每种写法都可以建立分隔线： 代码示例：

* * *
***
*****
- - -
---------------------------------------

显示样式：

制作一份待办事宜

• 支持以 PDF 格式导出文稿
• 改进 Cmd 渲染算法，使用局部渲染技术提高渲染效率
• 新增 Todo 列表功能
• 修复 图标功能