Markdown 完全指南


概述

Markdown 是一種用於網絡文本書寫的輕量級標記語言,廣泛用於個人 blog、github、wiki 中。其實瀏覽器並不能識別 Markdown 的語法,但許多 blog、wiki 平台以及 github 都內置了 Markdown 編輯器,編輯器會先把 Markdown 文本轉換成 HTML 格式的網頁,然后再把 HTML 網頁交給瀏覽器來顯示。除了上述的內置編輯器外,還有許多能解析 Markdown 語法的編寫工具,這些工具一般都提供瀏覽器預覽和導出成 HTML 或 PDF 文件的功能。

Markdown 的語法由一些符號定義,這些符號夾雜在文本中,用於控制文本的顯示方式。比如兩個星號可以給文字加粗**加粗**,這兩個星號在 Markdown 編輯器處理后就變成了 HTML 中的<strong>加粗</strong>標簽。相較於 Word 類型編輯器的“所見即所得”而言,Markdown 文件本身是純文本,並沒有格式,但通過 Markdown 語法符號能提供更加准確的 HTML 類型格式控制同時又沒有 HTML 那么難以書寫。

Markdown 的語法需要編輯器才能實現,因此編輯器可以按照自己的需求添加或者修改某個語法的含義。因此,基本上所有編輯器解析 Markdown 語法的方式都有些許差異,但大體上可以分成三類:

  • Classic Markdown:最基礎的 Markdown 語法,所有的編輯器都支持
  • Extra Markdown:擴展的 Markdown 語法,增加了表格等元素,不一定都能支持
  • Github Markdown:github 文檔使用的 Markdown 語法,包含 Extra Markdown 的所有內容,還增加了代碼高亮、emoji表情等語法,目前許多 blog 平台(cnblogs,csdn)都支持這種語法

本文主要介紹 Classic 和 Github 的語法,對於只有 Github 支持的語法會用上標\(^g\)注明,同時就在使用 Markdown 中經常遇到的問題給出解決方案。作者希望能在一篇文章中將 Markdown 使用中經常遇到的問題做全面總結,若有錯漏,歡迎指正。

注:作者在編寫此文的過程中發現 cnblogs 的 Markdown 編輯器有個別地方處理不符合標准,代碼塊和引用塊的默認樣式有點丑,並且不支持預覽,請各位斟酌后使用。

語法

標題和段落

標題支持兩種語法:底線格式和井號格式。標題會轉換成 HTML 中的<h1><h2>等標簽,這對於自動生成目錄非常重要(Markdown 沒有自動生成目錄的語法,不過可以利用其他的方式)。

底線格式需要單獨一行,使用至少兩個=-,只能處理兩階的標題。

標題1
===
標題2
---

井號格式使用 1~6 個的#,最多六階標題。行尾可以添加任意個#號,並不會被當作標題的一部分。

# 標題1 #
## 標題2
###### 標題6 ##


段落開頭不能使用空格或制表符縮進,連續的文本行會首位相連成為一個段落(cnblogs編輯器不會合成段落)。不同段落之間需要用一個或多個空行(空行可以包含空字符)分隔。如果想將連續的文本行解釋為兩個段落,在第一個文本上的末尾鍵入兩個空格后再換行。在生成 HTML 時,段落開頭的空格會被忽略或被解釋為代碼塊等格式,段落之間的所有空行都會被忽略。

  行首空格、段間空行都被忽略。
連續文本行會被合成一段。(cnblogs編輯器仍然是兩段)


可以在第一行最后加兩個空格后換行  
就可以分段了。

行首空格、段間空行都被忽略。
連續文本行會被合成一段。(cnblogs編輯器仍然是兩段)

可以在第一行加兩個空格后換行
就可以分段了。

鏈接和圖片

鏈接用於跳轉到其他頁面,包含行內式和參考式兩種樣式,還可以使用簡單的自動鏈接。跳轉地址可以用/開頭的相對路徑引用本機資源。

行內式:鏈接文字和跳轉地址寫在一起。如:
[an example](http://www.cnblogs.com/zhuyuanhao/ "鏈接title")
an example

參考式:鏈接文字和跳轉地址分開寫,通過[id]標識聯系起來。[id]標識可以包含字母、數字、空白和標點符號,但是並不區分大小寫。跳轉地址部分可以出現在文件的任意地方。

This is [an example][ID 2] reference-style link.

[id 2]: http://www.cnblogs.com/zhuyuanhao/ "可選title, 可以用單引號'、雙引號"或括號()包着,也可以另起一行並縮進"
[iD 3]: <http://www.cnblogs.com/zhuyuanhao/> 
	'跳轉地址也可以用尖括號包起來'

隱式參考鏈接:使用空標識[],在跳轉地址處使用鏈接文字作為標識。

[Google][]

[Google]: http://google.com/ "Google Inc."

自動鏈接:對於網址和電子郵件信箱,只要是用尖括號包起來,Markdown 就會自動把它轉成鏈接,鏈接文字和跳轉地址相同。

<http://www.cnblogs.com/zhuyuanhao/>
<address@example.com>

http://www.cnblogs.com/zhuyuanhao/
address@example.com

圖片用於在當前頁面顯示圖片,也包含行內式和參考式,只需要在鏈接的樣式前加一個驚嘆號!,就會被識別為圖片。可以使用相對路徑引用本地的圖片,也能使用 url 引用其他網站的圖片。不過到目前為止,Markdown 還沒有辦法指定圖片的寬高。

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

參考式:

![Alt text][id]

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

引用塊

引用塊使用右尖括號>標識,可以在每行都加上>,也可以只在段落的第一行加>

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

> Donec sit amet nisl. 
 Aliquam semper ipsum sit amet velit. Suspendisse
 id sem consectetuer libero luctus adipiscing.

可以使用多個>表示引用塊的不同層級。

> This is the first level of quoting.
> 
> > This is nested blockquote.
> 
> Back to the first level.

引用的區塊內也可以使用其他的 Markdown 語法,包括標題、列表、代碼塊等。

> ## This is a header.
> 
> 1.   This is the first list item.
> 2.   This is the second list item.
> 
> Here's some example code:
> 
>     return shell_exec("echo $input | $markdown_script");

代碼

代碼可以用行內代碼或者代碼塊來表示。
行內代碼使用一個或多個重音符號來表示代碼區域,起始和結束的重音符號個數必須相同。

Use the `printf()` function.

Use the printf() function.

如果想在代碼區域內插入k個重音符號,可以用k+1個重音符號來開啟和結束代碼區段。

There is a literal ```backtick (``)``` here.

There is a literal backtick (``) here.

如果在起始和結束端都插入空格,就可以在區域的一開始就插入重音符號。

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

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

Classic 代碼塊使用每行縮進的 4 個空格或是 1 個制表符來表示。在轉換成 HTML 時,每行行首的 4 個空格或 1 個制表符縮進會被移除,其余的空格或制表符會被保留。另外,一般在代碼塊中的 Markdown 語法符號不會被轉換。

Here is an example of AppleScript:

    tell application "Foo"
        **beep**
    end tell

Here is an example of AppleScript:

tell application "Foo"
    **beep**
end tell

Github 代碼塊使用三個或以上重音符號(```)放在代碼塊的前一行和后一行。在前一行重音符的后面加上語言名稱,可以按照該語言的語法對代碼塊內容高亮。如果要在代碼塊中顯示三個重音符,用四個重音符來表示代碼塊起止即可。支持的編程語言參見the languages YAML file,如果要使用沒有語法高亮的代碼塊,用plain標記。

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

列表

列表包括無序列表和有序列表兩類。列表的每一項都使用標記 + 分隔(至少一個空格或制表符) + 段落的格式,段落的內容可以跨行,用空格縮進,還可以包含代碼塊、引用塊等。如果在一個列表項里添加用空行隔開的多個段落,需要在每個段落開頭添加至少兩個空格。如果要表示多級列表,需要在下一級列表標記前加上至少兩個空格或一個制表符,多級列表可以混用不同的標記(cnblogs的 Markdown 不支持多級列表)。

無序列表使用星號*、加號+或是減號-作為列表標記,標記不能混用,否則會視為不同的列表。
有序列表則使用數字和一個英文句點表示,數字的內容是任意的,並不會影響 HTML 顯示的數字。有時不需要列表,但在段落開頭的文字是數字加句點的格式,為了不被 Markdown 解析成列表,需要在句點前加上反斜線,如:2016\. Something Begin.

+ 無序列表項1
+ 無序列表項2
 + 下一級列表
   2. 再下一級列表1
   2. 再下一級列表2
- 不同標記視為不同列表
- 列表還可以
```c
# 包含代碼塊
int a = 10;
```
- 或者引用
> I have a dream!
- 以及多行或多段。
第二行

  第二段

2016\. Something Begin.

表格\(^g\)

表格只能用在Extra MarkdownGithub Markdown中。用豎線|和連字符-表示,豎線用於分隔表格中的不同列,連字符用於分開表頭和表格主體,連字符添加冒號:還可以控制單元格對齊方式。書寫時,豎線沒有對齊要求,行首行尾的豎線可以省略,表頭下需要至少三個連字符分隔。

表格內容可以包含 Mardown 行內格式,不能添加引用、列表、多行文本,可以包含代碼行,不能用代碼塊。若要書寫豎線,需要用反斜線轉義\|(cnblogs編輯器支持有問題)。

| 默認左對齊 | 左對齊 | 中對齊 | 右對齊 |
| ------    | :--- | :---: | ---: | 
 頭尾的豎線可以省略 | 對齊 | 對齊 | 對齊  
| **加粗** | `int a;` | 豎線 \| | 鏈接[Google](www.google.com) |
默認左對齊 左對齊 中對齊 右對齊
頭尾的豎線可以省略 對齊 對齊 對齊
加粗 int a; 豎線 | 鏈接Google

文字樣式和轉義符號

文字樣式包括加粗、斜體、刪除線。其中 Classic Markdown 不支持刪除線。加粗用**__表示,斜體用*_表示,刪除線用~~表示。如果樣式符號兩邊都沒有文字的話,會被當作普通符號,如:** 符號 **效果為 ** 符號 **

樣式 語法 舉例 效果
加粗 **__ **文本**或 __文本__ 文本文本
斜體 *_ *文本*或 _文本_ 文本或_文本_
刪除線 ~~ ~~文本~~ 文本
混合 將上述符號混合 **~~文本~~*混合* **效果 **文本混合 **效果

對於 Markdown 中的語法符號,前面加反斜線\即可顯示符號本身。包括

\\ 反斜線 
\` 重音號 
\* 星號 
\_ 下划線 
\{\} \[\] \(\) 括號 
\# 井號 
\+ 加號 
\- 減號 
\. 句點 
\! 驚嘆號

\ 反斜線
` 重音號
* 星號
_ 下划線
{} [] () 括號
# 井號
+ 加號
- 減號
. 句點
! 驚嘆號

分割線用三個以上的星號*、減號-或下划線_表示,符號之間可以用空格分開但行內不能有其他非空白符號。

*** 
- - -
_______



任務列表\(^g\)和emoji表情\(^g\)

Github Markdown 支持任務列表樣式和 emoji 表情符號。(cnblogs編輯器里,這兩項的支持都不是很好)

任務列表需要在 Markdown 列表項的段落部分用[ ]開頭,也可以用[x]開頭表示一個已選擇的任務項。

- [x] 學習 Markdown
- [ ] 使用 Markdown
  1. [ ] 寫博客 

emoji表情使用:EMOJICODE:的格式,詳細的表情列表參見EMOJI CHEAT SHEET

:man: :thumbsup: :sunny: :bug:

在 Github 平台還有兩個特殊的功能:使用@user/team來通知用戶或者用戶組或使用#number引用某個 Issue 或者 Pull Request。這兩個功能只在 Github 平台有效,這里就不詳述了,可以參考mentioning-users-and-teams

HTML 標簽

Markdown 中可以直接書寫大部分 HTML 標簽。其中在 HTML 的區塊類型標簽<div>、<table>、<pre>、<p> 等內的,Markdown 語法會失效,在 HTML 行內型標簽<span>、<cite>、<del> 等內,Markdown 語法仍然有效。需要注意的是,在 HTML 標簽內,書寫特殊字符 <& 仍然需要用它們的替代形式 &lt;&amp;表示。在 Markdown 中,也能用 <& 的這種特殊形式。

This is <a href="http://cn.bing.com/images/search?q=markdown&amp;go=Submit+Query">Markdown</a>  regular paragraph. 
1 < 3 & 5
2 &lt; 4 &amp; 6
<table border="1" bgcolor="yellowgreen">
    <tr>
        <td>**count** 1 </td>
	<td>**count** 2 &lt; 4 &amp; 6</td>
    </tr>
</table>
This is **<em>another regular** paragraph</em>.

This is Markdown regular paragraph.
1 < 3 & 5
2 < 4 & 6

**count** 1 **count** 2 < 4 & 6
This is ** another regular** paragraph.

支持 Tex 公式

在 Markdown 中添加 Tex 公式有兩種方式:請求外部服務器生成或者本地生成

外部服務器生成方式是發送 Tex 公式到外部服務器,然后服務器會將 Tex 公式的圖片發送回來,這種方式不能處理復雜的 Tex 語法。使用 HTML <img>標簽,將 Tex 公式寫在 <img>標簽的 url 鏈接的參數里。如:
Google Chart服務器

<img src="http://chart.googleapis.com/chart?cht=tx&chl=\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">

forkosh服務器

<img src="http://www.forkosh.com/mathtex.cgi? \Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">

本地生成方式將 Tex 解析腳本插入到 HTML 文件的<head>標簽中,在 HTML 文件渲染的過程中生成 Tex 公式,當網頁中 Tex 公式比較多時速度會變慢。推薦使用 MathJax 引擎來實現,通過將下列 JS 腳本嵌入到生成的 HTML 文件<head>標簽中,就能解析 Tex 公式了。Markdown 文件不應包含 <script> 標簽,一般是通過修改 Markdown 編輯器的設置來自動添加。

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

行間公式($$Tex$$):$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$

\[x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} \]

行內公式($Tex$\\(Tex\\)):\\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\\)
\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\)

