Markdown簡明教程2-Markdown基本使用，markdown2-markdown

Markdown簡明教程2-Markdown基本使用，markdown2-markdown

1.前言

Markdown是一種輕量級的標記語言，把作者從繁雜的排版工作中解放出來，實現易讀易寫的文章寫作，已經逐漸成為事實上的行業標準。CSDN部落格支援Markdown可以讓廣大博友更加專註於部落格內容，大讚。但是，不少博友可能對Markdown比較生疏，本博接下來用一個系列文章《Markdown簡明教程》扼要介紹Markdown，希望可以對大家有所協助。

系列教程目錄

• 關於Markdown
• Markdown基本使用
• Markdown擴充使用
• Markdown常用工具
• CSDN Markdown快速上手
• Markdown 參考手冊

本文為《Markdown簡明教程》系列教程的第2篇Markdown基本使用，學習Markdown的基本文法，瞭解格式化文本，格式化代碼、列表、圖片、連結、轉義符等，下一篇文章我們來研讀Markdown的擴充使用。

2.基本文法2.1文字格式設定化2.1.1 強調文字

我們使用*斜體文字*的方式傾斜文字，**加粗的文字**的方式加粗文字，使用***加粗的斜體字***同時加粗和傾斜文字。

下面的Markdown代碼：

*斜體文字***加粗文字*****加粗的斜體文字***

將會編譯成html：

<em>斜體文字</em><strong>加粗文字</strong><strong><em>加粗的斜體文字</em></strong>

顯示在網頁上的結果為：
斜體文字
加粗文字
加粗的斜體文字

2.1.2 添加刪除線

我們可以使用markdown給文字添加刪除線：

~~添加刪除線的文字~~

編譯成html之後：

<del>添加刪除線的文字</del>

顯示在網頁上結果為：
添加刪除線的文字

2.1.3 標題

Markdown 支援兩種標題的文法，類 Setext 和類 atx 形式。

類Setext形式採用底線的形式.一號標題=============二號標題-------------類Atx形式則是在行首插入1到6個#，對應到標題1到標題6.# 一號標題## 二號標題### 三號標題#### 四號標題##### 五號標題###### 六號標題

解析成html：

<h1>一號標題</h1><h2>二號標題</h2><h3>三號標題</h3><h4>四號標題</h4><h5>五號標題</h5><h6>六號標題</h6>

顯示在網頁上結果為：

2.1.4 引用

Markdown通過在引用的文字之前添加”>”標記達到引用的效果，引用段落的時候可以偷懶只在整個段落的第一行最前面加上 >。引用裡面可以使用強調、連結等其他文法。

> 這裡是一段引用> 也可以偷懶只在首行引用一個段落> 引用段落：Markdown是一種輕量級的標記語言，把作者從繁雜的排版工作中解放出  來，實現**易讀易寫**的文章寫作，已經逐漸成為事實上的行業標準。>**結束引用，用個空行**

編譯成html之後：

<blockquote>    <p>這裡是一段引用    也可以偷懶只在首行引用一個段落</p>    <p>引用段落：Markdown是一種輕量級的標記語言，把作者從繁雜的排版工作中解放出來，實現<strong>易讀易寫</strong>的文章寫作，已經逐漸成為事實上的行業標準。</p>    <strong>結束引用，用個空行</strong></blockquote>

顯示在網頁上結果為：

這裡是一段引用
也可以偷懶只在首行引用一個段落

引用段落：Markdown是一種輕量級的標記語言，把作者從繁雜的排版工作中解放出來，實現易讀易寫的文章寫作，已經逐漸成為事實上的行業標準。

結束引用，用個空行

引用可以嵌套，使用不同數量的“>”展示層次。

> 這裡是個引用> > 嵌套引用> > 這裡是個引用

編譯成html之後：

<blockquote>    <p>這裡是個引用</p>    <blockquote>        <p>嵌套引用</p>    </blockquote>    <p>這裡是個引用</p></blockquote>

顯示在網頁上結果為：

這裡是個引用

嵌套引用

這裡是個引用

2.2 代碼格式化2.2.1 行內代碼

使用反引號”`”包含實現行內代碼。

我們可以使用`<br>`換行，也可以使用`<p></p>`實現。`高亮`文字

編譯成html之後：

我們可以使用<code>&lt;br&gt;</code>換行，也可以使用<code>&lt;p&gt;&lt;/p&gt;</code>實現。<code>高亮</code>文字。

顯示在網頁上結果為：
我們可以使用<br>換行，也可以使用<p></p>實現。
高亮文字

2.2.1 區塊代碼

如果需要在代碼插入入反引號，需要多個反引號開始和結束一段代碼。
如果需要代碼塊和文法高亮，可以採用三個反引號的方式，同時可以註明語言類型。

 ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ```

2.3 列表2.3.1 無序列表

