快速產生HTML網頁格式的速記語法：Markdown

由 · 發表於: · 更新於: | 瀏覽數: 2 / 25497

標籤：

Markdown是一種簡易的標記語言，能讓我們在最短的時間裡製作一份易讀易懂的文字檔案，當有需要輸出到網站時，也能使用許多線上轉換網站或軟體，將Markdown格式的內容轉換成HTML格式，瞬間由文字格式變身美觀的網頁格式。

Markdown最初是由約翰·格魯伯（John Gruber）和亞倫·斯沃茨（Aaron Swartz）發明並推廣的，主要的使用族群開始時是集中在科技相關人士之間，例如有不少軟體的讀我檔案便是由文字格式.txt（readme.txt）變更成Markdown格式（readme.md）。Markdown的好處之一是只要經過簡單的學習，就能在閱讀Markdown內容時快速地依其語法而能在最短時間裡了解文章重點，利用它的標記符號也能達到提網挈領之功效。

約翰·格魯伯在2004年創造出Markdown語法有他的時空背景，當時正值Web 2.0方興未艾之際，也是部落格即將席捲世人目光之時，但各個網站上的即視即所得編輯器還很少見，因此一般使用者要發表任何文章時都會先使用Word或FrontPage之類的軟體先編輯好內容，再以HTML格式發表在網站上；雖說Word或FrontPage只要熟悉了也能很快製作出符合需求的內容，但缺點是在寫作過程中經常會讓軟體的排版操作喧賓奪主，變成排版時間有時多過寫作時間，而純文字的Markdown則能讓我們專注在寫作的本務上，讓排版格式的干擾降到最低，因此也就能更有效率地產出文章。

在目前智慧型手機與平板電腦大行其道之際，利用Markdown來輸入更是事半功倍，只要在輸入的同時搭配Markdown的標記符號，輸入完成後稍經訂正就能產生美觀的網頁內容，不僅能快速輸入，連網頁格式也能瞬間轉換，真可謂一舉數得。

Markdown常用語法

以下讓我來介紹幾個使用頻率較高的幾個標記語法，只要熟悉這幾個標記，一般的部落格文章就能很迅速的完成了。

分段標題

以一到六個井字表示標題一至標題六（<h1>到<h6>），亦即井號越少顯示的字體越大。

#標題一
##標題二
###標題三
####標題四
#####標題五
######標題六

Markdown-01

Heading

項目清單List

列舉式的項目清單是很常用的表達語法，在HTML網頁的定義裡主要有兩種：有順序編號的（<ol>+<li>）和沒有順序編號的（<ul>+<li>），Markdown的表示方法很簡單：

  • 有順序編號的清單：每列開頭是「數字.一個空白」就是有序清單，數字可以是任意一個數值，不連續也沒關係，Markdown處理程式會自動循序編號。先以兩個空白開頭就會形成下一層的項目清單。
1. 第一大點
  1. 第一大點第一小點
  1. 第一大點第二小點
  1. 第一大點第三小點
1. 第二要點
  1. 第一大點第一小點
  1. 第一大點第二小點

Markdown-02

  • 沒有順序編號的清單：就是以項目符號開頭的清單，以「*一個空白」或「減號一個空白」來表示
* 第一個重點
  * 第一個重點第一小重點
  * 第一個重點第二小重點
  * 第一個重點第三小重點 
* 第二個重點
  * 第二個重點第一小重點
  * 第二個重點第二小重點

Markdown-03

文字變化

一段文字裡需要特別注意或要有不同變化時，能用下列語法快速變裝。想要讓部份文字用不同顏色呈現嗎？抱歉，Markdown並未提供這樣的語法。

  • 粗體：用來強調重點，將要強調的部份前往後用「兩個星號」括住即可（也可以用兩個底線）。
接下來的文字需要**特別強調**，非常重要。

Markdown-04

  • 斜體則用一個星號夾住要變化的文字。

  • 粗斜體則是用三個星號夾住要變化的文字。

超連結

網頁一定有很多的超連結要使用，Markdown的超連結表示方法主要有兩種：

  • 快速超連結：只要把超連結用「<」、「>」括住即可，被括住的網址會形成可點擊的超連結
請按右列超連結檢視：<http://markdown.tw>

Markdown-05

  • 完整超連結：上面快速超連結直接用網址來顯示，我們可以用「顯示文字」的語法在網頁顯示指定的文字與其使用的超連結。Markdown插入超連結的語法很簡單，但無法指示開啟在新視窗或新分頁。
