使用 Markdown here 配合 Blogger 有效率編寫圖文並茂的網誌

Markdown 是一種輕量化的標記語言，語言本身具有簡潔易讀的特性，並且可以很容易的轉換為排版好的 HTML 文件。在這篇文章中，我介紹了如何使用 Markdown 寫 Blogger，並提供了一個簡單的方法製作圖文並行，且含有圖說的文章。

首先，如果你不清楚什麼是 Markdown，看看一個簡單的 Markdown 語言範例如下：

# 標題 1
## 標題 2
### 標題 3

可以用 # 記號建立不同層級的標題。

也可以用星號來 *強調* 或是 **更加強調** 特定的文字。

* 很輕易地就能產生條列式的清單
*項目 1
    * 使用空格縮排就能產生子項目

1. 有數字的清單也不成問題
3. 其實數字不一定要按順序排列

Markdown 語言本身就有可讀性，甚至有時我會忘記把原始的 Markdown 檔案轉換為 HTML。在經過軟體的轉換成為 HTML 後，在網頁上則會呈現以下的格式。

標題 1

標題 2

標題 3

可以用 # 記號建立不同層級的標題。

也可以用星號 強調 或是 更加強調 特定的文字。

• 很輕易地就能產生條列式的清單
• 項目 2
  • 使用空格縮排就能產生子項目

1. 有數字的清單也不成問題
2. 其實數字不一定要按順序排列

超連結

加入超連結當然也沒有問題，而且有兩種方式，第一種方法，網址是以行內方式插入：

行內風格：在 Markdown Here 的 github 上可以找到 [Markdown 語法的備忘單](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)。

另一種方法，所有的網址獨立列出（可集中在文件最後，但不一要如此），成為有點像參考文獻的樣式，可更增加原始文件的可讀性：

參考文獻風格：在 Markdown Here 的 github 上可以找到 [Markdown 語法的備忘單][1]。

[1]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

兩種方法轉換後的外觀一致，如下所示。後者因為把網址和內文分開，保留了較佳的可讀性。

行內風格：在 Markdown Here 的 github 上可以找到 Markdown 語法的備忘單。

參考文獻風格：在 Markdown Here 的 github 上可以找到 Markdown 語法的備忘單。

引言

> 使用 > 記號表示引文，在 BBS 仍相當流行的台灣是習以為常的。

使用 > 記號表示引文，在 BBS 仍相當流行的台灣是習以為常的。

程式碼

可以方便的產生彩色易讀的程式碼也是 Markdown 受到許多寫程式的人歡迎的原因之一。

```javascript
for(i = 0; i<10; i++) {
    /* javascript */
    alert(i);
}
```

會產生如下的程式碼區塊。

for(i = 0; i<10; i++) {
    /* javascript */
    alert(i);
}

插入圖片

然而，用純文字的方法插入圖片則是比較辛苦的。

![圖片的替代文字](/path/to/img.jpg)

目前也沒有方法可以為圖片加上圖說，也不能指定圖片尺寸，應用非常受限。因此，在編寫有許多圖片的文件時，必須先將圖片轉換成正確的大小、上傳至網路，並且取得可外連的圖片網址。也就是說，我們會花上更多時間在處理圖片，而花更少時間撰寫文章。

最適合 Blogger 的 Markdown 轉換器: Markdown Here

Markdown Here 是個 Firefox、Chrome 都有的外掛，可以將 Markdown 語言在 Gmail、Blogger 的編輯器中轉換成 HTML。或許是因為 Markdown Here 一開始就是為了在瀏覽器上存在，測試之後發現 Markdown Here 可以和 Blogger 的「插入圖片」並存。也就是說，我們可以一邊以 Markdown 語言寫純文字的部分，一邊以 Blogger 的「插入圖片」功能，在自己的雲端空間找到想要的圖片，省掉了找圖片網址以及圖片大小調整的麻煩。

使用 Markdown Here 很簡單，在安裝好外掛後，先在編輯器裡以 Markdown 撰寫文章，接著再按下 Ctrl+Alt+M，就能把 Markdown 轉換為排版好的文章。如果要繼續編輯，則記得再按一次 Ctrl+Alt+M，切回編輯模式。

為圖片加上圖說

在 HTML5 裡有 <figcaption> 標籤，可以為圖片增加圖說，但 Markdown 中沒有對應的語法。還好在網路上有人提供了另外一條路，利用 CSS 的 + 選擇器解決這個問題。在 Blogger 應用這個技巧的方法是這樣的：

1. 使用 Blogger 內建功能插入圖片。
2. 緊接著圖片的下一行，加入 *圖說*，記得將圖說套用強調標記，在編輯器中看起來如下。
   
3. 在 Blogger 的 template 中，加入以下 CSS ，以 img+br+em 或 a+br+em 選擇器，設定圖說格式。以下設定其實也可以直接打在 Markdown 中（是的，你可以在 Markdown 中使用 HTML，這些 HTML 語法會如實呈現），但如此一來日後就不能藉由改 template 一次更動所有文章裡的圖說格式。

   <style>
    img+br+em,a+br+em, img+em, a+em {
        font-size: 90%;  /*使用較小的文字*/
        font-color: #AAAAAA; /*使用較淡的文字色彩*/
        font-style: normal; /*以正常字體呈現*/
    } 
   </style>
   

   有一點我不明白的是， Markdown Here 有時會產生 <i>，有時產生 <em>，目前還不確定怎麼控制生成的 HTML 標籤。

在使用上述設定後，可得到如下的效果。當然，還可以用更多 CSS 語法做出更多的排版效果。

往司馬庫斯路上。

​