CSDN Markdown简明教程2-基本使用

1.前言

Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。CSDN博客支持Markdown可以让广大博友更加专注于博客内容，大赞。但是，不少博友可能对Markdown比较生疏，本博接下来用一个系列文章《Markdown简明教程》扼要介绍Markdown，希望可以对大家有所帮助。

系列教程目录

• 关于Markdown
• Markdown基本使用
• Markdown表格和公式
• Markdown UML绘图
• CSDN Markdown快速上手
• Markdown 参考手册

本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用，学习Markdown的基本语法，了解格式化文本，格式化代码、列表、图片、链接、转义符等，下一篇文章我们来研读Markdown的扩展使用。

2.基本语法

2.1文本格式化

2.1.1 强调文字

我们使用*斜体文字*的方式倾斜文字，**加粗的文字**的方式加粗文字，使用***加粗的斜体字***同时加粗和倾斜文字。

下面的Markdown代码：

<code class="language-markdown hljs  has-numbering"><span class="hljs-emphasis">*斜体文字*</span><span class="hljs-strong">**加粗文字**</span><span class="hljs-strong">***加粗的斜体文字**</span>*</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

将会编译成html：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">em</span>></span>斜体文字<span class="hljs-tag"></<span class="hljs-title">em</span>></span><span class="hljs-tag"><<span class="hljs-title">strong</span>></span>加粗文字<span class="hljs-tag"></<span class="hljs-title">strong</span>></span><span class="hljs-tag"><<span class="hljs-title">strong</span>></span><span class="hljs-tag"><<span class="hljs-title">em</span>></span>加粗的斜体文字<span class="hljs-tag"></<span class="hljs-title">em</span>></span><span class="hljs-tag"></<span class="hljs-title">strong</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

显示在网页上的结果为：
斜体文字
加粗文字
加粗的斜体文字

2.1.2 添加删除线

我们可以使用markdown给文字添加删除线：

<code class="language-markdown hljs  has-numbering">~~添加删除线的文字~~</code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

编译成html之后：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">del</span>></span>添加删除线的文字<span class="hljs-tag"></<span class="hljs-title">del</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

显示在网页上结果为：
添加删除线的文字

2.1.3 标题

Markdown 支持两种标题的语法，类 Setext 和类 atx 形式。

<code class="language-markdown hljs  has-numbering">类Setext形式采用底线的形式.<span class="hljs-header">一号标题=============</span><span class="hljs-header">二号标题-------------</span>类Atx形式则是在行首插入1到6个#，对应到标题1到标题6.<span class="hljs-header"># 一号标题</span><span class="hljs-header">## 二号标题</span><span class="hljs-header">### 三号标题</span><span class="hljs-header">#### 四号标题</span><span class="hljs-header">##### 五号标题</span><span class="hljs-header">###### 六号标题</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

解析成html：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">h1</span>></span>一号标题<span class="hljs-tag"></<span class="hljs-title">h1</span>></span><span class="hljs-tag"><<span class="hljs-title">h2</span>></span>二号标题<span class="hljs-tag"></<span class="hljs-title">h2</span>></span><span class="hljs-tag"><<span class="hljs-title">h3</span>></span>三号标题<span class="hljs-tag"></<span class="hljs-title">h3</span>></span><span class="hljs-tag"><<span class="hljs-title">h4</span>></span>四号标题<span class="hljs-tag"></<span class="hljs-title">h4</span>></span><span class="hljs-tag"><<span class="hljs-title">h5</span>></span>五号标题<span class="hljs-tag"></<span class="hljs-title">h5</span>></span><span class="hljs-tag"><<span class="hljs-title">h6</span>></span>六号标题<span class="hljs-tag"></<span class="hljs-title">h6</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

显示在网页上结果为：

2.1.4 引用

Markdown通过在引用的文字之前添加”>”标记达到引用的效果，引用段落的时候可以偷懒只在整个段落的第一行最前面加上 >。引用里面可以使用强调、链接等其他语法。

<code class="language-markdown hljs  has-numbering"><span class="hljs-blockquote">> 这里是一段引用</span><span class="hljs-blockquote">> 也可以偷懒只在首行引用一个段落</span><span class="hljs-blockquote">> 引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出</span>  来，实现<span class="hljs-strong">**易读易写**</span>的文章写作，已经逐渐成为事实上的行业标准。><span class="hljs-strong">**结束引用，用个空行**</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

