在OSX中隨時隨地將Markdown轉為HTML - MAC

Table of Contents

不曉得板上有沒有人在用 markdown 寫純文字文件的?
這邊分享一個將 markdown 格式轉成 html 的簡單方法
可以在任何文字編輯區中寫好 markdown,
然後全選、進右鍵選單按下轉換就可以了。

圖文好讀版: http://goo.gl/DTNdV

對 Automator 熟悉的朋友看底下的文字應該也是 OK 的 ^^

* * *

很多人喜歡用 Markdown 寫純文字的文件,包括我。簡單又有規範,
而且幾乎所有文書軟體/編輯器都可以開啟(應該沒有不支援純文字
的編輯器吧?),也可以轉成 HTML 在網路上發表。

在 Markdown 作者 John Gruber 的網站上有提供了一個 perl 寫的
Markdown 轉換指令稿,可以將 Markdown 轉換成 HTML。不過每次要
轉檔都要進終端機下指令也是麻煩,今天剛好看到一篇文章,可以在
OS X 中加入一項服務,透過該服務,任何只要提供文字編輯的應用
程式,都可以經由右鍵選單輕鬆將 Markdown 轉換成 HTML。

原始文章:
[Installing Markdown as an OS X Services Menu Item Using Automator]
(http://goo.gl/aPzsH)

懶得看原文的也可以看下面步驟。原文中的作法是將轉好的 HTML 直
接取代掉原始 Markdown,因為我的需求不同,所以以下的步驟還會
加上將轉好的 HTML 放到剪貼簿中。

先下載 John Gruber 所寫轉換指令稿:[Markdown.pl]
(http://daringfireball.net/projects/downloads/Markdown_1.0.1.zip)
下載後找個地方存放,我是放在 "/usr/local/bin/" 下面。

然後開啟 Automator,選擇新增一項「服務」

![automator service](/path/to/img.jpg)

接著會在視窗中看到如下內容。勾選「輸出會取代所選文字」,如果你只複製到剪貼簿而不需替換掉原本文字,可以不用勾選。

![replace selected text](/path/to/img.jpg)

在左側程式庫列表中找到「執行 Shell 工序指令」,拉到右側。然後在文字區域中輸入 "/usr/local/bin/Markdown.pl" (請依照下載時所存放位置作適當修改)

![run shell script](/path/to/img.jpg)

![type the path](/path/to/img.jpg)

如果只是要產生 HTML 碼,到上個步驟就可以了。若還要把轉換後的 HTML 存到剪貼簿中,一樣在左側程式庫列表中找到「拷貝到剪貼板」,然後拉到右側剛剛的指令下方。

![copy to clipboard](/path/to/img.jpg)

存檔,大功告成!

![save and finish](/path/to/img.jpg)

接下來實驗看看。打開「文字編輯」或是任何可以編寫純文字的程式,隨便打一段 Markdown 指令。輸入完後全選,叫出右鍵選單,可以看到我們剛才辛苦的結晶:

![markdown to html](/path/to/img.jpg)

用力給他按下去--噹啦~全部變成 HTML 了,很方便不是?

![markdown to html converted](/path/to/img.jpg)

--

[格物雜筆]
閱讀 | 電影 | 音樂 | 動畫 | 漫畫 | 遊戲 | 廣告
http://reader.aqualuna.me

--

All Comments

Caitlin avatarCaitlin2012-02-10
比起這個我推薦Mou http://mouapp.com 可以WYSIWYG
John avatarJohn2012-02-14
其實我已經買了 iA Writer 在用... XD
Edwina avatarEdwina2012-02-15
我也有買iA Writer耶,如果要更新blog文章 用哪個好阿
Heather avatarHeather2012-02-19
我目前是用iaWriter寫,然後用本文所提到的方式轉成html
再貼到blogger上去
Isla avatarIsla2012-02-22
wordpress聽說有markdown的外掛,我沒用wp不太清楚
Erin avatarErin2012-02-23
iAwriter真的不錯用, 如果要加入圖片,好像還稍嫌不足
Zanna avatarZanna2012-02-26
Mou 的 icon 很像 M 字開腳.. XD