Markdown新手入門

如果你還沒學過Markdown，那你就out了，如果你還沒學過那就跟著Dior同學一起學習下吧，至少入個門呀，這樣也跟可以跟別人吹吹牛啥的。隨著最近頻繁使用Markdown，發現真的很好用, 語法很簡單，很實用，我覺得這可能是Markdown最大的優點。我們平時寫文章用富文字編輯器會發現不同的富文字編輯器很不統一，每次想要加個什麼樣式要找半天，這樣其實效率非常低。而Markdown正好解決了這個問題，統一了一些最常用樣式的語法，這樣我們就可以專注於寫作上，而不用花很多時間去修改樣式。現在大多數的部落格網站都支援Markdown語法編輯，我們只要在本地用Markdown語法寫好一篇文章就可以直接複製到其他部落格網站上，很方便並且不存在相容性的問題。

說了那麼多的關於Markdown的東西，沒聽過這個概念的同學可能比較懵逼，Markdown是什麼鬼？

引用wiki對Markdown的解釋：

Markdown is a lightweight markup language with plain text formatting syntax

其實翻譯過來很簡單，就是一種用於文字格式化的標記語言。

---

Markdown的優點

• 專注於寫作的內容，而不是排版的樣式
• 可讀性高，學習成本低
• 純文字內容，相容性好
• 可以很方便的匯出成HTML文字和PDF檔案
• 可以使用Git進行版本控制

好用的Markdown軟體

本人用的是Mac電腦，所以推薦的Markdown軟體都是Mac版本的

• Mou這是推薦使用最多的Markdown軟體，但是悲催的是最新的Sierra版本有Bug，據說好像Mou團隊已經不維護這個專案了。

  

• Typora是我自己用的軟體，這個軟體最大的特點是簡單並且功能很強大，而且開源和跨平臺。我自己用下來發現最大的優點就是寫的時候自動轉換格式，不用兩列的預覽方式。而且看起來很乾淨。

• MacDown是一款開源的Mac平臺下的Markdown編輯器

  

• iA Writer

• Typed

• Byword

• 還有什麼好的Markdown歡迎推薦喲！

Markdown的語法

• 相容HTML

  這個語法特點與 Markdown 語言的初衷有關，Markdown就是希望成為適應於網路的書寫語言。

  在寫一些常見的區塊元素(例如: <div> 、<table>、<p>)的時候要注意必須在前後加上空格將其區分開來，並且要求他它們開始和結束的標籤不能用空格或者製表符來縮排。

  下面是一段html語法的表格

  <table>
  	<tr>
  		<td>Foo</td>
  	</tr>
  </table>
  複製程式碼

  請注意在上面HTML區塊中的Markdown語法不會被轉換的。比如你在HTML區塊中使用Markdown樣式的**強調**是沒有加粗效果的。

  如果不希望某個Markdown語法的關鍵詞自動轉化樣式，可以在字元前面加\轉義

區塊元素

1.標題

在行首插入1-6個#，分別對應HTML標籤h1-h6

## 這是h2

### 這是h3

###### 這是h6

2.區塊引用

• 在每行前面加上>

  > This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
  > This is a block title
  複製程式碼

• 區塊引用可以巢狀

  > > > This is a nested blockquote
  複製程式碼

• 區塊引用支援其他Markdown語法

  > ## This is a h2 title
  > **strong**
  複製程式碼

3.列表

Markdown支援有序列表和無序列表

• 有序列表

  規則是數字+英文句號+空格

  1. Apple
  2. Pear
  3. Banana
  複製程式碼

  如果你寫成了

  1. Apple
  1. Pear
  1. Banana
  複製程式碼

  或者甚至是

  6. Apple
  3. Pear
  2. Banana
  複製程式碼

  其實上面的結果都是一樣的，都是轉化為第一個，建議還是從第一個按順序寫，說不定什麼時候Markdown就支援了有序列表的start屬性。

  當然有時候會不小心產生有序列表

  2018. This is a grate year

  解決方法在前面中提到過，就是在英文逗號前加個轉義字元\，這樣就避免了自動轉義的問題。

  2018\. This is a greate year

