@liayun
2016-05-09T23:19:48.000000Z
字数 6130
阅读 7353
Markdown
Markdown是一种轻量级的[标记语言],它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被[标记]、[语言]所迷惑,Markdown的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。
废话不多说,直接开干,来看看Markdown的基本语法规则。
标题是每篇文章都需要也是最常用的格式,在Markdown中,如果一段文字被定义为标题,只须在这段文字前加#
号即可。
例,
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
效果:
以此类推,总共六级标题,建议在#
号后加一个空格,这是最标准的Markdown语法。
特别的,还可使用=
(高阶标题)和-
(次阶标题)标记一级和二级标题。
例,
这是高阶标题(效果和一级标题一样)
=
这是次阶标题(效果和二级标题一样)
-
效果:
注意:=
和-
标记标题时,=
和-
的个数在不同的编辑器中都有不同,我在简书中测试时,=
和-
的个数大于等于2个都可以表示,但是在Cmd Markdown
中只要1个就可表示,还有说必须要三个或者以上的,我真不知道该相信谁的了,谁能告诉我!
段落的前后要有空行,所谓的空行是指没有文字内容。若想在段内强制换行的方式是使用两个或以上空格加上回车(引用中换行省略回车)。
熟悉HTML的同学肯定知道有序列表与无序列表的区别,在Markdown下,列表的显示只需要在文字前加上-
、+
或*
即可变为无序列表,有序列表则直接在文字前加1.
2.
3.
符号和文字之前加上一个字符的空格。
例1,有序列表
1. 第一点
2. 第二点
4. 第三点
效果:
例2,无序列表
- 这是无序列表项目
+ 这是无序列表项目
* 这是无序列表项目
效果:
两个列表之间不能相邻,否则会解释为嵌套的列表。下面这个是嵌套的列表,例3,
+ 呵呵
* 嘉嘉
- 嘻嘻
- 吼吼
- 嘎嘎
+ 桀桀
* 哈哈
效果:
注意:
空格
或制表符
。如果你需要引用一小段别处的句子,那么就要用引用的格式。只需要在文本前加入>
这种尖括号(大于号)即可。
例,
> 这是引用
效果:
这是引用
特别的,引用还可以嵌套,如:
> 这是一级引用
>> 这是二级引用
>>> 这是三级引用
> 这是一级引用
效果:
这是一级引用
这是二级引用
这是三级引用
这是一级引用
再如:
> 这是一级引用
>> 这是二级引用
>>> 这是三级引用
> 这是一级引用
效果:
这是一级引用
这是二级引用
这是三级引用
这是一级引用
>
、>>
和>>>
等嵌套使用的话,从>>>
退到>
时,必须之间要加上一个空行
作为过渡,否则默认为下一行和上一行是同一级别的引用。如上例所示。使用```表示代码块。如:
``` 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")
表示行内链接。其中 []
内的内容为要添加链接的文字link
为链接地址Optional title
为显示标题。显示效果为在你将鼠标放到链接上后,会显示一个小框提示,提示的内容就是Optional title
里的内容。中文显示乱码啊!差评例,
这就是行内链接:[李阿昀的简书](http://www.jianshu.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
2. ECMAScript 6 入门 阮一峰
3. InfoQ JavaScript
注意:
1. 上述的[1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
不出现在区块中。
2. 参考式链接和行内链接的显示效果是一样的。但是在编辑状态下的使用情况不一样。行内连接紧跟链接文字,可以在看到链接文字的同时清楚的知道链接地址,但是不便于多次重复利用。参考式链接可以重复使用,但一般都是将一些链接放在一起统一管理,如一段文字后面或文章结尾,因此在找到链接和链接文字的对应关系上有些麻烦。各有利弊了,分情况使用。
插入图片与插入链接的语法很像,区别在一个!
号,而且也有行内式和参考式两种。
插入图片语法为:![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
效果:
图灵社区
插入图片的地址需要图床(什么是图床呢???),这里推荐围脖图床修复计划与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
(我还未玩,忽略)。在Github
的md
文件中,会为每个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
所在的位置。
我的参考如下: