Markdown的基本语法

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

废话不多说,直接开干,来看看Markdown的基本语法规则。

标题

标题是每篇文章都需要也是最常用的格式,在Markdown中,如果一段文字被定义为标题,只须在这段文字前加#号即可。
例,

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

效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

以此类推,总共六级标题,建议在#号后加一个空格,这是最标准的Markdown语法。
特别的,还可使用=(高阶标题)和-(次阶标题)标记一级和二级标题。
例,

这是高阶标题(效果和一级标题一样)
=
这是次阶标题(效果和二级标题一样)
-

效果:
这是高阶标题(效果和一级标题一样)
=
这是次阶标题(效果和二级标题一样)

注意:=-标记标题时,=-的个数在不同的编辑器中都有不同,我在简书中测试时,=-的个数大于等于2个都可以表示,但是在Cmd Markdown中只要1个就可表示,还有说必须要三个或者以上的,我真不知道该相信谁的了,谁能告诉我!

段落

段落的前后要有空行,所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用两个或以上空格加上回车(引用中换行省略回车)。

列表

熟悉HTML的同学肯定知道有序列表与无序列表的区别,在Markdown下,列表的显示只需要在文字前加上-+*即可变为无序列表,有序列表则直接在文字前加1. 2. 3.符号和文字之前加上一个字符的空格。
例1,有序列表

1. 第一点
2. 第二点
4. 第三点

效果:

  1. 第一点
  2. 第二点
  3. 第三点

例2,无序列表

- 这是无序列表项目
+ 这是无序列表项目
* 这是无序列表项目

效果:

  • 这是无序列表项目
  • 这是无序列表项目
  • 这是无序列表项目

两个列表之间不能相邻,否则会解释为嵌套的列表。下面这个是嵌套的列表,例3,

+ 呵呵
    * 嘉嘉
    - 嘻嘻
    - 吼吼
        - 嘎嘎
        + 桀桀
* 哈哈

效果:

  • 呵呵
    • 嘉嘉
    • 嘻嘻
    • 吼吼
      • 嘎嘎
      • 桀桀
  • 哈哈

注意:

  1. 标记后面最少有一个空格制表符
  2. 若不在引用区块中,必须和前方段落之间存在空行,后面最好还是空一行,否则会解释为嵌套的列表。
  3. 有序列表标记不是按照你写的数字进行显示的,而是根据当前有序列表标记所在位置显示的,如示例1所示。
  4. 无序列表的项目符号是按照实心圆、空心圆、实心方格的层级关系递进的,如例3所示。通常情况下,同一层级使用同一种标记表示,便于自己查看和管理。

引用

如果你需要引用一小段别处的句子,那么就要用引用的格式。只需要在文本前加入>这种尖括号(大于号)即可。
例,

> 这是引用

效果:

这是引用

特别的,引用还可以嵌套,如:

> 这是一级引用
>> 这是二级引用
>>> 这是三级引用

> 这是一级引用

效果:

这是一级引用

这是二级引用

这是三级引用

这是一级引用

再如:

> 这是一级引用
>> 这是二级引用
>>> 这是三级引用
> 这是一级引用

效果:

这是一级引用

这是二级引用

这是三级引用
这是一级引用

  1. 从上面两例可看出,如果>>>>>>等嵌套使用的话,从>>>退到>时,必须之间要加上一个空行作为过渡,否则默认为下一行和上一行是同一级别的引用。如上例所示。
  2. 引用完之后,必须再空一行,重新一个新的开始,否则,以后的文字都将在引用的范围内,不要问我为什么,实践出真知。

代码块

