Markdown常见用法
Markdown 是一种更好地编写 HTML 的方法, 可以避免复杂性和丑陋。
其主要的优点如下:
- Markdown 易于学习, 额外字符很少，因此编写内容也更快。
- 使用Markdown编写内容时出错的可能性比较小。
- 可以很方便产生有效的XHTML输出。
- 将内容和视觉显示分离，专注内容创作和同时不会弄乱页面的外观。
- 可以在任何文本编辑器或者Markdown软件中编写。
- Markdown 使用起来会很愉快!
Markdown 的作者 John Gruber 是这样说的：
The overriding design goal for Markdown’s formatting syntax is to make it as readable as possible. The idea is that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it’s been marked up with tags or formatting instructions. While Markdown’s syntax has been influenced by several existing text-to-HTML filters, the single biggest source of inspiration for Markdown’s syntax is the format of plain text email. – John Gruber
让我们看一下 Markdown 的主要元素以及生成的 HTML 的样子：
可以将此页面添加为书签，以方便参考！
标题(Headings)
标题可以从 h1 到h6 ， 使用# 个数来表示级别:
# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
呈现结果：
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
HTML表示:
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>
注释(Comments)
注释和HTML兼容
<!--
This is a comment
-->
下面的注释是 看不到 的:
水平线(Horizontal Rules)
在HTML中使用标签<hr>实现主题分割，在Markdown中可以使用以下的方式创建和 <hr> 一样的效果:
___: 三个连续的下划线---: 三个连续的破折号***: 三个连续的星号
显示为:
正文段落
正文在HTML使用<p></p>标签将呈现的内容包裹.
例如下面的正文:
Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.
在HTML中应该如下:
<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>
强调(Emphasis)
粗体
加粗用来强调重点的文字内容，下面的文本会呈现为粗体：
**rendered as bold text**
显示为：
rendered as bold text
对应下面的HTML内容：
<strong>rendered as bold text</strong>
斜体
斜体也是另外一种强调内容的表达方式，例如：
_rendered as italicized text_
显示为:
rendered as italicized text
对应HTML内容如下:
<em>rendered as italicized text</em>
删除线
在 GFM (GitHub 风格的 Markdown) 中可以使用删除线.
~~Strike through this text.~~
显示效果:
Strike through this text.
HTML:
<del>Strike through this text.</del>
块引用
用于在文档中引用其他来源的内容块，在要引用的内容之前添加 >标记 ：
> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
显示效果如下:
Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.
对应HTML为:
<blockquote>
<p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>
引用也可以嵌套使用:
> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>
> > Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
>
> Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
显示为:
Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue. Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.
Mauris sit amet ligula egestas, feugiat metus tincidunt, luctus libero. Donec congue finibus tempor. Vestibulum aliquet sollicitudin erat, ut aliquet purus posuere luctus.
列表(Lists)
无序列表
无序列表用在项目的顺序不明确的情况下，可以使用以下任何符号来表示每个列表项的符号：
* valid bullet
- valid bullet
+ valid bullet
例如：
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
呈现为:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
对应HTML为：
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
有序列表
有序列表表示项目顺序确实很重要的列表：
1. Lorem ipsum dolor sit amet
4. Consectetur adipiscing elit
2. Integer molestie lorem at massa
8. Facilisis in pretium nisl aliquet
4. Nulla volutpat aliquam velit
99. Faucibus porta lacus fringilla vel
21. Aenean sit amet erat nunc
6. Eget porttitor lorem
显示为：
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
对应的HTML表示如下:
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
TIP: 如果对每个项目的数字都使用 1.，Markdown 会自动为每个项目编号。 例如：
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem
呈现为：
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
代码(Code)
行内代码(Inline code)
使用 `来包裹内联代码片段，例如：
In this example, `<section></section>` should be wrapped as **code**.
显示为：
In this example, <section></section> should be wrapped as code.
对应HTML:
<p>In this example, <code><section></section></code> should be wrapped as <strong>code</strong>.</p>
缩进代码(Indented code)
将几行代码缩进至少2个空格，例如：
// Some comments
line 1 of code
line 2 of code
line 3 of code
显示效果：
// Some comments
line 1 of code
line 2 of code
line 3 of code
对应HTML:
<pre>
<code>
// Some comments
line 1 of code
line 2 of code
line 3 of code
</code>
</pre>
代码块(Block code)
使用 ``` 表示多行代码：
Sample text here...
HTML:
<pre>
<code>Sample text here...</code>
</pre>
表格(Tables)
通过在每个单元格之间添加管道作为分隔符，并在标题下方添加一行破折号（即水平线条分隔）来创建表格。 另外注意，管道不需要垂直对齐。
| Option | Description |
| ------ | ----------- |
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
显示效果：
| Option | Description |
|---|---|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
对应HTML:
<table>
<tr>
<th>Option</th>
<th>Description</th>
</tr>
<tr>
<td>data</td>
<td>path to data files to supply the data that will be passed into templates.</td>
</tr>
<tr>
<td>engine</td>
<td>engine to be used for processing templates. Handlebars is the default.</td>
</tr>
<tr>
<td>ext</td>
<td>extension to be used for dest files.</td>
</tr>
</table>
表格文本右对齐
在任何标题下方的破折号右侧添加一个冒号将使该列的文本右对齐。
| Option | Description |
| ------:| -----------:|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
| Option | Description |
|---|---|
| data | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext | extension to be used for dest files. |
链接(Links)
基本链接
[Assemble](http://assemble.io)
显示如下 (鼠标放在链接上没有提示):
HTML:
<a href="http://assemble.io">Assemble</a>
添加文字提示
[Upstage](https://github.com/upstage/ "Visit Upstage!")
显示如下 (鼠标放在链接上应该会有提示):
HTML:
<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>
命名锚点
命名锚点能够跳转到同一页面上的指定锚点位置， 例如这些章节中的每一章：
# Table of Contents
* [Chapter 1](#chapter-1)
* [Chapter 2](#chapter-2)
* [Chapter 3](#chapter-3)
将跳转到如下部分:
## Chapter 1 <a id="chapter-1"></a>
Content for chapter one.
## Chapter 2 <a id="chapter-2"></a>
Content for chapter one.
## Chapter 3 <a id="chapter-3"></a>
Content for chapter one.
NOTE 锚标记的特定位置是任意的，它们被内联放置在指定位置，虽然不被显示但是有效。
图片(Images)
图片具有与链接类似的语法，但前面会多一个感叹号。
或者
像链接一样，图片也有脚注样式的语法。
替代用法 : 图片位置标注
![Alt text][id]
下面是在文档中定义 URL 位置：
[id]: /programming/images/Octocat.jpg "The Octocat"
调整图片大小
将HTTP参数 width 与/或 height 添加到链接图像以调整大小. 值和CSS一致 (默认是 auto).
添加CSS类
将 HTTP classes 参数添加到图片链接实现添加CSS类. shadow(阴影)和 border(边框) 参数都是可用的，也可以自定义其他的。
其他更多内容将持续补充~