無序列表使用星號、加號或是減號作為列表標記，如果不按列表顯示，前面記得加一空行。

- Red- Green- Blue

解析為

<ul>    <li>Red</li>    <li>Green</li>    <li>Blue</li></ul>

顯示在網頁上結果為：

• Red
• Green
• Blue

2.3.2 有序列表

使用數字接著一個英文句點表示一個有序列表， 注意前面的數字對列表沒有影響。

1. 文字2. 圖片4. 表格

解析成html：

<ol>    <li>文字</li>    <li>圖片</li>    <li>表格</li></ol>

顯示在網頁結果為：

2.3.3 列表嵌套

列表可以嵌套，添加tab縮排展示層次。例如下面的Markdown代碼：

1. 文字    1. 強調        - 粗體        - 斜體        - 粗體和斜體    2. 引用2. 圖片3. 表格

轉換成html為：

<ol>    <li>文字    <ol>        <li>強調            <ul>                <li>粗體</li>                <li>斜體</li>                <li>粗體和斜體</li>            </ul>        </li>        <li>引用</li>    </ol>    </li>    <li>圖片</li>    <li>表格</li></ol>

顯示在網頁上結果為：

圖片

表格

2.3.4 多段列表

清單項目裡可以包含多個段落，每個項目下的段落都必須縮排 4 個空格或是 1 個定位字元：

1. 學習Markdown    學習Markdown的網站，我們可以參考文章結尾的學習資源，文檔、案例、教程。    學習起來很簡單。2. 使用Markdown    可以使用用戶端和線上編輯器。

在網頁上顯示結果為：

2.4 連結

Markdown 支援兩種形式的連結文法： 行內式和參考式兩種形式。

2.4.1 行內式連結

首先來看行內式，只要在方塊括弧後面緊接著圓括弧並插入網址連結即可，如果你還想要加上連結的 title 文字，只要在網址後面，用雙引號把 title 文字包起來即可。

歡迎大家訪問我的[部落格](http://blog.csdn.net/whqet/ "部落格")。也可以不指定[連結](http://blog.csdn.net)的title。

解析成html：

歡迎大家訪問我的<a href="http://blog.csdn.net/whqet/" title="部落格">部落格</a>。也可以不指定<a href="http://blog.csdn.net">連結</a>的title。

顯示在網頁上，結果為：

歡迎大家訪問我的部落格。
也可以不指定連結的title。

2.4.2 參考式連結

參考式連結需要進行連結內容定義，然後引用該定義設定連結。
連結內容定義格式為：

[連結名]: 連結地址 "連結title"[連結名]: 空格(或tab) 連結地址 空格 "連結地址"(可省略)

設定連結的格式為

[連結文字][連結名稱]

如下面代碼所說：

請大家訪問我的[部落格][blog],擷取更多資訊。[blog]: http://blog.csdn.net/whqet "我的CSDN部落格"

解析成html為：

請大家訪問我的<a href="http://blog.csdn.net/whqet" title="我的CSDN部落格">部落格</a>,擷取更多資訊。

顯示在網頁上結果為：
請大家訪問我的部落格,擷取更多資訊。

2.4.3 頁內導航

我們同樣可以使用markdown實現頁內導航，步驟如下：

跳到連結開始位置

2.5 圖片

Markdown 使用一種和連結很相似的文法來標記圖片，同樣也允許兩種樣式： 行內式和參考式。
行內式圖片如下所示：

![Alt text](/path/to/img.jpg)![Alt text](/path/to/img.jpg "Optional title")

參考式圖片如下所示：

![Alt text][id][id]: url/to/image  "Optional title attribute"

到目前為止， Markdown 還沒有辦法指定圖片的寬高，如果你需要的話，你可以使用普通的 標籤。
注意：CSDN圖片如果大於顯示地區，則圖片寬度自適應，如果圖片較小則以原始大小顯示。

2.6 分割線

你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線：

* * *********- - ----------------------------------------

2.7 轉義

Markdown 可以利用反斜線來實現轉義， 支援以下這些符號前面加上反斜線來協助插入普通的符號：

\   反斜線`   反引號*   星號_   底線{}  花括弧[]  方括弧()  括弧#   井字型大小+   加號-   減號.   英文句點!   驚歎號

動手實踐

本文為《Markdown簡明教程》系列教程的第2篇Markdown基本使用，學習Markdown的基本文法，下一篇文章我們來研讀Markdown的擴充使用。

聲明

前端開發whqet，關注前端開發，分享相關資源。csdn專家部落格，王海慶希望能對您有所協助，限於作者水平有限，出錯難免，歡迎拍磚！
歡迎任何形式的轉載，煩請註明裝載，保留本段文字。
本文原文連結，http://blog.csdn.net/whqet/article/details/44274999
歡迎大家訪問獨立部落格http://whqet.github.io