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

阿新 • • 發佈：2019-02-13

簡明教程2-Markdown基本使用

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程式碼：

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

將會編譯成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>

顯示在網頁上結果為：

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

2.3.4 多段列表

列表項裡可以包含多個段落，每個專案下的段落都必須縮排 4 個空格或是 1 個製表符：

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

在網頁上顯示結果為：

學習Markdown
學習Markdown的網站，我們可以參考文章結尾的學習資源，文件、案例、教程。
學習起來很簡單。
使用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實現頁內導航，步驟如下：

先定義一個錨記
<div id="footer"></div>
然後設定頁內連結
[到底部](#footer)
我們可以類似的方式去實現文章的頁內導航。單擊下面的連結跳轉到2.4連結。

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 可以利用反斜槓來實現轉義，支援以下這些符號前面加上反斜槓來幫助插入普通的符號：

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

3.動手實踐

大家可以通過CSDN的管理部落格-部落格配置-編輯器型別設定預設的編輯器為Markdown編輯器，然後新建文章，就可以體驗Markdown編輯器了。
利用線上編輯工具體驗Markdown，例如markable，或stackedit, 或作業部落等。
下載客戶端，window平臺下的MarkdownPad或mac平臺下的mou。

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

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

1.前言

2.基本語法

2.1文字格式化

2.1.1 強調文字

2.1.2 新增刪除線

2.1.3 標題

2.1.4 引用

2.2 程式碼格式化

2.2.1 行內程式碼

2.2.1 區塊程式碼

2.3 列表

2.3.1 無序列表

2.3.2 有序列表

2.3.3 列表巢狀

2.3.4 多段列表

2.4 連結

2.4.1 行內式連結

2.4.2 參考式連結

2.4.3 頁內導航

2.5 圖片

2.6 分割線

2.7 轉義

3.動手實踐

4.宣告

相關推薦