markdown在博客园的使用

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 |

效果:

nameagePosition
Curry28US
Kobe37US

第二行的意思分别表示左对齐、居中、右对齐,如果不需要类似效果,可以去掉冒号。

删除线

~~这里是删除内容~~

效果:

这里是删除内容

锚点

锚点功能博客园还未引入,可参考 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?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值