csdn 的 Markdown 編輯器默認支持 Tex 公式,cnblogs 需要在博客“選項”中選中“啟用數學公式支持”,MarkdownPad2 需要在Tools > Options > Advanced > HTML Head Editor中添加 MathJax 引擎,在F6預覽中顯示 Tex 公式。

免費編輯器

書寫 Markdown 離不開編輯器。這里羅列各個平台下的免費編輯器供參考

平台 編輯器
Windows MarkdownPad2
Mac Mou
Linux ReText
線上編輯器 Dillinger.ioStackEdit
博客平台 cnblogs、csdn、簡書
Chrome插件 Markdown Preview Plus

另外,Sublime、Vim都帶有 Markdown 預覽插件。

免費圖床

Markdown 文件本身不能包含圖片。因此,要發布帶圖片的 Markdown 文章,就需要先將圖片存放在網絡上,通過 url 地址引用圖片:![desc](url)。博客平台一般會提供圖片上傳服務,這樣就可以在博客中引用圖片的 url ,但是轉發到博客外部就不一定能訪問。網絡圖床服務器中的圖片能在所有地方訪問,但也有網絡失效或者服務器關閉的風險。

這里羅列幾個比較好用的圖床服務器

地址 說明
https://sm.ms/ 國際圖床,無注冊、不限流量
Github 可以把圖片上傳到github上
https://portal.qiniu.com 國內雲存儲服務七牛雲,需注冊、有流量限制,但可以自己控制
http://yotuku.cn/ 國內圖床,無注冊、不限流量

參考鏈接

Classsic Markdown:http://daringfireball.net/projects/markdown/syntax/
Classsic Markdown的翻譯版:http://wowubuntu.com/markdown/
Extra Markdown:https://michelf.ca/projects/php-markdown/extra/
Github Markdown:https://help.github.com/categories/writing-on-github/
MathJax:https://www.mathjax.org/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM