本文將介紹一個快速發文在部落格的技巧,並有 工具、FAQ、範例

什麼是 Markdown

是一種輕量級標記語言,可以讓人用易讀易寫的純文字格式編寫,然後轉換成有效的 HTML

Markdown 有一般格式、Github 格式、Multimarkdown 格式等

更詳細的介紹可參考 Wiki 和中文網站

為什麼要用 Markdown

  • 簡單: 語法好記
  • 快速: 轉換成 HTML 時比 部落格編輯器轉換成 HTML 較快速
  • 乾淨: 不會像 HTML 有尾端漏 tag 或錯誤的結構,字會較少
  • 可攜帶: 因為是純文字,因此可跨平台、跨系統
  • 靈活: 轉換為 HTML 時才來決定樣式
  • 配合工作流程: 可加速寫作

簡單來說,寫文章或 修改文章時就能專注在內容,比較不會被樣式干擾,因此可以快速發文

使用 Markdown 發文步驟

  1. 先打好 Markdown 純文字格式的文章內容,存在自己電腦上或雲端
  2. 使用工具轉換成 HTML
  3. 全選轉換後的內容,貼到部落格的編輯器

注:

  • 有些部落格有支援 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://img.youtube.com/vi/jNQXAC9IVRw/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`: ![一個圖片](https://raw.githubusercontent.com/dcurtis/markdown-mark/master/png/66x40-solid.png "這是 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

更多的副標題

此行編輯時 雖然最後面有換行 但檢視時 還是和此行黏起來

如果要分開,在此行最後面加上兩個空格
就像這樣

購買步驟和清單

  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, ...

(底下加反斜線防止誤認,使用上請將 \'\'\' 去掉反斜線)

#include <iostream>

int main() {
    int a = 1;
    std::cout << "Hello World!";
}
var s = "JavaScript syntax highlighting";
alert(s);

特殊符號 #_*\


上面是分格符號


上面也是


上面還是

請刪除此行

(底下加反斜線防止誤認,使用上請將 [ 和 ] 去掉反斜線)


Shawn http://ebola777.pixnet.net/
文章標籤
創作者介紹

Shawn's Blog

Shawn 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • Darwin的AI天地
  • 請問一下
    如何使用才能不會和主題衝突呢?
    我用了一堆markdown編輯器都和主題衝突
    主題已經搶走h1,h2了
    我可以獨立出一塊CSS 專門讓我的內容使用嗎?