Oct 28, 2012 – 学习 & 提升 – 网页设计  jekyll   – Bai

Markdown 基本语法

Markdown 基本介绍

Markdown 既是一种轻量级的标记语言,又是一款文本到 HTML(text-to HTML)转换工具。利用 markdown 可以用一种易读易写的纯文本格式写作,然后将其转换为结构化标记语言 XHTML/HTML。Markdown 首要的设计目标是使其成为可读性最大并可再发行的可输入输出格式。Markdown 语法受到一些既有 text-to-HTML 格式的影响,包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText,而最大灵感来源其实是纯文本电子邮件的格式。Markdown 允许使用 HTML 语法,所以使用者如果需要可以直接用 HTML 来表示。

行内 HTML

Markdown 的语法非常短小精悍,仅仅实现了 HTML 的一小部分标签,要想使用更多的 HTML 标签,需要在 Markdown 文本中插入 HTML 标签。插入的方式很简单,无需前置符号或者限定符号,只需要直接插入 HTML 标签即可。

但是,对于块级别(block-level)的元素——例如<div>,<table>,<pre>,<p>等——前后必须使用空行分割开,而且块级元素的开始标签和结束标签不能用空格或者制表符缩进。

在块级 HTML 标签内部将不再支持 Markdown 的语法格式,也即在 HTML 块内无法再使用星号进行强调。

文本级(span-level) HTML 元素没有以上限制,可以在任何位置使用,而且在其标签内仍支持 Markdown 语法格式。

特殊字符的自动忽略

HTML 中有两个字符需要特别对待:小于号<&,前者用语标签的开始,后者用语表示 HTML 实体)(HTML entities)。如果要在 HTML 中使用两个字符的字面值,必须使用他们的实体值,即&lt;&amp;

Markdown 可自动完成两个字符的转换。如果两个字符确实用语表示 HTML 标签或位于 HTML 标签内,则 Markdown 将不做任何处理,其它情况下将其转换为 HTML 实体值。例如:

AT&T
4 < 5

将被转换为:

AT&amp;T
4 &lt; 5

另外,在 Markdown 的代码区域内(行内代码或块代码),两个字符也将被自动转换为 HTML 实体,这样书写关于 HTML 的代码将变的十分方便。

块级元素(Block Elements)

段落

一个 Markdown 段落是由一个或多个连续的文本行组成,它的前后要有一个以上的空行(空行的定义是显示上看起来像是空的,便会被视为空行。比方说,若某一行只包含空格和制表符,则该行也会被视为空行)。普通段落不该用空格或制表符来缩进

两个连续文本行中间没有空行的话被视为一个段落,如果要在多个连续文本行之间强行断行,也即插入<br />标签,可在相应的文本行末尾插入两个以上空格。

标题

Markdown 支持两种风格的标题表示方法:Setextatx

Setext 风格利用在相应文字下方输入等号表示一级标题,短折线表示二级标题,等号或短折线的数量没有任何限制。例如:

This is an H1
=============
This is an H2
-------------

Atx 风格利用井号表示,在标题文字前面插入 1 到 6 个#,对应到 1 到 6 级标题,例如:

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

引用

行首使用小于号>加上一个空格表示引用段落,内部可以嵌套多个引用。

示例:

> 骄傲使人进步,谦虚使人退步。——我 ^_^

将转换为:

<blockquote>
  <p>骄傲使人进步,谦虚使人退步。——我 ^_^</p>
</blockquote>

显示效果为:

骄傲使人进步,谦虚使人退步。——我 ^_^

代码区块

和程序相关的写作或是标签语言原始码通常会有已经排版好的代码区块,通常这些区块我们并不希望它以一般段落文件的方式去排版,而是照原来的书写方式进行显示,这就是代码区域控制。

行内代码

用反引号`(波浪号键下方的符号)表示,反引号将被转换为<code></code>标签,而反引号之间的内容将按照书写的形式进行转化显示,比如 AND 字符&及大于号小于号(<>)将被自动的转换为 HTML 实体(HTML entities):&amp;&lt;&gt;。如果要在行内代码块中使用反引号的字面值,则需要用两个反引号。

示例:

C 语言中的打印输出函数为 `printf()` 。HTML 的段落标签为 `<p>`。
``There is a literal backtick (`) here.``
A single backtick in a code span: `` ` ``
A backtick-delimited string in a code span: `` `foo` ``

将转换为:

C 语言中的打印输出函数为 <code>printf()</code> 。HTML 的段落标签为 <code>&lt;p&gt;</code>。
<code>There is a literal backtick (`) here.</code>
A single backtick in a code span: <code>`</code>
A backtick-delimited string in a code span: <code>`foo`</code></p>

显示效果为:

C 语言中的打印输出函数为 printf()。HTML 的段落标签为 <p>

There is a literal backtick (`) here.