請按右列超連結檢視：[中文版的Markdown語法說明](http://markdown.tw)

　　Markdown-06

插入圖片

Markdown的圖片也很容易寫，比照超連結的寫法再於開頭加上半形驚嘆號就可以了，語法是「![顯示文字](圖片網址)」。

最近在看的新書：![Google教我的101個工作最佳化](http://addons.books.com.tw/G/001/6/0010583256.jpg)

Markdiwn-07

如果一篇文章裡有同一個圖片會被多次使用的話，也可以使用圖片的參照語法，亦即在要顯示圖片的地方插入「![顯示文字][代碼]」，在文章末尾指定代碼要使用的圖片連結，格式是「[代碼]:圖片網址 "圖片標題"」。另外補充：超連結也可以使用參照的方法來讓文章裡出現多個相同的超連結網址，語法格式相同。

最近在看的新書：![Google教我的101個工作最佳化][google101]

最近在看的新書：![Google教我的101個工作最佳化][google101]

最近在看的新書：![Google教我的101個工作最佳化][google101]

[google101]: https://lh5.googleusercontent.com/-H3RMIpSoOV8/UZrmNK2W-UI/AAAAAAABxjM/rZy1FQRyq9Y/s128/Google101V2.jpg "Google教我的101個工作最佳化"

Markdown-08

以上就是幾個最常用的Markdown標記語法了，如果用得純熟則大約七八成的文件都能利用它來迅速完成；如果你覺得還不夠的話，可以再看看一些Markdown的延伸語法是否是你需要的：

Markdown工具

Markdown在許多應用領域裡都有各類支援，以下介紹幾個常用的工具。

Windows的Markdown編輯軟體

Windows裡比較成熟的Markdown編輯程式是MarkdownPad與WriteMonkey，筆者推薦MarkdownPad的新版：MarkdownPad 2，它有幾個特點：

  • 除了支援標準的Markdown語法外，付費版也支援PHP Markdown Extra與GitHub Flavored Markdown。如果你不需要這些擴充功能，那麼MarkdownPad 2的免費版應足以應付日常所需；付費版與免費版的比較表在此。
  • 付費版費用：美金14.95元，約新台幣460元
  • 程式改版迅速，功能逐步增強
  • 能匯出PDF與HTML格式，方便發佈到部落格內
  • 下載網址：http://goo.gl/CzBzc

Markdown-09

瀏覽器擴充

不同的瀏覽器也有不少支援Markdown的擴充，本文介紹Google Chrome裡常用的三個Markdown擴充。

1.Markdown Here：
適用於Google Chrome、Firefox與Thunderbird的擴充，使用Markdown語法撰寫Email後，按〔Ctrl〕+〔Alt〕+〔M〕或用右鍵功能表就能把內容轉換成HTML格式。

2.Markdown Preview Plus：
這個擴充讀取Markdown寫成的文件檔，再解析成HTML格式。安裝後必須進入擴充功能的設定畫面，勾選Markdown Preview Plus項目裡的【允許存取檔案網址】，則網址列以.md或.txt等結尾時就會以HTML格式顯示。

3.StackEdit：
Google Chrome的Markdown編輯應用程式，功能類似MarkdownPad，但運行在Google Chrome瀏覽器裡，也提供了與Dropbox、Google Drive同步的功能。

iOS Markdown App

筆者推薦的iOS Markdown編輯程式是Nebulous Notes，最新版的Nebulous Notes 6又針對巨集加強了許多功能，只要善用它的巨集按鈕，將常用的Markdown標記符號，如 #、*、[]等加到巨集按鈕列上，就能很迅速地編輯Markdown檔案。

Markdown-13

Android Markdown App

Android也有不少Markdown編輯程式，這次要介紹的是比較新但功能相對完整的App：Draft。Draft先以HTML格式呈現，按下編輯後才能修改Markdown的內容，系統已內建常用的Markdown標記符號，使用上相當簡單直覺，也能和Dropbox同步。

Markdown-14
Markdown-15

WordPress外掛

WordPress也有許多支援Markdown的外掛，例如WP MarkItUp!能將後台的編輯工具列替換成Markdown標記符號，或像筆者要介紹的Markdown on Save Improved則更為便利，能將我們輸入的Markdown內容儲存到另一個獨立欄位供編輯時使用，而顯示在前台則是轉換過的HTML格式，因此只要我們使用WordPress的編輯網頁輸入Markdown內容，或像筆者一樣使用文字編輯程式撰寫好文章後再貼入編輯網頁後存檔，就能立即轉換格式以美觀的格式呈現出來。這樣的作法理論上會比在顯示時才做HTML轉換的速度要快，因為內容都已經轉換好了，不用在顯示時才即時轉換。

Markdown-16

本文摘自密技偷偷報第68期


　##

您可能也會有興趣的類似文章

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

您可能也會喜歡…

2 個回應

  1. 匿名訪客表示:
    2023/10/0607:07:21

    您好:請問
    “想要讓部份文字用不同顏色呈現嗎？抱歉，Markdown並未提供這樣的語法。”>>>
    這部分有推薦好用的外掛嗎?
    obsidian新手

    回覆

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *