Markdown學習筆記

Markdown 概述#

宗旨#

Markdown 是一種輕量級標記語言，創始人為約翰・格魯伯（John Gruber）。它允許人們 使用易讀易寫的純文本格式編寫文檔，然後轉換成有效的XHTML(或者HTML)文檔。

可讀性，無論如何，都是最重要的。一份使用 Markdown 格式撰寫的文件應該可以直接以純文本發布，並且看起來不會像是由許多標籤或是格式指令所構成。Markdown 語法受到一些既有 text-to-HTML 格式的影響，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大靈感來源其實是純文本電子郵件的格式。

總之， Markdown 的語法全由一些符號所組成，這些符號經過精挑細選，其作用一目了然。比如：在文字兩旁加上星號，看起來就像強調。Markdown 的列表看起來，嗯，就是列表。Markdown 的區塊引用看起來就真的像是引用一段文字，就像你曾在電子郵件中見過的那樣。

兼容 HTML#

Markdown 語法的目標是：成為一種適用於網絡的書寫語言。

Markdown 不是想要取代 HTML，甚至也沒有要和它相近，它的語法種類很少，只對應 HTML 標記的一小部分。Markdown 的構想不是要使得 HTML 文檔更容易書寫。在我看來， HTML 已經很容易寫了。Markdown 的理念是，能讓文檔更容易讀、寫和隨意改。HTML 是一種發布的格式，Markdown 是一種書寫的格式。就這樣，Markdown 的格式語法只涵蓋純文本可以涵蓋的範圍。

不在 Markdown 涵蓋範圍之內的標籤，都可以直接在文檔裡面用 HTML 撰寫。不需要額外標註這是 HTML 或是 Markdown；只要直接加標籤就可以了。

要制約的只有一些 HTML 區塊元素――比如 <div>、<table>、<pre>、<p> 等標籤，必須在前後加上空行與其它內容區隔開，還要求它們的開始標籤與結尾標籤不能用制表符或空格來縮進。Markdown 的生成器有足夠智能，不會在 HTML 區塊標籤外加上不必要的 <p> 標籤。

例子如下，在 Markdown 文件裡加上一段 HTML 表格：

這是一個普通段落。

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

這是另一個普通段落。

請注意，在 HTML 區塊標籤間的 Markdown 格式語法將不會被處理。比如，你在 HTML 區塊內使用 Markdown 樣式的強調會沒有效果。

HTML 的區段（行內）標籤如 <span>、<cite>、<del> 可以在 Markdown 的段落、列表或是標題裡隨意使用。依照個人習慣，甚至可以不用 Markdown 格式，而直接採用 HTML 標籤來格式化。舉例說明：如果比較喜歡 HTML 的 <a> 或 <img> 標籤，可以直接使用這些標籤，而不用 Markdown 提供的連結或是圖像標籤語法。

和處在 HTML 區塊標籤間不同，Markdown 語法在 HTML 區段標籤間是有效的。

Markdown 基本語法#

代碼區域#

如果你只想高亮語句中的某個函數名或關鍵字，可以使用 `function_name()` 實現

通常編輯器根據代碼片段適配合適的高亮方法，但你也可以用 ``` 包裹一段代碼，並指定一種語言

支持的語言：actionscript, apache, bash, clojure, cmake, coffeescript, cpp, cs, css, d, delphi, django, erlang, go, haskell, html, http, ini, java, javascript, json, lisp, lua, matlab, nginx, objectivec, perl, php, python, r, ruby, scala, smalltalk, sql, tex, vbscript, xml

{% raw %}
&#96`` javascript
$(document).ready(function () {
    alert('hello world');
});
&#96``
{% endraw %}

謝謝 hexo 漩渦的幫助!
詳見 hexo tag plugins

也可以使用 4 空格縮進，再貼上代碼，實現相同的的效果

標題#

Markdown 提供了兩種方式（Setext 和 Atx）來顯示標題。
例:

Setext方式
標題1
=================
標題2
-----------------

Atx方式
# 標題1
## 標題2
###### 標題6

換行#

在文字的末尾使用兩個或兩個以上的空格來表示換行。

引用#

行首使用[大於號+空格]表示引用段落，內部可以嵌套多個引用。

語法：

> 這是一個引用，
> 這裡木有換行，
> 在這裡換行了。
> > 內部嵌套

效果：

這是一個引用，
這裡木有換行，
在這裡換行了。

內部嵌套

列表#

無序列表使用 *、 + 或 - 後面加上空格來表示。

語法：

* Item 1
* Item 2
* Item 3

+ Item 1
+ Item 2
+ Item 3

- Item 1
- Item 2
- Item 3

效果：

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3

Item 1
Item 2
Item 3
有序列表使用數字加英文句號加空格表示。
語法：

1. 列表前使用 [數字+空格]
2. 我們會自動幫你添加數字
7. 不用擔心數字不對，顯示的時候我們會自動把這行的 7 纠正為 3

效果：

列表前使用 [數字 + 空格]
我們會自動幫你添加數字
不用擔心數字不對，顯示的時候我們會自動把這行的 7 纠正為 3

強調#

Markdown 使用 * 或 _ 表示強調。

語法：

單星號 = *斜體*
單下劃線 = _斜體_
雙星號 = **加粗**
雙下劃線 = __加粗__
刪除線 = ~~加粗~~

效果：
單星號 = 斜體
單下劃線 = 斜體
雙星號 = 加粗
雙下劃線 = 加粗
刪除線 = 加粗

表格#

語法：

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

或

dog | bird | cat
----|------|----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

效果：

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

或

dog	bird	cat
foo	foo	foo
bar	bar	bar
baz	baz	baz

連結#

Markdown 支持兩種風格的連結：Inline 和 Reference 。

Inline ：以中括號標記顯示的連結文本，後面緊跟用小括號包圍的連結。如果連結有 title 屬性，則在連結中使用空格加 "title 屬性"。
Reference ：一般應用於多個不同位置使用相同連結。通常分為兩個部分，調用部分為 [連結文本][ref]；定義部分可以出現在文本中的其他位置，格式為 [ref]: http://some/link/address (可選的標題)。
注：ref 中不區分大小寫。
語法：

這是一個Inline[示例](http://sphenginx.github.io "可選的title")。
這是一個Reference[示例][ref]。
[ref]:http://sphenginx.github.io (可選的title)

效果：
這是一個 Inline示例。
這是一個 Reference [示例][ref]。
[ref]:http://sphenginx.github.io (可選的 title)

圖片#

圖片的使用方法基本上和連結類似，只是在中括號前加驚嘆號。

語法:

![圖片名稱](http://圖片網址)
![GitHub頭像](https://avatars1.githubusercontent.com/u/1829395?v=3&s=460)

效果:

GitHub 頭像

注：Markdown 不能設置圖片大小，如果必須設置則應使用 HTML 標記 <img>。

<img src="https://avatars1.githubusercontent.com/u/1829395?v=3&s=460" width="400" height="100">

效果如下：

分隔線#

在一行中使用三個或三個以上的 *、- 或_可以添加分隔線，其中可以有空白，但是不能有其他字符。

語法：

***

效果：

轉義字符#

Markdown 中的轉義字符為 \，可以轉義的有：

\\ 反斜杠
\` 反引號
\* 星號
\_ 下劃線
\{\} 大括號
\[\] 中括號
\(\) 小括號
\# 井號
\+ 加號
\- 減號
\. 英文句號
\! 感嘆號

顏色與字體#

markdown 不支持顏色和字體，所以如果想添加顏色或字體，只能使用 html 標籤來實現這些需求了。

語法:

<font color="red">我是紅色的</font>

效果:
我是紅色的

高級技巧#

製作一份待辦事宜 Todo 列表#

語法：

- [ ] 支持以 PDF 格式導出文稿
- [ ] 改進 Cmd 渲染算法，使用局部渲染技術提高渲染效率
- [x] 新增 Todo 列表功能
- [x] 修復 LaTex 公式渲染問題
- [x] 新增 LaTex 公式編號功能

效果：

支持以 PDF 格式導出文稿
改進 Cmd 渲染算法，使用局部渲染技術提高渲染效率
新增 Todo 列表功能
修復 LaTex 公式渲染問題
新增 LaTex 公式編號功能

高效繪製流程圖 | 序列圖#

不知道為啥 Git pages 不支持這種寫法，可以 copy 在最新的 Markdown 語法解析器裡面試試，或者點擊 Markdown 在線編輯器嘗試

st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

行內 HTML 元素#

目前只支持部分段內 HTML 元素效果，包括 <kdb> <b> <i> <em> <sup> <sub> <br> ，如

鍵位顯示

使用 <kbd>Ctrl<kbd>+<kbd>Alt<kbd>+<kbd>Del<kbd> 重啟電腦

效果:
使用 Ctrl+Alt+Del 重啟電腦

代碼塊

使用 <pre></pre> 元素同樣可以形成代碼塊

粗斜體

<b> Markdown 在此處同樣適用，如 *加粗* </b>

擴展#

支持 jsfiddle、gist、runjs、優酷視頻，直接填寫 url，在其之後會自動添加預覽點擊會展開相關內容。

http://{url_of_the_fiddle}/embedded/[{tabs}/[{style}]]/
https://gist.github.com/{gist_id}
http://runjs.cn/detail/{id}
http://v.youku.com/v_show/id_{video_id}.html

公式#

當你需要在編輯器中插入數學公式時，可以使用兩個美元符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。提交後，問答和文章頁會根據需要加載 Mathjax 對數學公式進行渲染。如：

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

$$
x \href{why-equal.html}{=} y^2 + 1
$$

效果如下：
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$

x \href{why-equal.html}{=} y^2 + 1

Markdown 編輯器#

歡迎使用 Cmd Markdown 編輯閱讀器

Win 平台

MarkdownPad
Haroopad - The next document processor
進入首頁之後，點擊用戶進入下載界面

Linux 平台

ReText

Mac 平台

結語#

以上幾種格式是比較常用的格式，所以我們針對這些語法做了比較詳細的說明。除這些之外，Markdown 還有其他語法，如想了解和學習更多，可以參考這篇『Markdown 語法說明』。😄 (It seems the hexo does not support emoji)……

附#

強烈建議您現在就立馬用 Markdown 寫一篇文章吧，體會一下 Markdown 的優雅之處！