A single backtick in a code span: `

A backtick-delimited string in a code span: `foo`

区域块代码

<pre><code>标签来把代码区块包起来。要在 Markdown 中建立代码区块很简单,只要简单地缩进 4 个空格或是 1 个制表符就可以,而这个每行一阶的缩进(4 个空格或是 1 个制表符),都会被移除,一个代码区块会一直持续到没有缩进的那一行(或是文件结尾)。例如,下面的输入:

 这是一个普通段落:
     这是一个代码区块。

Markdown 会转换成:

 <p>这是一个普通段落:</p>
 <pre><code>这是一个代码区块。
 </code></pre>

在代码区块里面, &<>会自动转成 HTML 实体。

例如一段 C 语言经典程序如下所示:

#include <stdio.h>

int main()
{
    printf ("Hello, world!\n");
    return 0;
}

列表

无序列表使用星号*、加号+、减号-后面加上空格来表示。

示例:

* 列表1
* 列表1

+ 列表1
+ 列表2

- 列表1
- 列表2

显示效果为:

  • 列表1
  • 列表1

  • 列表1

  • 列表2

  • 列表1

  • 列表2

有序列表使用英文数字加英文点号(句号)后面加上空格来表示。

示例:

1. 列表1
2. 列表2

显示效果为:

  1. 列表1
  2. 列表2

有序列表中的数字对输出的影响不大,所有列表项可以全部使用一个数字开始,仍可转换为排序正确的 HTML 代码。但是有一点,第一项必须以数字 1 开始。(因此,如果所有列表项只使用一个数字表示,那只能是数字 1)

如果在列表项之间存在空行,则列表项将会加上<p>标签。通过在行首利用四个空格或一个制表符缩进来创建多段落的列表项,例如:

*   A list item.

    With multiple paragraphs.

*   Another item in the list.

将会转换为:

<ul>
<li><p>A list item.</p>
<p>With multiple paragraphs.</p></li>
<li><p>Another item in the list.</p></li>
</ul>

在列表中插入引用也需要缩进四个空格或一个制表符,但是插入代码代码块需要两倍的缩进(即八个空格或两个制表符)

水平分割线

在一行中使用三个或三个以上的星号*、减号-或下划线_可以添加分隔线(<hr />),其中可以有空白,但是不能有其他字符。例如:

-------------
****
_______

都具有同样的效果:


行级元素(Span Elements)

强调

使用星号*或下划线_表示强调。

示例:

单星号 = *斜体* -> <em>斜体</em>
单下划线 = _斜体_ -> <em>斜体</em>
双星号 = **加粗** -> <strong>加粗</strong>
双下划线 = __加粗__ -> <strong>加粗</strong>

显示效果:

单星号 = 斜体

单下划线 = 斜体

双星号 = 加粗

双下划线 = 加粗

当星号或者下划线两侧有空格时,两字符将按照字面值显示,即星号或下划线。当然也可以利用转义符\转义。

链接

Markdown 支持两种风格的链接:Inline 和 Reference。两种风格都使用方括号[ ]限定链接内容。

Inline 形式

以中括号标记显示的链接文本,后面紧跟用小括号包围的链接。如果链接有 title 属性,则在链接中使用空格加 “title属性”。

这个一个 Inline 示例:[Google](http://google.com/ "Google").

将被转换为:

<p>这个一个 Inline 示例:<a href="http://google.com/" title="Google">Google</a>.</p>

显示效果为:

这个一个 Inline 示例:Google

Reference 形式

一般应用于多个不同位置使用相同链接。通常分为两个部分,调用部分为[链接文本][ref];定义部分可以出现在文本中的其他位置,格式为[ref]: http://some/link/address "可选的标题",其中的 UTR 地址可用尖括号括起来,可选的标题属性必须用双引号、单引号或者圆括号三者之一括起来。值得注意的是在ref中可包含字母、数字、空格或标点符号,而且不区分大小写。

Reference 链接有种简写形式,链接名称可以省略,此时链接名称为链接文本。

示例:

这个一个 Reference 示例:[Yahoo][ref].

[ref]: http://search.yahoo.com/ "Yahoo Search"

这是一个 Reference 简写形式:[Daring Fireball][].

[Daring Fireball]: http://daringfireball.net/

这是一个 Reference 更为简写的形式:[MathJax].

[MathJax]: http://www.mathjax.org/ "MathJax 官网"

将转换为:

<p>这个一个 Reference 示例:<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>.</p>
<p>这个一个 Reference 简写形式:<a href="http://daringfireball.net/">Daring Fireball</a>.</p>
<p>这是一个 Reference 更为简写的形式:<a href="http://www.mathjax.org/" title="MathJax 官网">MathJax.</a>

显示效果:

这个一个 Reference 示例:Yahoo

这个一个 Reference 简写形式:Daring Fireball.

这是一个 Reference 更为简写的形式:MathJax.

图片

图片的使用方法基本上和链接类似,只是在方括号前加叹号!。不过由于不能设置图片的大小和样式,所以一般直接使用 HTML 中的<img>标签。

示例:

Inline 示例:![替代文本](/images/icons/github-24.png "可选的 title")
Reference示例:![替代文本][pic]
[pic]: /images/icons/github-24.png "可选的 title"
HTML示例:<img src="/images/about.jpg" alt="替代文本" title="标题文本" width="200px" />

显示效果:

Inline 示例:替代文本

Reference示例:替代文本

HTML示例:替代文本

其它

自动链接

使用尖括号,可以为输入的 URL 或者邮箱自动创建链接。如 test@domain.com

Markdown 中特殊字符汇总

Markdown 中存在很多特殊字符,这些特殊字符都有特定的作用,要使用这些特殊字符本身,需要使用转义字符\进行转义处理,转义格式为\特殊字符。常用的特殊字符有:

#——井号,表示标题

+——加号,表示列表

\——反斜线,转义特殊字符

*——星号,列表,加粗或强调

`——反引号,行内代码

!——叹号,图片

-——减号,单个表示列表,多个表示横线

_——下划线,单个表示列表,多个表示加粗或斜体

[ ]——中括号,链接或图片用

{ }——大括号,链接或图片用

( )——小括号,链接或图片用

.——点号,用于有序列表

参考链接

上一篇:

下一篇:

回顶部