编译成html之后：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">blockquote</span>></span>    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>这里是一段引用    也可以偷懒只在首行引用一个段落<span class="hljs-tag"></<span class="hljs-title">p</span>></span>    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现<span class="hljs-tag"><<span class="hljs-title">strong</span>></span>易读易写<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>的文章写作，已经逐渐成为事实上的行业标准。<span class="hljs-tag"></<span class="hljs-title">p</span>></span>    <span class="hljs-tag"><<span class="hljs-title">strong</span>></span>结束引用，用个空行<span class="hljs-tag"></<span class="hljs-title">strong</span>></span><span class="hljs-tag"></<span class="hljs-title">blockquote</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>

显示在网页上结果为：

这里是一段引用
也可以偷懒只在首行引用一个段落

引用段落：Markdown是一种轻量级的标记语言，把作者从繁杂的排版工作中解放出来，实现易读易写的文章写作，已经逐渐成为事实上的行业标准。

结束引用，用个空行

引用可以嵌套，使用不同数量的“>”表示层次。

<code class="language-markdown hljs  has-numbering"><span class="hljs-blockquote">> 这里是个引用</span><span class="hljs-blockquote">> > 嵌套引用</span><span class="hljs-blockquote">> > 这里是个引用</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

编译成html之后：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">blockquote</span>></span>    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>这里是个引用<span class="hljs-tag"></<span class="hljs-title">p</span>></span>    <span class="hljs-tag"><<span class="hljs-title">blockquote</span>></span>        <span class="hljs-tag"><<span class="hljs-title">p</span>></span>嵌套引用<span class="hljs-tag"></<span class="hljs-title">p</span>></span>    <span class="hljs-tag"></<span class="hljs-title">blockquote</span>></span>    <span class="hljs-tag"><<span class="hljs-title">p</span>></span>这里是个引用<span class="hljs-tag"></<span class="hljs-title">p</span>></span><span class="hljs-tag"></<span class="hljs-title">blockquote</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

显示在网页上结果为：

这里是个引用

嵌套引用

这里是个引用

2.2 代码格式化

2.2.1 行内代码

