markdown已经活跃在世界的各个角落,楼主在博客园也使用了一段时间了,在此总结下markdown的用法。
首先介绍下几款工具,一般在windows下我就用MarkdownPad,在线的话可以试试Markdown Live Editor,或者参考非常有用的 Markdown 编辑器和工具、用 Markdown 写作用什么文本编辑器?
要了解更多语法,可以参考Markdown Cheatsheet,或者中文版markdown-语法说明
标题
标题(h1~h6)可使用相应个数的#
来生成,如下面的代码将会生成h3标题:
### this is a level-3 header ###
特别的,h1和h2还有一种生成方式,利用=
(最高阶标题)和-
(第二阶标题):
this is h1
===
this is h2
---
=和-的个数必须要三个或者以上。
段落和换行
使用一个或多个空行分隔内容段来生成段落(<p>
)
在行末输入两个或以上空格再回车来生成换行(<br/>
)
如果要插入多个空行,可以手动插入换行符<br/>
强调
被一个*
或者_
包围的文字将会被<em>
标签包围:
*single asterisks*
_single underscores_
被两个*
或者_
包围的文字将会被<strong>
标签包围:
**double asterisks**
__double underscores__
分隔线
在一行内使用三个或以上的*
和_
来建立分隔线(<hr>
),行内除此之外不能有其他内容:
***
* * *
* * * * *
___
_ _ _ _
区块引用
使用>
作为段落前缀来标识引用文字段落,引用可以嵌套。
> one day, I lost my lover
> you know
> > this is just a test
列表
使用*
+
-
来表示无序列表(<ul>
):
- apple
- banana
- orange
使用数字紧跟一个.
再加空格来表示有序列表(<ol>
):
1. apple
2. banana
3. orange
代码
使用反引号`
来表示行内代码,这部分文字将会被<code>
标签包围:
`markdown`
行内引用单个反引号 `
(也就是说,如果要行内引用反引号,要用两个反引号前后包裹起来):
`` ` ``
使用4个空格或者一个制表符(tab)缩进表示代码区块,它们将被<pre>
和<code>
包裹:
var a = 10
, b = 20;
2016-02-20 add 用 ``` 的形式:
```javascript
var a = 10, b = 20;
alert(a + b);
```
效果:
var a = 10, b = 20;
alert(a + b);
代码高亮的话,如果用 4 个空格或者一个 tab,在博客园有时会 "染色混乱"。而 Github 似乎对此完全不进行染色了,所以如果是特定语言的代码,可以这样写。
链接
行内式语法:
click [here](http://www.cnblogs.com/zichi/ 'zhichi\'s blog')
click [here](http://www.cnblogs.com/zichi/)
参考式语法:
1. [JavaScript | MDN][1]
2. [ECMAScript 6 入门 阮一峰][2]
3. [InfoQ JavaScript][3]
[1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
[2]: http://es6.ruanyifeng.com/ 'RuanYifeng'
[3]: http://www.infoq.com/cn/javascript/?utm_source=infoq&utm_medium=header_graybar&utm_campaign=topic_clk
参考式语法这样的链接定义,你可以把它放到文章的任意位置。
自动链接:
<http://www.cnblogs.com/zichi/>
<hanzichi@outlook.com>
隐式链接标记:
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].
[google]: http://google.com/ "Google"
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
[msn]: http://search.msn.com/ "MSN Search"
图片
图片的语法和链接相似,也有行内式和参考式两种(其实和文字链接差不多,前面多个了 ! 而已,而且[] 内可以空白,毕竟也没什么卵用)。
行内式:
![avater](http://pic.cnblogs.com/avatar/675542/20150612173854.png)
![avater](http://pic.cnblogs.com/avatar/675542/20150612173854.png 'hanzichi')
参考式:
![avater][1]
[1]: http://pic.cnblogs.com/avatar/675542/20150612173854.png 'hanzichi'
注:到目前为止, Markdown 还没有办法指定图片的宽高,如果你需要的话,你可以使用普通的<img>
标签。
转义字符
可以使用反斜杠\
来插入一些在markdown语法中有其他意义的符号。
markdown支持的转义字符列表:
\ 反斜线
` 反引号
* 星号
_ 底线
{} 花括号
[] 方括号
() 括弧
# 井字号
+ 加号
- 减号
. 英文句点
! 惊叹号
其他
markdown不支持表格,可以用html语言进行书写。但要注意 HTML 标签内的 Markdown 表达式将不会被解析。
2016-02-19 add:
表格
| name | age | Position |
|:---|:---:|---:|
| Curry | 28 | US |
| Kobe | 37 | US |
效果:
name | age | Position |
---|---|---|
Curry | 28 | US |
Kobe | 37 | US |
第二行的意思分别表示左对齐、居中、右对齐,如果不需要类似效果,可以去掉冒号。
删除线
~~这里是删除内容~~
效果:
这里是删除内容
锚点
锚点功能博客园还未引入,可参考 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
。这样就可以用类似下面的语句对其进行跳转定位:
[点此调转到 html5 部分](#user-content-html5)
目前还在用 markdownpad,略坑,还未支持表格和删除线。之前也有下过 markpad,装不上,靠。
PS: 怎样引导新手使用 Markdown?