markdown编辑器

Markdown语法解析

2017-12-08  本文已影响38人  7aa386aee7ca

Markdown 是一种「电子邮件」风格的「标记语言」。不过良好的可读性更加应该被关注. 一个Markdown格式的文档应该就像普通文本一样容易(排版)打印, 而不是用各种标签和格式指令来标记. 现有的一些文本-HTML过滤器(text-to-HTML filters)对Markdown的语法有着重要的影响, 包括Setext, atx, Textlie, reStructuredText, Grutatext, 和EtText, 不过Markdown语法最大的灵感则来自于纯文本邮件的格式.

鉴于此, Markdown的语法完全由标点字符组成, 这些字符经过精心挑选, 就是为了能够让它们起到它们看起来应该起的作用. 比如一个单词两边的星号看起来就像emphasis. Markdown(语法的)列表就应该看起来就像是(实际的)列表. 如果你此前使用的email, 那么即使是Markdown的引用也能够看起来就像是实际的对一段文字的引用一样. Markdown 的优点如下：

1. 纯文本，所以兼容性极强，可以用所有文本编辑器打开。
2. 让你专注于文字而不是排版。
3. 格式转换方便，Markdown 的文本你可以轻松转换为 html、电子书等。

Markdown 的标记语法有极好的可读性。
首先，将编辑器切换到Markdown模式，也就是点击右上角的预览模式：


预览模式

1. 标题

在 Markdown 中，你只需要在文本前面加上 # 即可，同理、你还可以增加二级标题、三级标题、四级标题、五级标题和六级标题，总共六级，只需要增加 # 即可，标题字号相应降低。例如：

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

注：# 和「一级标题」之间建议保留一个字符的空格，这是最标准的 Markdown 写法。

2. 列表

2.1 无序列表

列表格式也很常用，在 Markdown 中，你只需要在文字前面加上 - 就可以了，例如：

- 文本一
- 文本二
- 文本三

在文本前面加上“- ”，就可以显示为如下的列表形式：

2.2 有序列表

如何需要生成有序列表，也可以直接在文本前面加上“数字. ”，例如：“1. ”，现实为如下的列表形式

  1. 文本一
  2. 文本二
  3. 文本三

2.3 列表自定义

定义型列表由名词和解释组成。一行写上定义，紧跟一行写上解释。解释的写法:紧跟一个缩进(Tab)
Markdown
: 轻量级文本标记语言，可以转换成html，pdf等格式（左侧有一个可见的冒号和四个不可见的空格）

2.4 列表缩进

3. 插入链接和图片

3.1 行内式

3.1.1 插入链接

在 Markdown 中，插入链接不需要其他按钮，你只需要使用 [显示文本](链接地址) 这样的语法即可， ()中的”“中可以为链接指定title属性，title属性可加可不加。title属性的效果是鼠标悬停在链接上会出现指定的 title文字。[链接文字](链接地址 “链接标题”)’这样的形式。链接地址与链接标题前有一个空格。例如：

[Markdown语法浅析](http://www.jianshu.com/p/7aec157c395f "Markdown语法手册")

实际的文本的显示：
Markdown语法浅析

3.1.2 插入图片

在 Markdown 中，插入图片不需要其他按钮，你只需要使用![] (http:https://img.haomeiwen.com/i8045074/74f928e25da4cc33.jpg) 这样的语法即可，例如：

![](http:https://img.haomeiwen.com/i8045074/74f928e25da4cc33.jpg "中山大学")

实际的显示为：


国家超算广州中心

3.2 参考式

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

语法说明：
参考式链接分为两部分，文中的写法 [链接文字][链接标记]，在文本的任意位置添加[链接标记]:链接地址 “链接标题”，链接地址与链接标题间有一个空格。

如果链接文字本身可以做为链接标记，你也可以写成[链接文字][]
[链接文字]：链接地址的形式，见代码的最后一行。
链接地址要与前面的内容间空一行

1. 我经常去的几个网站[Google][1]、[Leanote][2]以及[自己的博客][3]
2. [Leanote 笔记][2]是一个不错的[网站][]。
3.
4. [1]:http://www.google.com "Google"
5. [2]:http://www.jianshu.com/ "简书"
6. [3]:http://www.jianshu.com/u/7aa386aee7ca "梵居小镇"
7. [网站]:http://http://blog.leanote.com/freewalk

显示的效果：
我经常去的几个网站Google、简书以及自己的博客梵居小镇
虎扑步行街是一个不错的网站

3.3 自动链接式

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

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

显示效果：
http://example.com/
address@example.com

4. 引用

在 Markdown 中，你只需要在引用的文字前面加上 > 就好，比如：

4.1 普通引用

>Markdown语法浅析

实际显示为：

Markdown语法浅析

4.2 代码引用

需要引用代码时，如果引用的语句只有一段，不分行，可以用将语句包起来。
如果引用的语句为多行，可以将置于这段代码的首行和末行。
比如：
Markdown语法浅析

Markdown语法浅析

4.3 引用的多层嵌套

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

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

显示效果为：

请问 Markdwon 怎么用？ - 小白

自己看教程！ - 愤青
教程在哪？ - 小白

4.4 引用其它要素

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

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

显示效果为：

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

给出一些例子代码：

return shell_exec("echo $input | $markdown_script");

5. 粗体和斜体以及删除线

Markdown 的粗体和斜体非常简单，用两个 * 包含一段文本就是粗体的语法，用一个 * 包含一段文本就是斜体的语法。例如：
代码：

**Markdown语法浅析**
*Markdown语法浅析*
***Markdown语法浅析***
~~Markdown语法浅析~~

显示效果：

Markdown语法浅析
Markdown语法浅析
Markdown语法浅析
Markdown语法浅析

6. 表格

相关的代码为：

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

实际的显示为：

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

又例如：

教程标题| 主要内容
-------|----------
关于Markdown | 简介Markdown，Markdown的优缺点
Markdown基础 | Markdown的**基本语法**，格式化文本、代码、列表、链接和图片、分割线、转义符等
Markdown表格和公式 | Markdown的**扩展语法**，表格、公式
教程标题 主要内容
关于Markdown 简介Markdown，Markdown的优缺点
Markdown基础 Markdown的基本语法，格式化文本、代码、列表、链接和图片、分割线、转义符等
Markdown表格和公式 Markdown的扩展语法，表格、公式

6.锚点（简书好像不支持）

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

注意： Markdown Extra 只支持在标题后插入锚点，其它地方无效。
语法描述：
在你准备跳转到的指定标题后插入锚点{#标记}，然后在文档的其它地方写上连接到锚点的链接。

## 0. 目录{#index}
跳转到[目录](#index)

显示结果为：
跳转到目录

7.注脚

在需要添加注脚的文字后加上脚注名字[^注脚名字],称为加注。 然后在文本的任意位置(一般在最后)添加脚注，脚注前必须有对应的脚注名字。
注意：经测试注脚与注脚之间必须空一行，不然会失效。成功后会发现，即使你没有把注脚写在文末，经Markdown转换后，也会自动归类到文章的最后。脚注自动被搬运到最后面，请到文章末尾查看，并且脚注后方的链接可以直接跳转回到加注的地方。

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

显示效果为：
使用 Markdown[1]可以效率的书写文档, 直接转换成 HTML[2], 你可以使用 Leanote[3] 编辑器进行书写。

8. 分割线

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

显示效果为：可以看出都是一样的

9. 代码

对于程序员来说这个功能是必不可少的，插入程序代码的方式有两种，一种是利用缩进(Tab), 另一种是利用”`”符号（一般在ESC键下方）包裹代码。

9.1 行内式

1. C语言里的函数 `scanf()` 怎么使用？

显示效果为：
C语言里的函数 scanf() 怎么使用？

9.2 缩进式多行代码

缩进 4 个空格或是 1 个制表符一个代码区块会一直持续到没有缩进的那一行（或是文件结尾）。

    #include <stdio.h>
    int main(void)
    {
        printf("Hello world\n");
    }

显示结果为：

#include <stdio.h>
int main(void)
{
    printf("Hello world\n");
}

另一方法：

···
#include <stdio.h>
int main(void)
{
    printf("Hello world\n");
}
···

显示结果为：

#include <stdio.h>
    int main(void)
    {
        printf("Hello world\n");
    }

10. HTML 原始码(好像简书没有支持)

在代码区块里面， & 、 < 和 > 会自动转成 HTML 实体，这样的方式让你非常容易使用 Markdown 插入范例用的 HTML 原始码，只需要复制贴上，剩下的 Markdown 都会帮你处理，例如：

<div class="footer">
   © 2004 Foo Corporation
</div>

<table>
    <tr>
        <th rowspan="2">值班人员</th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
    </tr>
    <tr>
        <td>李强</td>
        <td>张明</td>
        <td>王平</td>
    </tr>
</table>

  1. Markdown是一种纯文本标记语言 ↩

  2. HyperText Markup Language 超文本标记语言 ↩

  3. 开源笔记平台，支持Markdown和笔记直接发为博文 ↩

上一篇下一篇

猜你喜欢

热点阅读