本文將介紹一個快速發文在部落格的技巧，並有 工具、FAQ、範例
什麼是 Markdown
是一種輕量級標記語言，可以讓人用易讀易寫的純文字格式編寫，然後轉換成有效的 HTML
Markdown 有一般格式、Github 格式、Multimarkdown 格式等
為什麼要用 Markdown
- 簡單: 語法好記
- 快速: 轉換成 HTML 時比 部落格編輯器轉換成 HTML 較快速
- 乾淨: 不會像 HTML 有尾端漏 tag 或錯誤的結構，字會較少
- 可攜帶: 因為是純文字，因此可跨平台、跨系統
- 靈活: 轉換為 HTML 時才來決定樣式
- 配合工作流程: 可加速寫作
簡單來說，寫文章或 修改文章時就能專注在內容，比較不會被樣式干擾，因此可以快速發文
使用 Markdown 發文步驟
- 先打好 Markdown 純文字格式的文章內容，存在自己電腦上或雲端
- 使用工具轉換成 HTML
- 全選轉換後的內容，貼到部落格的編輯器
注:
- 有些部落格有支援 Markdown 轉換 HTML，例如 Wordpress (需插件)，那麼就直接寫在部落格即可
- 檔案副檔名通常為 .txt 或 .md 或 .markdown 或 .mdown，不管是哪一種，用一般的編輯軟體都可以打開
線上轉換工具
一些不錯的線上工具:
瀏覽器附加元件
Chrome
Firefox
軟體
- Sublime Text + 插件 Markdown Preview + 插件 Markdown Editing
本文內容是由 Sublime Text 加上插件用 Github 格式轉換而產生
一般 FAQ
Q.1: 產生出來的 HTML 很醜，如何自訂?
A.1: 如果該工具可以自訂 CSS，則自訂 CSS
A.2: 有些轉換後會將 CSS 直接寫在 HTML 內，如此一來只能用自訂的 CSS 規則來覆蓋，
有些則不會將 CSS 寫在 HTML 內，如此一來是被部落格的主題 CSS 給干擾，則修改部落格主題 CSS
Q.2: 我想讓標題都變粗體
A: 加上以下自訂 CSS (建議每個 h1~h6 最前面加上文章的容器 id 或 class，避免干擾到其他區塊，例如痞客邦加上 .article-content)
h1, h2, h3, h4, h5, h6 { font-weight: bold !important; }
Q.3: 標題的上下間隔太窄或太寬
A: 請自訂 CSS，調 h1~h6 的 margin
Q.4: 字體太小或太大
A: 請自訂 CSS，調 font-size
Q.5: Github 格式無法顯示一些 HTML tags, 像是影片 iframe
A: 純 Github 格式不支援某些 tags，可考慮改用一般格式 (一般格式下直接貼整串 HTML 即可)，或是用一張圖片讓使用者以為可以點影片，而點下圖片的超連結，例如以下 Youtube 影片 (影片的圖片格式為 http://img.youtube.com/vi/影片ID/0.jpg)
[](http://www.youtube.com/watch?v=jNQXAC9IVRw)
如果要讓使用者點下時開啟新分頁，Markdown 本身沒有這種方式，但可以直接用 HTML 來達成
<a href="http://www.youtube.com/watch?v=jNQXAC9IVRw" target="_blank"><img src="http://img.youtube.com/vi/jNQXAC9IVRw/0.jpg"></img></a>
痞客邦 FAQ
Q.1: 用以上方法試著貼文在痞客邦，有時會發現編號和清單的數字和前面的點不見了
A: 如果發生這種問題，可加上以下自訂 CSS 修復
.article-content ol, .article-content ul, .article-content dd { margin-left: 40px; }
.article-content ul { list-style:disc; }
.article-content ol { list-style:decimal; }
Q.2: 水平分隔符號無法顯示，或是高度不對
A: 加上以下自訂 CSS
.article-content hr { border: 1px inset !important; height: inherit !important; }
範例 Markdown
# 文章標題
此文將**強烈地**展示 [Markdown][Markdown-wiki]
此文**利用 _線上_**的 [Dillinger](http://dillinger.io/) 來編輯
詳細的規則可上網找 `Markdown Cheatsheet`
Markdown 的 `logo`: 
## 副標題
### 更小的副標題
Email:
>>> 報告寫得如何? --Mary
>>
>> 下午時我會放到你的桌上 --Joe
>
> 抱歉 Joe, 最晚 11 點我就要拿走了 --Mary
### 更多的副標題
此行編輯時 雖然最後面有換行
但檢視時 還是和此行黏起來
如果要分開，在此行最後面加上兩個空格
就像這樣
### 購買步驟和清單
1. 到超商
2. 走進超商
1. 拿起清單
2. 準備核對
- 水果
* 飲料
+ 更多水果
3. 回家
- 走 A 路
- 也可走 B 路
| 項目 | 備註 | 價格 |
| ------------- |:----------------:| -----:|
| 蘋果 | 此欄位文字置中 | $1 |
| 蘋果汁 | 價格欄位文字靠右 | $3 |
| 金蘋果 | 項目欄位文字靠左 | $100 |
### 編程
Fibonacci number:
F(n) = F(n-1) + F(n-2)
1, 1, 2, 3, 5, 8, ...
(底下加反斜線防止誤認，使用上請將 \'\'\' 去掉反斜線)
\`\`\`cpp
#include <iostream>
int main() {
int a = 1;
std::cout << "Hello World!";
}
\`\`\`
\`\`\`javascript
var s = "JavaScript syntax highlighting";
alert(s);
\`\`\`
特殊符號
\#\_\*\\
---
上面是分格符號
***
上面也是
___
上面還是
~~請刪除此行~~
(底下加反斜線防止誤認，使用上請將 \[ 和 \] 去掉反斜線)
\[Markdown-wiki\]: http://zh.wikipedia.org/wiki/Markdown
範例檢視
文章標題
此文將強烈地展示 Markdown
此文利用 線上的 Dillinger 來編輯
詳細的規則可上網找 Markdown Cheatsheet
Markdown 的 logo: 
副標題
更小的副標題
Email:
報告寫得如何? --Mary
下午時我會放到你的桌上 --Joe
抱歉 Joe, 最晚 11 點我就要拿走了 --Mary
更多的副標題
此行編輯時 雖然最後面有換行 但檢視時 還是和此行黏起來
如果要分開，在此行最後面加上兩個空格
就像這樣
購買步驟和清單
- 到超商
- 走進超商
- 拿起清單
- 準備核對
- 水果
- 飲料
- 更多水果
- 回家
- 走 A 路
- 也可走 B 路
| 項目 | 備註 | 價格 |
|---|---|---|
| 蘋果 | 此欄位文字置中 | $1 |
| 蘋果汁 | 價格欄位文字靠右 | $3 |
| 金蘋果 | 項目欄位文字靠左 | $100 |
編程
Fibonacci number:
F(n) = F(n-1) + F(n-2)
1, 1, 2, 3, 5, 8, ...
(底下加反斜線防止誤認，使用上請將 \'\'\' 去掉反斜線)
#include <iostream>
int main() {
int a = 1;
std::cout << "Hello World!";
}
var s = "JavaScript syntax highlighting";
alert(s);
特殊符號 #_*\
上面是分格符號
上面也是
上面還是
請刪除此行
(底下加反斜線防止誤認，使用上請將 [ 和 ] 去掉反斜線)
Shawn http://ebola777.pixnet.net/
留言列表
Programming (2)