Markdown 是輕量級標記語言,非常適合用在文件、紀錄等應用,能讓你專注在內容,而非排版之上。 當然,你需要了解基礎的 XHTML(HTML) 語法。

簡介

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

由此可知,Markdown 就是「易讀」與「易寫」,因此在語法上十分簡潔易懂。

Markdown’s syntax is intended for one purpose: to be used as a format for writing for the web. Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is not to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text. For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

Markdown 不是要來取代 HTML,所以也不會涵蓋所有標籤,不在範圍內的標籤,都可以直接在文件裡面用 HTML 撰寫。不需要額外標註這是 HTML 或是 Markdown;只要直接加標籤就可以了。

語法

段落、標題、區塊引言

Markdown:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
H1 的標題
====================

H2 的標題
---------------------

撰寫程式時請保持簡單,
簡單就易懂,
易懂就好維護。

大家一起提升程式碼品質,
加油好嗎?

### H3 的標題

> 引言區塊
> 
> 引言第二段
>
> ## 這是引言中的 H2 標題

輸出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<h1>H1 的標題</h1>

<h2>H2 的標題</h2>

<p>撰寫程式時請保持簡單,
簡單就易懂,
易懂就好維護。</p>

<p>大家一起提升程式碼品質,
加油好嗎?</p>

<h3>H3 的標題</h3>

<blockquote>
<p>引言區塊</p>
<p>引言第二段</p>
<h2>這是引言中的 H2 標題</h2>
</blockquote>

修辭和強調

Markdown:

1
2
3
4
5
這樣寫的話,*不正*。
這樣寫的話,_也不正_。

用兩個星號來**加粗**。
或用兩個底線來__加粗__。

輸出:

1
2
3
4
5
<p>這樣寫的話,<em>不正</em>。
這樣寫的話,<em>也不正</em>。</p>

<p>用兩個星號來<strong>加粗</strong>。
或用兩個底線來<strong>加粗</strong>。</p>

清單

無序清單

這裡借用一下天恆君的口頭禪: Markdown:

1
2
3
4
5
6
7
8
9
10
11
*   消滅
*   消滅
*   再消滅

+   消滅
+   消滅
+   再消滅

-   消滅
-   消滅
-   再消滅

三種都會輸出:

1
2
3
4
5
<ul>
<li>消滅</li>
<li>消滅</li>
<li>再消滅</li>
</ul>

有序清單

這裡借用一個實例,請問下列哪一位不是金光人物: Markdown:

1
2
3
1.  千雪孤鳴
2.  問劍孤鳴
3.  競日孤鳴

輸出:

1
2
3
4
5
<ol>
<li>千雪孤鳴</li>
<li>問劍孤鳴</li>
<li>競日孤鳴</li>
</ol>

連結

連結有兩種形式,行內參考

Markdown: 行內:

1
其實我比較常用的搜尋引擎是 [Google](http://google.com/)。
參考:
1
2
3
其實我比較常用的搜尋引擎是 [Google][1]。

[1]: http://google.com/

兩種都會輸出:

1
<p>其實我比較常用的搜尋引擎是 <a href="http://google.com/">Google</a>。</p>

圖片

圖片的語法與連結相似。

Markdown: 行內:

1
![alt text](/path/to/img.jpg "選擇性的標題")
參考:
1
2
3
![alt text][id]

[id]: /path/to/img.jpg "選擇性的標題"

兩種都會輸出:

1
<img src="/path/to/img.jpg" alt="alt text" title="選擇性的標題" />

程式碼

如果是行內可以用 ` 包覆

1
使用`<article>`、`<nav>`、`<section>`標籤前還是先了解一下語意吧。

輸出:

1
<p>使用<code>&lt;article&gt;</code>、<code>&lt;nav&gt;</code>、<code>&lt;section&gt;</code>標籤前還是先了解一下語意吧。</p>

區塊可以用 4 個空格或 1 個 tab 縮排:

1
2
3
4
5
我們就借用一下霹靂近年來的怪劇名:

    <blockquote>
        <p>轟定干戈</p>
    </blockquote>

輸出:

1
2
3
4
5
<p>我們就借用一下霹靂近年來的怪劇名:</p>

<pre><code>&lt;blockquote&gt;
    &lt;p&gt;轟定干戈&lt;/p&gt;
&lt;/blockquote&gt;</code></pre>

參考文件

線上工具

http://dillinger.io/

後記

目前在工作上,只要是顯示文件內容,同時又有多語系的部份,我皆已移植為 markdown 格式,大幅降低修改細項所要付出的維護成本,畢竟,資料源綁在 view 上面也不是辦法!

下一篇,再來談關於 markdown 擴充及現在可見在各語言的實作!