使用反引号”`”包含实现行内代码。

<code class="language-markdown hljs  has-numbering">我们可以使用<span class="hljs-code">`<br>`</span>换行，也可以使用<span class="hljs-code">`<p></p>`</span>实现。<span class="hljs-code">`高亮`</span>文字</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

编译成html之后：

<code class="language-html hljs  has-numbering">我们可以使用<span class="hljs-tag"><<span class="hljs-title">code</span>></span>&lt;br&gt;<span class="hljs-tag"></<span class="hljs-title">code</span>></span>换行，也可以使用<span class="hljs-tag"><<span class="hljs-title">code</span>></span>&lt;p&gt;&lt;/p&gt;<span class="hljs-tag"></<span class="hljs-title">code</span>></span>实现。<span class="hljs-tag"><<span class="hljs-title">code</span>></span>高亮<span class="hljs-tag"></<span class="hljs-title">code</span>></span>文字。</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

显示在网页上结果为：
我们可以使用<br>换行，也可以使用<p></p>实现。
高亮文字

2.2.1 区块代码

如果需要在代码内插入反引号，需要多个反引号开始和结束一段代码。
如果需要代码块和语法高亮，可以采用三个反引号的方式，同时可以注明语言类型。

<code class="hljs coffeescript has-numbering"> `<span class="javascript"></span>``<span class="javascript">ruby <span class="hljs-built_in">require</span> <span class="hljs-string">'redcarpet'</span> markdown = Redcarpet.new(<span class="hljs-string">"Hello World!"</span>) puts markdown.to_html </span>``<span class="javascript"></span>`</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

2.3 列表

2.3.1 无序列表

无序列表使用星号、加号或是减号作为列表标记，如果不按列表显示，前面记得加一空行。

<code class="language-markdown hljs  has-numbering"><span class="hljs-bullet">- </span>Red<span class="hljs-bullet">- </span>Green<span class="hljs-bullet">- </span>Blue</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

解析为

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">ul</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Red<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Green<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Blue<span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ul</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

显示在网页上结果为：

• Red
• Green
• Blue

2.3.2 有序列表

使用数字接着一个英文句点表示一个有序列表， 注意前面的数字对列表没有影响。

<code class="language-markdown hljs  has-numbering"><span class="hljs-bullet">1. </span>文字<span class="hljs-bullet">2. </span>图片<span class="hljs-bullet">4. </span>表格</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

解析成html：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">ol</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>文字<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>图片<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>表格<span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ol</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

显示在网页结果为：

1. 文字
2. 图片
3. 表格

2.3.3 列表嵌套

列表可以嵌套，添加tab缩进表示层次。例如下面的Markdown代码：

<code class="language-markdown hljs  has-numbering"><span class="hljs-bullet">1. </span>文字<span class="hljs-code">    1. 强调</span><span class="hljs-code">        - 粗体</span><span class="hljs-code">        - 斜体</span><span class="hljs-code">        - 粗体和斜体</span><span class="hljs-code">    2. 引用</span><span class="hljs-bullet">2. </span>图片<span class="hljs-bullet">3. </span>表格</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

转换成html为：

<code class="language-html hljs  has-numbering"><span class="hljs-tag"><<span class="hljs-title">ol</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>文字    <span class="hljs-tag"><<span class="hljs-title">ol</span>></span>        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>强调            <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>                <span class="hljs-tag"><<span class="hljs-title">li</span>></span>粗体<span class="hljs-tag"></<span class="hljs-title">li</span>></span>                <span class="hljs-tag"><<span class="hljs-title">li</span>></span>斜体<span class="hljs-tag"></<span class="hljs-title">li</span>></span>                <span class="hljs-tag"><<span class="hljs-title">li</span>></span>粗体和斜体<span class="hljs-tag"></<span class="hljs-title">li</span>></span>            <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>        <span class="hljs-tag"></<span class="hljs-title">li</span>></span>        <span class="hljs-tag"><<span class="hljs-title">li</span>></span>引用<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"></<span class="hljs-title">ol</span>></span>    <span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>图片<span class="hljs-tag"></<span class="hljs-title">li</span>></span>    <span class="hljs-tag"><<span class="hljs-title">li</span>></span>表格<span class="hljs-tag"></<span class="hljs-title">li</span>></span><span class="hljs-tag"></<span class="hljs-title">ol</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li></ul>

显示在网页上结果为：

1. 文字
   
   1. 强调
      
      • 粗体
      • 斜体
      • 粗体和斜体
   2. 引用
2. 图片
3. 表格

2.3.4 多段列表

列表项里可以包含多个段落，每个项目下的段落都必须缩进 4 个空格或是 1 个制表符：

<code class="language-markdown hljs  has-numbering"><span class="hljs-bullet">1. </span>学习Markdown<span class="hljs-code">    学习Markdown的网站，我们可以参考文章结尾的学习资源，文档、案例、教程。</span><span class="hljs-code">    学习起来很简单。</span><span class="hljs-bullet">2. </span>使用Markdown<span class="hljs-code">    可以使用客户端和在线编辑器。</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

在网页上显示结果为：

1. 学习Markdown
   学习Markdown的网站，我们可以参考文章结尾的学习资源，文档、案例、教程。
   学习起来很简单。
2. 使用Markdown
   可以使用客户端和在线编辑器。

2.4 链接

Markdown 支持两种形式的链接语法： 行内式和参考式两种形式。

2.4.1 行内式链接

首先来看行内式，只要在方块括号后面紧接着圆括号并插入网址链接即可，如果你还想要加上链接的 title 文字，只要在网址后面，用双引号把 title 文字包起来即可。

<code class="language-markdown hljs  has-numbering">欢迎大家访问我的[<span class="hljs-link_label">博客</span>](<span class="hljs-link_url">http://blog.csdn.net/whqet/ "博客"</span>)。也可以不指定[<span class="hljs-link_label">链接</span>](<span class="hljs-link_url">http://blog.csdn.net</span>)的title。</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

解析成html：

<code class="language-html hljs  has-numbering">欢迎大家访问我的<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://blog.csdn.net/whqet/"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"博客"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span>。也可以不指定<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://blog.csdn.net"</span>></span>链接<span class="hljs-tag"></<span class="hljs-title">a</span>></span>的title。</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

显示在网页上，结果为：

欢迎大家访问我的博客。
也可以不指定链接的title。

2.4.2 参考式链接

参考式链接需要进行链接内容定义，然后引用该定义设置链接。
链接内容定义格式为：

<code class="language-markdown hljs  has-numbering">[<span class="hljs-link_reference">链接名</span>]:<span class="hljs-link_url"> 链接地址 "链接title"</span><span class="hljs-link_url">[链接名]: 空格(或tab) 链接地址 空格 "链接地址"(可省略)</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

设置链接的格式为

<code class="language-markdown hljs  has-numbering">[<span class="hljs-link_label">链接文字</span>][<span class="hljs-link_reference">链接名称</span>]</code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

如下面代码所说：

<code class="language-markdown hljs  has-numbering">请大家访问我的[<span class="hljs-link_label">博客</span>][<span class="hljs-link_reference">blog</span>],获取更多信息。[<span class="hljs-link_reference">blog</span>]:<span class="hljs-link_url"> http://blog.csdn.net/whqet "我的CSDN博客"</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

解析成html为：

<code class="language-html hljs  has-numbering">请大家访问我的<span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://blog.csdn.net/whqet"</span> <span class="hljs-attribute">title</span>=<span class="hljs-value">"我的CSDN博客"</span>></span>博客<span class="hljs-tag"></<span class="hljs-title">a</span>></span>,获取更多信息。</code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

显示在网页上结果为：
请大家访问我的博客,获取更多信息。

2.4.3 页内导航

我们同样可以使用markdown实现页内导航，步骤如下：

1. 先定义一个锚记
   <div id="footer"></div>
2. 然后设置页内链接
   [到底部](#footer)
   我们可以类似的方式去实现文章的页内导航。单击下面的链接跳转到2.4链接。

跳到链接开始位置

2.5 图片

Markdown 使用一种和链接很相似的语法来标记图片，同样也允许两种样式： 行内式和参考式。
行内式图片如下所示：

<code class="language-markdown hljs  has-numbering">![<span class="hljs-link_label">Alt text</span>](<span class="hljs-link_url">/path/to/img.jpg</span>)![<span class="hljs-link_label">Alt text</span>](<span class="hljs-link_url">/path/to/img.jpg "Optional title"</span>)</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

参考式图片如下所示：

<code class="language-markdown hljs  has-numbering">![<span class="hljs-link_label">Alt text</span>][<span class="hljs-link_reference">id</span>][<span class="hljs-link_reference">id</span>]:<span class="hljs-link_url"> url/to/image  "Optional title attribute"</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

到目前为止， Markdown 还没有办法指定图片的宽高，如果你需要的话，你可以使用普通的 标签。
注意：CSDN图片如果大于显示区域，则图片宽度自适应，如果图片较小则以原始尺寸显示。

2.6 分割线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

<code class="language-markdown hljs  has-numbering"><span class="hljs-bullet">* </span><span class="hljs-bullet">* *</span><span class="hljs-emphasis">***</span><span class="hljs-strong">*****</span><span class="hljs-bullet">- </span>- -<span class="hljs-horizontal_rule">---------------------------------------</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

2.7 转义

Markdown 可以利用反斜杠来实现转义， 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

<code class="language-markdown hljs  has-numbering">\   反斜线`   反引号<span class="hljs-bullet">*   </span>星号_   底线{}  花括号[]  方括号()  括弧<span class="hljs-header">#   井字号</span><span class="hljs-bullet">+   </span>加号<span class="hljs-bullet">-   </span>减号.   英文句点!   惊叹号</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

3.动手实践

1. 大家可以通过CSDN的管理博客-博客配置-编辑器类型设置默认的编辑器为Markdown编辑器，然后新建文章，就可以体验Markdown编辑器了。
2. 利用在线编辑工具体验Markdown，例如markable，或stackedit, 或作业部落等。
3. 下载客户端，window平台下的MarkdownPad或mac平台下的mou。

本文为《Markdown简明教程》系列教程的第2篇Markdown基本使用，学习Markdown的基本语法，下一篇文章我们来研读Markdown的扩展使用。

4.声明

前端开发whqet，关注前端开发，分享相关资源。csdn专家博客，王海庆希望能对您有所帮助，限于作者水平有限，出错难免，欢迎拍砖！
欢迎任何形式的转载，烦请注明装载，保留本段文字。
本文原文链接，http://blog.csdn.net/whqet/article/details/44274999
欢迎大家访问独立博客http://whqet.github.io