• 無序列表

  使用星號(*)、加號(+)、減號(-)作為列表標記

  * Red
  * Black
  * Blue
  等同於:
  + Red
  + Block
  + Blue
  也等同於:
  - Red
  - Black
  - Blue
  複製程式碼

4.程式碼塊

這對於程式設計師來說無疑是福音，支援語法高亮，超級好用

• 塊程式碼

  ```表示程式碼塊，其語法example如下：

  ​```c++
  #include <iostream>
  #include <cstdio>
  using namespace std;
  int main(){
    int a, b;
    cin>>a>>b;
    cout<<a+b<<endl;
  }
  ​```
  複製程式碼

  ​

• 行內程式碼塊

  `表示行內程式碼塊

  `This is inline codequote example`
  複製程式碼

5.分割線

在一行使用三次以上星號(*)、減號(-)來建立一個分隔符，行內不能有其他的東西，也可以在它們中間插入空格

***

* * *

---

- - -
複製程式碼

6.表格

Markdown中表格是個比較頭疼的東西，語法比較複雜，但是有些軟體可以支援一鍵插入，下面用個例子簡單講下Markdown中的table語法。

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | center        | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
| default left  |  python       | right |
複製程式碼

Tables	Are	Cool
col 3 is	center	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1
default left	python	right

預設是居左對齊，語法為| --- |，居中的語法為|: --- :|，居右的語法為| ---:|，我的事例程式碼很整齊，其實在Markdown語法規則中並不需要對齊這麼整齊(原諒我的潔癖:smile:)。

區段元素

1.連線

Markdown支援兩種形式的連結語法

• 行內式

  行內式的Markdown語法[連結文字](連結)，如果還需要加上鍊接的標題的話直接在連結後面用引號或者括號包裹標題

  Examples:

  [Dior](http://www.todaycoder.cn)

  This is [an example](http://www.todaycoder.cn) link.

  This is [an example](http://www.todaycoder.cn "dior") has title attribute.

• 參考式

  參考式的Markdown語法[連結文字][連結標記]，後面再加上[連結標記]: 連結，其實這兩部是不分先後順序的，建議把這些連結統一寫在文章的底部，這樣也便於統一管理和修改。

  Examples

  [Example][id]
  [id]: http://www.todaycoder.cn "example"
  [id]: http://www.todaycoder.cn 'example'
  [id]: http://www.todaycoder.cn (example)
  複製程式碼

  [Google][]
  [Google]: http://www.google.com
  或者
  [Google][0]
  [0]: http://www.google.com
  複製程式碼

  下面三種例子以供大家參考：

  參考式連結

  I get 10 times more traffic from [Google] [1] than from [Yahoo] [2] or [MSN] [3].
  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"
  複製程式碼

  連結名稱

  I get 10 times more traffic from [Google][] than from [Yahoo][] or [MSN][].
  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"
  複製程式碼

  行內式

  I get 10 times more traffic from [Google](http://google.com/ "Google")
  than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
  [MSN](http://search.msn.com/ "MSN Search").
  複製程式碼

  大家可以根據具體需求自己選擇，如果連結很多的話建議使用上面兩種方法

2.圖片

Markdown用一種和連結很類似的方法來標記圖片，同樣也允許兩種樣式：行內式和參考式

目前Markdown還不支援設定寬高，如果要設定寬高的話可以使用img標籤

Markdown插入圖片的語法： ![Alt text][id]，這與插入連結的語法很相似，就不多說了，直接來幾個例子大家就明白了。

![圖片已損壞](/path/img/img.jpg  'title')

![iamge hsa broken](/path/img/img.png  "title")

![image][id]
[id]: /paht/img/img.png (title)

![image][]
[image]: /path/img/img.png
複製程式碼

講了這麼多你學會了麼？要是有什麼問題或者不同的見解歡迎交流喲！郵箱