使用```表示代码块。如:

``` javascript
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
```

效果:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

注意:

  1. `这个符号是反引号,我一开始在键盘上死命的找还找不到呢?闹笑话了,这个符号在Esc键下面,切换到英文下即可。

  2. ```后面的javascript表示此段代码为javascript代码,Markdown会自行使用javascript代码颜色渲染。
    附加:还可使用4个空格或者一个制表符(tab)缩进表示代码区块。如:

     /** 
       * nth element in the fibonacci series. 
       * @param n >= 0 
       * @return the nth element, >= 0. 
       */
     function fib(n) { 
         var a = 1, b = 1; 
         var tmp; 
         while (--n >= 0) { 
             tmp = a;
             a += b; 
             b = tmp;
         }
         return a; 
     }
     document.write(fib(10));
    

效果:

/** 
 * nth element in the fibonacci series. 
 * @param n >= 0 
 * @return the nth element, >= 0. 
 */
function fib(n) {
    var a = 1, b = 1; 
    var tmp; 
    while (--n >= 0) { 
        tmp = a;
        a += b; 
        b = tmp;
    }
    return a; 
}
document.write(fib(10));

但是这样写代码太费劲了,每行的开头都要空4个空格啊!要是成千上万行代码呢?那不把人累死啊!这种方式一定是差评啊!
少量的代码还可以接受啊!例,

    void main()
    {
        printf("Hello, Markdown.");
    }

效果:

void main()
{
    printf("Hello, Markdown.");
}

行内代码

使用``表示行内代码。如:

这是`java`代码。

效果:
这是java代码。
注意:需要和普通段落之间存在空行。

链接

链接可以由两种形式生成:行内式参考式

  • 使用[](link "Optional title")表示行内链接。其中
  1. []内的内容为要添加链接的文字
  2. link为链接地址
  3. Optional title为显示标题。显示效果为在你将鼠标放到链接上后,会显示一个小框提示,提示的内容就是Optional title里的内容。中文显示乱码啊!差评

例,

这就是行内链接:[李阿昀的简书](//www.greatytc.com "李阿昀的简书")

效果:
这就是行内链接:李阿昀的简书

  • 参考式链接

例,

这里我们参考:
1. [JavaScript | MDN][1]
2. [ECMAScript 6 入门 阮一峰][2]
3. [InfoQ JavaScript][3]
[1]: http://developer.mozilla.org/zh-CN/docs/Web/JavaScript
[2]: http://es6.ruanyifeng.com
[3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk

效果:
这里我们参考:

  1. [JavaScript | MDN][1]
  2. [ECMAScript 6 入门 阮一峰][2]
  3. [InfoQ JavaScript][3]
    [1]: http://developer.mozilla.org/zh-CN/docs/Web/JavaScript
    [2]: http://es6.ruanyifeng.com
    [3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk
    注意:
  4. 上述的[1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript不出现在区块中。
  5. 参考式链接和行内链接的显示效果是一样的。但是在编辑状态下的使用情况不一样。行内连接紧跟链接文字,可以在看到链接文字的同时清楚的知道链接地址,但是不便于多次重复利用。参考式链接可以重复使用,但一般都是将一些链接放在一起统一管理,如一段文字后面或文章结尾,因此在找到链接和链接文字的对应关系上有些麻烦。各有利弊了,分情况使用。

图片

插入图片与插入链接的语法很像,区别在一个!号,而且也有行内式和参考式两种。
插入图片语法为:![Alt text](/path/to/img.jpg "Optional title")

  • Alt text为如果图片无法显示时显示的文字。
  • /path/to/img.jpg为图片所在路径。
  • Optional title为显示标题。显示效果为在你将鼠标放到图片上后,会显示一个小框提示,提示的内容就是Optional title

例,行内式:

### 插入图片
![图灵社区](http://www.turingbook.com/Content/img/Turing.Gif)

效果:

插入图片

图灵社区
图灵社区

例,参考式:

[图灵社区][4]
![图灵社区Logo][5]
[1]: http://www.ituring.com.cn
[2]: http://www.turingbook.com/Content/img/Turing.Gif

效果:
[图灵社区][4]
![图灵社区Logo][5]
[4]: http://www.ituring.com.cn
[5]: http://www.turingbook.com/Content/img/Turing.Gif


插入图片的地址需要图床(什么是图床呢???),这里推荐围脖图床修复计划CloudApp的服务,生成URL地址即可。
推荐工具
图床工具用来上传图片获取URL地址。

首次上传本地图片时,发现Cmd Markdown对普通用户不友好,搞的差点放弃了,还得进阶为高级用户上传本地图片功能才能使用,但我穷啊!以上推荐工具我也没用,什么是图床工具,我都不清楚,还是不搞了。
哈哈,那我就用新浪微博或者QQ空间存储照片了,搞笑吧!

强调

使用**__表示粗体。
使用*_表示斜体。
例,

**粗体1**   __粗体2__
*斜体1*   _斜体2_

效果:
粗体1 粗体2
斜体1 斜体2
注意:前后的*_与要加粗倾斜的字体之间不能有空格。

表格

表格应该是Markdown比较累人的地方,语法真是操蛋!
|表示表格纵向边界,表头和表内容用-隔开,并可用:进行对齐设置,两边都有:则表示居中,若不加:则默认左对齐。
详细说明:

  • ----:为右对齐
  • :----为左对齐
  • :---:为居中对齐
  • -----为默认左对齐

注意:-这样的分隔符至少要有1个!目前测试是这样的!
例1,

| 序号 | 交易名 | 交易说明 | 备注 |
| ---: | :----: | :------- | ---- |
|   1  | prfcfg | 菜单配置 | 可以通过此交易查询到所有交易码和菜单的对应关系 |
|   2  | gentmo | 编译所有交易 |  |
|   100000  | sysdba | 数据库表模型汇总 |  |

这种语法生成的表格如下:

序号 交易名 交易说明 备注
1 prfcfg 菜单配置 可以通过此交易查询到所有交易码和菜单的对应关系
2 gentmo 编译所有交易
100000 sysdba 数据库表模型汇总

例2,

| 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

例3,

dog | bird | cat
----|------|----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

这种语法生成的表格如下:

dog bird cat
foo foo foo
bar bar bar
baz baz baz

注意:最好还是和普通段落之间存在空行吧!虽然在Cmd Markdown中是不需要空一行的,但是在简书中测试就操蛋了。

分割线

分割线最常使用就是三个或以上*,还可以使用-_
例,

***

---

___

效果:




注意:

  1. 只要*或者-大于等于三个就可组成一条平行线。
  2. 使用---作为水平分割线时,要在它的前后都空一行,防止---被当成标题标记的表示方式。

反斜杠

使用\表示反斜杠,相当于反转义作用。在你不想显示Markdown标记时可以使用反斜杠。
Markdown支持的转义字符列表:

\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

删除线

使用~~表示删除线。
例,

~~这是一条删除线~~

效果:
这是一条删除线
注意:~~和要添加删除线的文字之间不能有空格。

注脚

使用[^footer1]表示注脚。
例,

这是一个注脚测试[^footer1]
[^footer1]: 这是一个测试,用来阐释注脚。

效果:
这是一个注脚测试[1]

标签分类

使用标签:或者Tags:表示标签标记。
例,

标签: 数学 英语
Tags: 数学 英语

效果(有个毛的效果):
标签: 数学 英语
Tags: 数学 英语
注意:

  1. 标签:或者Tags:中的冒号要使用半角冒号
  2. 基本没使用过这个标记,不过应用场景应该是归类。便于快速了解文章分类。难道可以通过某种方式来遍历到标签标记?不甚了解。如你知道:请告诉我

锚点

锚点功能可参考Github(我还未玩,忽略)。在Githubmd 文件中,会为每个h1~h6标签,自动塞入一个a标签,并渲染好id
例,

# h1

以上md语言被渲染成html如下:

<h1><a id="user-content-h1" class="anchor" href="#h1" aria-hidden="true"><svg aria-hidden="true" class="octicon octicon-link" height="16" role="img" version="1.1" viewBox="0 0 16 16" width="16"><path d="M4 9h1v1h-1c-1.5 0-3-1.69-3-3.5s1.55-3.5 3-3.5h4c1.45 0 3 1.69 3 3.5 0 1.41-0.91 2.72-2 3.25v-1.16c0.58-0.45 1-1.27 1-2.09 0-1.28-1.02-2.5-2-2.5H4c-0.98 0-2 1.22-2 2.5s1 2.5 2 2.5z m9-3h-1v1h1c1 0 2 1.22 2 2.5s-1.02 2.5-2 2.5H9c-0.98 0-2-1.22-2-2.5 0-0.83 0.42-1.64 1-2.09v-1.16c-1.09 0.53-2 1.84-2 3.25 0 1.81 1.55 3.5 3 3.5h4c1.45 0 3-1.69 3-3.5s-1.5-3.5-3-3.5z"></path></svg></a>h1</h1>

不去管svg部分,可以看到h1标签内嵌入了一个id为 "user-content-h1"的a标签,如果标题为# html5,那么id就会是 user-content-html5。这样就可以用类似下面的语句对其进行跳转定位:

[快点我,我要跳转到h1所在的位置](#user-content-h1)

效果:一点击快点我,我要跳转到h1所在的位置,即跳转到h1所在的位置。

我的参考如下:

  1. [Markdown,你只需要掌握这几个][6]
  2. [markdown在博客园的使用][7]
  3. [怎样使用Markdown][8]
  4. [Markdown 基本语法][9]
  5. [Markdown——入门指南][10]
  6. [Markdown入门指南][11]
  7. [Markdown语法说明(简体中文版)][12]
    [6]: http://www.cnblogs.com/crazyant007/p/4220066.html
    [7]: http://www.cnblogs.com/zichi/p/4788229.html
    [8]: http://www.ituring.com.cn/article/23
    [9]: https://github.com/younghz/Markdown
    [10]: //www.greatytc.com/p/1e402922ee32
    [11]: //www.greatytc.com/p/468f111d8fd3
    [12]: http://wowubuntu.com/markdown

  1. 这是一个测试,用来阐释注脚。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容

  • 我们看到网上许多博客有着非常漂亮的排版,其实大部分都是用Markdown写的,那Markdown究竟是什么呢? M...
    杰森_Jason阅读 8,855评论 0 4
  • Markdown 优点就是所写即所得基本上就是为了懒癌的写字党提供书写排版的方式渲染的效果不同的markdown工...
    阿飞不理飞阅读 459评论 0 0
  • 最近搭建wiki时,接触到了Markdown的语法,体验到了它在html页面上做富文本编辑的强大之处。因为也不常使...
    东方不亮sam阅读 291评论 0 1
  • markdown是什么? 是一个简单的标记语言,这些标记和 html 的一些标签对应 通过一些转换库可以把 mar...
    emily_gss阅读 353评论 0 0
  • 标题 标题使用"#"来表示,几级标题就打几个"#",例如: 一级标题 二级标题 三级标题 四级标题 五级标题 列表...
    徐磊x阅读 487评论 0 1