You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
832 lines
32 KiB
832 lines
32 KiB
<!DOCTYPE html> |
|
<html lang="zh-TW"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Markdown 語法說明</title> |
|
<link rel="stylesheet" media="all" href="Han-the-CSS-Reset/han.min.css"> |
|
<link rel="stylesheet" media="all" href="stylesheets/main.css"> |
|
</head> |
|
<body> |
|
<div class="wikistyle"> |
|
|
|
<p><strong>NOTE:</strong> This is Traditional Chinese Edition Document of |
|
Markdown Syntax. If you are seeking for English Edition |
|
Document. Please refer to <a href="http://daringfireball.net/projects/markdown/syntax">Markdown: Syntax</a>.</p> |
|
|
|
<h1>Markdown: Syntax</h1> |
|
|
|
<ul> |
|
<li><a href="#overview">概述</a> |
|
<ul> |
|
<li><a href="#philosophy">哲學</a></li> |
|
<li><a href="#html">行內 HTML</a></li> |
|
<li><a href="#autoescape">特殊字元自動轉換</a></li> |
|
</ul></li> |
|
<li><a href="#block">區塊元素</a> |
|
<ul> |
|
<li><a href="#p">段落和換行</a></li> |
|
<li><a href="#header">標題</a></li> |
|
<li><a href="#blockquote">區塊引言</a></li> |
|
<li><a href="#list">清單</a></li> |
|
<li><a href="#precode">程式碼區塊</a></li> |
|
<li><a href="#hr">分隔線</a></li> |
|
</ul></li> |
|
<li><a href="#span">區段元素</a> |
|
<ul> |
|
<li><a href="#link">連結</a></li> |
|
<li><a href="#em">強調</a></li> |
|
<li><a href="#code">程式碼</a></li> |
|
<li><a href="#img">圖片</a></li> |
|
</ul></li> |
|
<li><a href="#misc">其它</a> |
|
<ul> |
|
<li><a href="#backslash">跳脫字元</a></li> |
|
<li><a href="#autolink">自動連結</a></li> |
|
</ul></li> |
|
<li><a href="#acknowledgement">感謝</a></li> |
|
</ul> |
|
|
|
<p><strong>注意：</strong>這份文件是用 Markdown 寫的，你可以<a href="https://github.com/othree/markdown-syntax-zhtw/blob/master/syntax.md">看看它的原始檔</a> 。</p> |
|
|
|
<hr /> |
|
|
|
<h2 id="overview">概述</h2> |
|
|
|
<h3 id="philosophy">哲學</h3> |
|
|
|
<p>Markdown 的目標是實現「易讀易寫」。</p> |
|
|
|
<p>不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈，並且看起來不像是被許多的標籤或者是格式指令所構成。Markdown 語法受到一些既有 text-to-HTML 格式的影響，包括 <a href="http://docutils.sourceforge.net/mirror/setext.html">Setext</a>、<a href="http://www.aaronsw.com/2002/atx/">atx</a>、<a href="http://textism.com/tools/textile/">Textile</a>、<a href="http://docutils.sourceforge.net/rst.html">reStructuredText</a>、<a href="http://www.triptico.com/software/grutatxt.html">Grutatext</a> 和 <a href="http://ettext.taint.org/doc/">EtText</a>，然而最大靈感來源其實是純文字的電子郵件格式。</p> |
|
|
|
<p>因此 Markdown 的語法全由標點符號所組成，並經過嚴謹慎選，是為了讓它們看起來就像所要表達的意思。像是在文字兩旁加上星號，看起來就像*強調*。Markdown 的清單看起來，嗯，就是清單。假如你有使用過電子郵件，區塊引言看起來就真的像是引用一段文字。</p> |
|
|
|
<h3 id="html">行內 HTML</h3> |
|
|
|
<p>Markdown 的語法有個主要的目的：用來作為一種網路內容的<em>寫作</em>用語言。</p> |
|
|
|
<p>Markdown 不是要來取代 HTML，甚至也沒有要和它相似，它的語法種類不多，只和 HTML 的一部分有關係，重點<em>不是</em>要創造一種更容易寫作 HTML 文件的語法，我認為 HTML 已經很容易寫了，Markdown 的重點在於，它能讓文件更容易閱讀、編寫。HTML 是一種<em>發佈</em>的格式，Markdown 是一種<em>編寫</em>的格式，因此，Markdown 的格式語法只涵蓋純文字可以涵蓋的範圍。</p> |
|
|
|
<p>不在 Markdown 涵蓋範圍之外的標籤，都可以直接在文件裡面用 HTML 撰寫。不需要額外標註這是 HTML 或是 Markdown；只要直接加標籤就可以了。</p> |
|
|
|
<p>只有區塊元素──比如 <code><div></code>、<code><table></code>、<code><pre></code>、<code><p></code> 等標籤，必需在前後加上空白，以利與內容區隔。而且這些（元素）的開始與結尾標籤，不可以用 tab 或是空白來縮排。Markdown 的產生器有智慧型判斷，可以避免在區塊標籤前後加上沒有必要的 <code><p></code> 標籤。</p> |
|
|
|
<p>舉例來說，在 Markdown 文件裡加上一段 HTML 表格：</p> |
|
|
|
<pre><code>This is a regular paragraph. |
|
|
|
<table> |
|
<tr> |
|
<td>Foo</td> |
|
</tr> |
|
</table> |
|
|
|
This is another regular paragraph. |
|
</code></pre> |
|
|
|
<p>請注意，Markdown 語法在 HTML 區塊標籤中將不會被進行處理。例如，你無法在 HTML 區塊內使用 Markdown 形式的<code>*強調*</code>。</p> |
|
|
|
<p>HTML 的區段標籤如 <code><span></code>、<code><cite></code>、<code><del></code> 則不受限制，可以在 Markdown 的段落、清單或是標題裡任意使用。依照個人習慣，甚至可以不用Markdown 格式，而採用 HTML 標籤來格式化。舉例說明：如果比較喜歡 HTML 的 <code><a></code> 或 <code><img></code> 標籤，可以直接使用這些標籤，而不用 Markdown 提供的連結或是影像標示語法。</p> |
|
|
|
<p>HTML 區段標籤和區塊標籤不同，在區段標籤的範圍內， Markdown 的語法是有效的。</p> |
|
|
|
<h3 id="autoescape">特殊字元自動轉換</h3> |
|
|
|
<p>在 HTML 文件中，有兩個字元需要特殊處理： <code><</code> 和 <code>&</code> 。 <code><</code> 符號用於起始標籤，<code>&</code> 符號則用於標記 HTML 實體，如果你只是想要使用這些符號，你必須要使用實體的形式，像是 <code>&lt;</code> 和 <code>&amp;</code>。</p> |
|
|
|
<p><code>&</code> 符號其實很讓寫作網路文件的人很困擾，如果你要打「AT&T」 ，你必須要寫成「<code>AT&amp;T</code>」 ，還得轉換網址內的 <code>&</code> 符號，如果你要連結到：</p> |
|
|
|
<pre><code>http://images.google.com/images?num=30&q=larry+bird |
|
</code></pre> |
|
|
|
<p>你必須要把網址轉成：</p> |
|
|
|
<pre><code>http://images.google.com/images?num=30&amp;q=larry+bird |
|
</code></pre> |
|
|
|
<p>才能放到連結標籤的 <code>href</code> 屬性裡。不用說也知道這很容易忘記，這也可能是 HTML 標準檢查所檢查到的錯誤中，數量最多的。</p> |
|
|
|
<p>Markdown 允許你直接使用這些符號，但是你要小心跳脫字元的使用，如果你是在HTML 實體中使用 <code>&</code> 符號的話，它不會被轉換，而在其它情形下，它則會被轉換成 <code>&amp;</code>。所以你如果要在文件中插入一個著作權的符號，你可以這樣寫：</p> |
|
|
|
<pre><code>&copy; |
|
</code></pre> |
|
|
|
<p>Markdown 將不會對這段文字做修改，但是如果你這樣寫：</p> |
|
|
|
<pre><code>AT&T |
|
</code></pre> |
|
|
|
<p>Markdown 就會將它轉為：</p> |
|
|
|
<pre><code>AT&amp;T |
|
</code></pre> |
|
|
|
<p>類似的狀況也會發生在 <code><</code> 符號上，因為 Markdown 支援 <a href="#html">行內 HTML</a> ，如果你是使用 <code><</code> 符號作為 HTML 標籤使用，那 Markdown 也不會對它做任何轉換，但是如果你是寫：</p> |
|
|
|
<pre><code>4 < 5 |
|
</code></pre> |
|
|
|
<p>Markdown 將會把它轉換為：</p> |
|
|
|
<pre><code>4 &lt; 5 |
|
</code></pre> |
|
|
|
<p>不過需要注意的是，code 範圍內，不論是行內還是區塊， <code><</code> 和 <code>&</code> 兩個符號都 <em>一定</em> 會被轉換成 HTML 實體，這項特性讓你可以很容易地用 Markdown 寫 HTML code （和 HTML 相對而言， HTML 語法中，你要把所有的 <code><</code> 和 <code>&</code> 都轉換為 HTML 實體，才能在 HTML 文件裡面寫出 HTML code。）</p> |
|
|
|
<hr /> |
|
|
|
<h2 id="block">區塊元素</h2> |
|
|
|
<h3 id="p">段落和換行</h3> |
|
|
|
<p>一個段落是由一個以上相連接的行句組成，而一個以上的空行則會切分出不同的段落（空行的定義是顯示上看起來像是空行，便會被視為空行。比方說，若某一行只包含空白和 tab，則該行也會被視為空行），一般的段落不需要用空白或斷行縮排。</p> |
|
|
|
<p>「一個以上相連接的行句組成」這句話其實暗示了 Markdown 允許段落內的強迫斷行，這個特性和其他大部分的 text-to-HTML 格式不一樣（包括 MovableType 的「Convert Line Breaks」選項），其它的格式會把每個斷行都轉成 <code><br /></code> 標籤。</p> |
|
|
|
<p>如果你<em>真的</em>想要插入 <code><br /></code> 標籤的話，在行尾加上兩個以上的空白，然後按 enter。</p> |
|
|
|
<p>是的，這確實需要花比較多功夫來插入 <code><br /></code> ，但是「每個換行都轉換為 <code><br /></code>」的方法在 Markdown 中並不適合， Markdown 中 email 式的 <a href="#blockquote">區塊引言</a> 和多段落的 <a href="#list">清單</a> 在使用換行來排版的時候，不但更好用，還更好閱讀。</p> |
|
|
|
<h3 id="header">標題</h3> |
|
|
|
<p>Markdown 支援兩種標題的語法，<a href="http://docutils.sourceforge.net/mirror/setext.html">Setext</a> 和 <a href="http://www.aaronsw.com/2002/atx/">atx</a> 形式。</p> |
|
|
|
<p>Setext 形式是用底線的形式，利用 <code>=</code> （最高階標題）和 <code>-</code> （第二階標題），例如：</p> |
|
|
|
<pre><code>This is an H1 |
|
============= |
|
|
|
This is an H2 |
|
------------- |
|
</code></pre> |
|
|
|
<p>任何數量的 <code>=</code> 和 <code>-</code> 都可以有效果。</p> |
|
|
|
<p>Atx 形式則是在行首插入 1 到 6 個 <code>#</code> ，對應到標題 1 到 6 階，例如：</p> |
|
|
|
<pre><code># This is an H1 |
|
|
|
## This is an H2 |
|
|
|
###### This is an H6 |
|
</code></pre> |
|
|
|
<p>你可以選擇性地「關閉」atx 樣式的標題，這純粹只是美觀用的，若是覺得這樣看起來比較舒適，你就可以在行尾加上 <code>#</code>，而行尾的 <code>#</code> 數量也不用和開頭一樣（行首的井字數量決定標題的階數）：</p> |
|
|
|
<pre><code># This is an H1 # |
|
|
|
## This is an H2 ## |
|
|
|
### This is an H3 ###### |
|
</code></pre> |
|
|
|
<h3 id="blockquote">Blockquotes</h3> |
|
|
|
<p>Markdown 使用 email 形式的區塊引言，如果你很熟悉如何在 email 信件中引言，你就知道怎麼在 Markdown 文件中建立一個區塊引言，那會看起來像是你強迫斷行，然後在每行的最前面加上 <code>></code> ：</p> |
|
|
|
<pre><code>> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, |
|
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. |
|
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. |
|
> |
|
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse |
|
> id sem consectetuer libero luctus adipiscing. |
|
</code></pre> |
|
|
|
<p>Markdown 也允許你只在整個段落的第一行最前面加上 <code>></code> ：</p> |
|
|
|
<pre><code>> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, |
|
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. |
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. |
|
|
|
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse |
|
id sem consectetuer libero luctus adipiscing. |
|
</code></pre> |
|
|
|
<p>區塊引言可以有階層（例如：引言內的引言），只要根據層數加上不同數量的 <code>></code> ：</p> |
|
|
|
<pre><code>> This is the first level of quoting. |
|
> |
|
> > This is nested blockquote. |
|
> |
|
> Back to the first level. |
|
</code></pre> |
|
|
|
<p>引言的區塊內也可以使用其他的 Markdown 語法，包括標題、清單、程式碼區塊等：</p> |
|
|
|
<pre><code>> ## This is a header. |
|
> |
|
> 1. This is the first list item. |
|
> 2. This is the second list item. |
|
> |
|
> Here's some example code: |
|
> |
|
> return shell_exec("echo $input | $markdown_script"); |
|
</code></pre> |
|
|
|
<p>任何標準的文字編輯器都能簡單地建立 email 樣式的引言，例如 BBEdit ，你可以選取文字後然後從選單中選擇<em>增加引言階層</em>。</p> |
|
|
|
<h3 id="list">清單</h3> |
|
|
|
<p>Markdown 支援有序清單和無序清單。</p> |
|
|
|
<p>無序清單使用星號、加號或是減號作為清單標記：</p> |
|
|
|
<pre><code>* Red |
|
* Green |
|
* Blue |
|
</code></pre> |
|
|
|
<p>等同於：</p> |
|
|
|
<pre><code>+ Red |
|
+ Green |
|
+ Blue |
|
</code></pre> |
|
|
|
<p>也等同於：</p> |
|
|
|
<pre><code>- Red |
|
- Green |
|
- Blue |
|
</code></pre> |
|
|
|
<p>有序清單則使用數字接著一個英文句點：</p> |
|
|
|
<pre><code>1. Bird |
|
2. McHale |
|
3. Parish |
|
</code></pre> |
|
|
|
<p>很重要的一點是，你在清單標記上使用的數字並不會影響輸出的 HTML 結果，上面的清單所產生的 HTML 標記為：</p> |
|
|
|
<pre><code><ol> |
|
<li>Bird</li> |
|
<li>McHale</li> |
|
<li>Parish</li> |
|
</ol> |
|
</code></pre> |
|
|
|
<p>如果你的清單標記寫成：</p> |
|
|
|
<pre><code>1. Bird |
|
1. McHale |
|
1. Parish |
|
</code></pre> |
|
|
|
<p>或甚至是：</p> |
|
|
|
<pre><code>3. Bird |
|
1. McHale |
|
8. Parish |
|
</code></pre> |
|
|
|
<p>你都會得到完全相同的 HTML 輸出。重點在於，你可以讓 Markdown 文件的清單數字和輸出的結果相同，或是你懶一點，你可以完全不用在意數字的正確性。</p> |
|
|
|
<p>如果你使用懶惰的寫法，建議第一個項目最好還是從 1. 開始，因為 Markdown 未來可能會支援有序清單的 start 屬性。</p> |
|
|
|
<p>清單項目標記通常是放在最左邊，但是其實也可以縮排，最多三個空白，項目標記後面則一定要接著至少一個空白或 tab。</p> |
|
|
|
<p>要讓清單看起來更漂亮，你可以把內容用固定的縮排整理好：</p> |
|
|
|
<pre><code>* Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
|
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, |
|
viverra nec, fringilla in, laoreet vitae, risus. |
|
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit. |
|
Suspendisse id sem consectetuer libero luctus adipiscing. |
|
</code></pre> |
|
|
|
<p>但是如果你很懶，那也不一定需要：</p> |
|
|
|
<pre><code>* Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
|
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, |
|
viverra nec, fringilla in, laoreet vitae, risus. |
|
* Donec sit amet nisl. Aliquam semper ipsum sit amet velit. |
|
Suspendisse id sem consectetuer libero luctus adipiscing. |
|
</code></pre> |
|
|
|
<p>如果清單項目間用空行分開， Markdown 會把項目的內容在輸出時用 <code><p></code> |
|
標籤包起來，舉例來說：</p> |
|
|
|
<pre><code>* Bird |
|
* Magic |
|
</code></pre> |
|
|
|
<p>會被轉換為：</p> |
|
|
|
<pre><code><ul> |
|
<li>Bird</li> |
|
<li>Magic</li> |
|
</ul> |
|
</code></pre> |
|
|
|
<p>但是這個：</p> |
|
|
|
<pre><code>* Bird |
|
|
|
* Magic |
|
</code></pre> |
|
|
|
<p>會被轉換為：</p> |
|
|
|
<pre><code><ul> |
|
<li><p>Bird</p></li> |
|
<li><p>Magic</p></li> |
|
</ul> |
|
</code></pre> |
|
|
|
<p>清單項目可以包含多個段落，每個項目下的段落都必須縮排 4 個空白或是一個 tab ：</p> |
|
|
|
<pre><code>1. This is a list item with two paragraphs. Lorem ipsum dolor |
|
sit amet, consectetuer adipiscing elit. Aliquam hendrerit |
|
mi posuere lectus. |
|
|
|
Vestibulum enim wisi, viverra nec, fringilla in, laoreet |
|
vitae, risus. Donec sit amet nisl. Aliquam semper ipsum |
|
sit amet velit. |
|
|
|
2. Suspendisse id sem consectetuer libero luctus adipiscing. |
|
</code></pre> |
|
|
|
<p>如果你每行都有縮排，看起來會看好很多，當然，再次地，如果你很懶惰，Markdown 也允許：</p> |
|
|
|
<pre><code>* This is a list item with two paragraphs. |
|
|
|
This is the second paragraph in the list item. You're |
|
only required to indent the first line. Lorem ipsum dolor |
|
sit amet, consectetuer adipiscing elit. |
|
|
|
* Another item in the same list. |
|
</code></pre> |
|
|
|
<p>如果要在清單項目內放進引言，那 <code>></code> 就需要縮排：</p> |
|
|
|
<pre><code>* A list item with a blockquote: |
|
|
|
> This is a blockquote |
|
> inside a list item. |
|
</code></pre> |
|
|
|
<p>如果要放程式碼區塊的話，該區塊就需要縮排<em>兩次</em> ，也就是 8 個空白或是兩個 tab：</p> |
|
|
|
<pre><code>* A list item with a code block: |
|
|
|
<code goes here> |
|
</code></pre> |
|
|
|
<p>當然，項目清單很可能會不小心產生，像是下面這樣的寫法：</p> |
|
|
|
<pre><code>1986. What a great season. |
|
</code></pre> |
|
|
|
<p>換句話說，也就是在行首出現<em>數字-句點-空白</em>，要避免這樣的狀況，你可以在句點前面加上反斜線。</p> |
|
|
|
<pre><code>1986\. What a great season. |
|
</code></pre> |
|
|
|
<h3 id="precode">程式碼區塊</h3> |
|
|
|
<p>和程式相關的寫作或是標籤語言原始碼通常會有已經排版好的程式碼區塊，通常這些區塊我們並不希望它以一般段落文件的方式去排版，而是照原來的樣子顯示，Markdown 會用 <code><pre></code> 和 <code><code></code> 標籤來把程式碼區塊包起來。</p> |
|
|
|
<p>要在 Markdown 中建立程式碼區塊很簡單，只要簡單地縮排 4 個空白或是 1 個 tab 就可以，例如，下面的輸入：</p> |
|
|
|
<pre><code>This is a normal paragraph: |
|
|
|
This is a code block. |
|
</code></pre> |
|
|
|
<p>Markdown 會轉換成：</p> |
|
|
|
<pre><code><p>This is a normal paragraph:</p> |
|
|
|
<pre><code>This is a code block. |
|
</code></pre> |
|
</code></pre> |
|
|
|
<p>這個每行一階的縮排（4 個空白或是 1 個 tab），都會被移除，例如：</p> |
|
|
|
<pre><code>Here is an example of AppleScript: |
|
|
|
tell application "Foo" |
|
beep |
|
end tell |
|
</code></pre> |
|
|
|
<p>會被轉換為：</p> |
|
|
|
<pre><code><p>Here is an example of AppleScript:</p> |
|
|
|
<pre><code>tell application "Foo" |
|
beep |
|
end tell |
|
</code></pre> |
|
</code></pre> |
|
|
|
<p>一個程式碼區塊會一直持續到沒有縮排的那一行（或是文件結尾）。</p> |
|
|
|
<p>在程式碼區塊裡面， <code>&</code> 、 <code><</code> 和 <code>></code> 會自動轉成 HTML 實體，這樣的方式讓你非常容易使用 Markdown 插入範例用的 HTML 原始碼，只需要複製貼上，再加上縮排就可以了，剩下的 Markdown 都會幫你處理，例如：</p> |
|
|
|
<pre><code> <div class="footer"> |
|
&copy; 2004 Foo Corporation |
|
</div> |
|
</code></pre> |
|
|
|
<p>會被轉換為：</p> |
|
|
|
<pre><code><pre><code>&lt;div class="footer"&gt; |
|
&amp;copy; 2004 Foo Corporation |
|
&lt;/div&gt; |
|
</code></pre> |
|
</code></pre> |
|
|
|
<p>程式碼區塊中，一般的 Markdown 語法不會被轉換，像是星號便只是星號，這表示你可以很容易地以 Markdown 語法撰寫 Markdown 語法相關的文件。</p> |
|
|
|
<h3 id="hr">分隔線</h3> |
|
|
|
<p>你可以在一行中用三個或以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號中間插入空白。下面每種寫法都可以建立分隔線：</p> |
|
|
|
<pre><code>* * * |
|
|
|
*** |
|
|
|
***** |
|
|
|
- - - |
|
|
|
--------------------------------------- |
|
</code></pre> |
|
|
|
<hr /> |
|
|
|
<h2 id="span">區段元素</h2> |
|
|
|
<h3 id="link">連結</h3> |
|
|
|
<p>Markdown 支援兩種形式的連結語法： <em>行內</em>和<em>參考</em>兩種形式。</p> |
|
|
|
<p>不管是哪一種，連結的文字都是用 [方括號] 來標記。</p> |
|
|
|
<p>要建立一個行內形式的連結，只要在方塊括號後面馬上接著括號並插入網址連結即可，如果你還想要加上連結的 title 文字，只要在網址後面，用雙引號把 title 文字包起來即可，例如：</p> |
|
|
|
<pre><code>This is [an example](http://example.com/ "Title") inline link. |
|
|
|
[This link](http://example.net/) has no title attribute. |
|
</code></pre> |
|
|
|
<p>會產生：</p> |
|
|
|
<pre><code><p>This is <a href="http://example.com/" title="Title"> |
|
an example</a> inline link.</p> |
|
|
|
<p><a href="http://example.net/">This link</a> has no |
|
title attribute.</p> |
|
</code></pre> |
|
|
|
<p>如果你是要連結到同樣主機的資源，你可以使用相對路徑：</p> |
|
|
|
<pre><code>See my [About](/about/) page for details. |
|
</code></pre> |
|
|
|
<p>參考形式的連結使用另外一個方括號接在連結文字的括號後面，而在第二個方括號裡面要填入用以辨識連結的標籤：</p> |
|
|
|
<pre><code>This is [an example][id] reference-style link. |
|
</code></pre> |
|
|
|
<p>你也可以選擇性地在兩個方括號中間加上空白：</p> |
|
|
|
<pre><code>This is [an example] [id] reference-style link. |
|
</code></pre> |
|
|
|
<p>接著，在文件的任意處，你可以把這個標籤的連結內容定義出來：</p> |
|
|
|
<pre><code>[id]: http://example.com/ "Optional Title Here" |
|
</code></pre> |
|
|
|
<p>連結定義的形式為：</p> |
|
|
|
<ul> |
|
<li>方括號，裡面輸入連結的辨識用標籤</li> |
|
<li>接著一個分號</li> |
|
<li>接著一個以上的空白或 tab</li> |
|
<li>接著連結的網址</li> |
|
<li>選擇性地接著 title 內容，可以用單引號、雙引號或是括弧包著</li> |
|
</ul> |
|
|
|
<p>下面這三種連結的定義都是相同：</p> |
|
|
|
<pre><code>[foo]: http://example.com/ "Optional Title Here" |
|
[foo]: http://example.com/ 'Optional Title Here' |
|
[foo]: http://example.com/ (Optional Title Here) |
|
</code></pre> |
|
|
|
<p><strong>請注意：</strong> 有一個已知的問題是 Markdown.pl 1.0.1 會忽略單引號包起來的連結 title。</p> |
|
|
|
<p>連結網址也可以用角括號包起來：</p> |
|
|
|
<pre><code>[id]: <http://example.com/> "Optional Title Here" |
|
</code></pre> |
|
|
|
<p>你也可以把 title 屬性放到下一行，也可以加一些縮排，網址太長的話，這樣會比較好看：</p> |
|
|
|
<pre><code>[id]: http://example.com/longish/path/to/resource/here |
|
"Optional Title Here" |
|
</code></pre> |
|
|
|
<p>網址定義只有在產生連結的時候用到，並不會直接出現在文件之中。</p> |
|
|
|
<p>連結辨識標籤可以有字母、數字、空白和標點符號，但是並<em>不</em>區分大小寫，因此下面兩個連結是一樣的：</p> |
|
|
|
<pre><code>[link text][a] |
|
[link text][A] |
|
</code></pre> |
|
|
|
<p><em>預設的連結標籤</em>功能讓你可以省略指定連結標籤，這種情形下，連結標籤和連結文字會視為相同，要用預設連結標籤只要在連結文字後面加上一個空的角括號，如果你要讓 "Google" 連結到 google.com，你可以簡化成：</p> |
|
|
|
<pre><code>[Google][] |
|
</code></pre> |
|
|
|
<p>然後定義連結內容：</p> |
|
|
|
<pre><code>[Google]: http://google.com/ |
|
</code></pre> |
|
|
|
<p>由於連結文字可能包含空白，所以這種簡化的標籤內也可以包含多個文字：</p> |
|
|
|
<pre><code>Visit [Daring Fireball][] for more information. |
|
</code></pre> |
|
|
|
<p>然後接著定義連結：</p> |
|
|
|
<pre><code>[Daring Fireball]: http://daringfireball.net/ |
|
</code></pre> |
|
|
|
<p>連結的定義可以放在文件中的任何一個地方，我比較偏好直接放在連結出現段落的後面，你也可以把它放在文件最後面，就像是註解一樣。</p> |
|
|
|
<p>下面是一個參考式連結的範例：</p> |
|
|
|
<pre><code>I get 10 times more traffic from [Google] [1] than from |
|
[Yahoo] [2] or [MSN] [3]. |
|
|
|
[1]: http://google.com/ "Google" |
|
[2]: http://search.yahoo.com/ "Yahoo Search" |
|
[3]: http://search.msn.com/ "MSN Search" |
|
</code></pre> |
|
|
|
<p>如果改成用連結名稱的方式寫：</p> |
|
|
|
<pre><code>I get 10 times more traffic from [Google][] than from |
|
[Yahoo][] or [MSN][]. |
|
|
|
[google]: http://google.com/ "Google" |
|
[yahoo]: http://search.yahoo.com/ "Yahoo Search" |
|
[msn]: http://search.msn.com/ "MSN Search" |
|
</code></pre> |
|
|
|
<p>上面兩種寫法都會產生下面的 HTML。</p> |
|
|
|
<pre><code><p>I get 10 times more traffic from <a href="http://google.com/" |
|
title="Google">Google</a> than from |
|
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> |
|
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p> |
|
</code></pre> |
|
|
|
<p>下面是用行內形式寫的同樣一段內容的 Markdown 文件，提供作為比較之用：</p> |
|
|
|
<pre><code>I get 10 times more traffic from [Google](http://google.com/ "Google") |
|
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or |
|
[MSN](http://search.msn.com/ "MSN Search"). |
|
</code></pre> |
|
|
|
<p>參考式的連結其實重點不在於它比較好寫，而是它比較好讀，比較一下上面的範例，使用參考式的文章本身只有 81 個字元，但是用行內形式的連結卻會增加到 176 個字元，如果是用純 HTML 格式來寫，會有 234 個字元，在 HTML 格式中，標籤比文字還要多。</p> |
|
|
|
<p>使用 Markdown 的參考式連結，可以讓文件更像是瀏覽器最後產生的結果，讓你可以把一些標記相關的資訊移到段落文字之外，你就可以增加連結而不讓文章的閱讀感覺被打斷。</p> |
|
|
|
<h3 id="em">強調</h3> |
|
|
|
<p>Markdown 使用星號（<code>*</code>）和底線（<code>_</code>）作為標記強調字詞的符號，被 <code>*</code> 或 <code>_</code> 包圍的字詞會被轉成用 <code><em></code> 標籤包圍，用兩個 <code>*</code> 或 <code>_</code> 包起來的話，則會被轉成 <code><strong></code>，例如：</p> |
|
|
|
<pre><code>*single asterisks* |
|
|
|
_single underscores_ |
|
|
|
**double asterisks** |
|
|
|
__double underscores__ |
|
</code></pre> |
|
|
|
<p>會轉成：</p> |
|
|
|
<pre><code><em>single asterisks</em> |
|
|
|
<em>single underscores</em> |
|
|
|
<strong>double asterisks</strong> |
|
|
|
<strong>double underscores</strong> |
|
</code></pre> |
|
|
|
<p>你可以隨便用你喜歡的樣式，唯一的限制是，你用什麼符號開啟標籤，就要用什麼符號結束。</p> |
|
|
|
<p>強調也可以直接差在文字中間：</p> |
|
|
|
<pre><code>un*frigging*believable |
|
</code></pre> |
|
|
|
<p>但是如果你的 <code>*</code> 和 <code>_</code> 兩邊都有空白的話，它們就只會被當成普通的符號。</p> |
|
|
|
<p>如果要在文字前後直接插入普通的星號或底線，你可以用反斜線：</p> |
|
|
|
<pre><code>\*this text is surrounded by literal asterisks\* |
|
</code></pre> |
|
|
|
<h3 id="code">程式碼</h3> |
|
|
|
<p>如果要標記一小段行內程式碼，你可以用反引號把它包起來（<code>`</code>），例如：</p> |
|
|
|
<pre><code>Use the `printf()` function. |
|
</code></pre> |
|
|
|
<p>會產生：</p> |
|
|
|
<pre><code><p>Use the <code>printf()</code> function.</p> |
|
</code></pre> |
|
|
|
<p>如果要在程式碼區段內插入反引號，你可以用多個反引號來開啟和結束程式碼區段：</p> |
|
|
|
<pre><code>``There is a literal backtick (`) here.`` |
|
</code></pre> |
|
|
|
<p>這段語法會產生：</p> |
|
|
|
<pre><code><p><code>There is a literal backtick (`) here.</code></p> |
|
</code></pre> |
|
|
|
<p>程式碼區段的起始和結束端都可以放入一個空白，起始端後面一個，結束端前面一個，這樣你就可以在區段的一開始就插入反引號：</p> |
|
|
|
<pre><code>A single backtick in a code span: `` ` `` |
|
|
|
A backtick-delimited string in a code span: `` `foo` `` |
|
</code></pre> |
|
|
|
<p>會產生：</p> |
|
|
|
<pre><code><p>A single backtick in a code span: <code>`</code></p> |
|
|
|
<p>A backtick-delimited string in a code span: <code>`foo`</code></p> |
|
</code></pre> |
|
|
|
<p>在程式碼區段內，<code>&</code> 和角括號都會被轉成 HTML 實體，這樣會比較容易插入 HTML 原始碼，Markdown 會把下面這段：</p> |
|
|
|
<pre><code>Please don't use any `<blink>` tags. |
|
</code></pre> |
|
|
|
<p>轉為：</p> |
|
|
|
<pre><code><p>Please don't use any <code>&lt;blink&gt;</code> tags.</p> |
|
</code></pre> |
|
|
|
<p>你也可以這樣寫：</p> |
|
|
|
<pre><code>`&#8212;` is the decimal-encoded equivalent of `&mdash;`. |
|
</code></pre> |
|
|
|
<p>以產生：</p> |
|
|
|
<pre><code><p><code>&amp;#8212;</code> is the decimal-encoded |
|
equivalent of <code>&amp;mdash;</code>.</p> |
|
</code></pre> |
|
|
|
<h3 id="img">圖片</h3> |
|
|
|
<p>很明顯地，要在純文字應用中設計一個 「自然」的語法來插入圖片是有一定難度的。</p> |
|
|
|
<p>Markdown 使用一種和連結很相似的語法來標記圖片，同樣也允許兩種樣式： <em>行內</em>和<em>參考</em>。</p> |
|
|
|
<p>行內圖片的語法看起來像是：</p> |
|
|
|
<pre><code> |
|
|
|
 |
|
</code></pre> |
|
|
|
<p>詳細敘述如下：</p> |
|
|
|
<ul> |
|
<li>一個驚嘆號 <code>!</code></li> |
|
<li>接著一個角括號，裡面放上圖片的替代文字</li> |
|
<li>接著一個普通括號，裡面放上圖片的網址，最後還可以用引號包住並加上 |
|
選擇性的 'title' 文字。</li> |
|
</ul> |
|
|
|
<p>參考式的圖片語法則長得像這樣：</p> |
|
|
|
<pre><code>![Alt text][id] |
|
</code></pre> |
|
|
|
<p>「id」是圖片參考的名稱，圖片參考的定義方式則和連結參考一樣：</p> |
|
|
|
<pre><code>[id]: url/to/image "Optional title attribute" |
|
</code></pre> |
|
|
|
<p>到目前為止， Markdown 還沒有辦法指定圖片的寬高，如果你需要的話，你可以使用普通的 <code><img></code> 標籤。</p> |
|
|
|
<hr /> |
|
|
|
<h2 id="misc">其它</h2> |
|
|
|
<h3 id="autolink">自動連結</h3> |
|
|
|
<p>Markdown 支援比較簡短的自動連結形式來處理網址和電子郵件信箱，只要是用角括號包起來， Markdown 就會自動把它轉成連結，連結的文字就和連結位置一樣，例如：</p> |
|
|
|
<pre><code><http://example.com/> |
|
</code></pre> |
|
|
|
<p>Markdown 會轉為：</p> |
|
|
|
<pre><code><a href="http://example.com/">http://example.com/</a> |
|
</code></pre> |
|
|
|
<p>自動的郵件連結也很類似，只是 Markdown 會先做一個編碼轉換的過程，把文字字元轉成 16 進位碼的 HTML 實體，這樣的格式可以混淆一些不好的信箱地址收集機器人，例如：</p> |
|
|
|
<pre><code><address@example.com> |
|
</code></pre> |
|
|
|
<p>Markdown 會轉成：</p> |
|
|
|
<pre><code><a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65; |
|
&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111; |
|
&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61; |
|
&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a> |
|
</code></pre> |
|
|
|
<p>在瀏覽器裡面，這段字串會變成一個可以點擊的「address@example.com」連結。</p> |
|
|
|
<p>（這種作法雖然可以混淆不少的機器人，但並無法全部擋下來，不過這樣也比什麼都不做好些。無論如何，公開你的信箱終究會引來廣告信件的。）</p> |
|
|
|
<h3 id="backslash">跳脫字元</h3> |
|
|
|
<p>Markdown 可以利用反斜線來插入一些在語法中有其它意義的符號，例如：如果你想要用星號加在文字旁邊的方式來做出強調效果（但不用 <code><em></code> 標籤），你可以在星號的前面加上反斜線：</p> |
|
|
|
<pre><code>\*literal asterisks\* |
|
</code></pre> |
|
|
|
<p>Markdown 支援在下面這些符號前面加上反斜線來幫助插入普通的符號：</p> |
|
|
|
<pre><code>\ 反斜線 |
|
` 反引號 |
|
* 星號 |
|
_ 底線 |
|
{} 大括號 |
|
[] 方括號 |
|
() 括號 |
|
# 井字號 |
|
+ 加號 |
|
- 減號 |
|
. 英文句點 |
|
! 驚嘆號 |
|
</code></pre> |
|
|
|
<h2 id="acknowledgement">感謝</h2> |
|
|
|
<p>感謝 <a href="https://twitter.com/#!/leafy7382">leafy7382</a> 協助翻譯，<a href="http://iamhlb.com/">hlb</a>、<a href="http://twitter.com/randylien">Randylien</a> 幫忙潤稿，<a href="https://twitter.com/#!/ethantw">ethantw</a> 的<a href="http://ethantw.net/projects/han/">漢字標準格式・CSS Reset</a>。</p> |
|
|
|
|
|
</div> |
|
|
|
<div id="comments"> |
|
|
|
<div id="disqus_thread"></div> |
|
<script type="text/javascript"> |
|
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ |
|
var disqus_shortname = 'markdowntw'; // required: replace example with your forum shortname |
|
|
|
// The following are highly recommended additional parameters. Remove the slashes in front to use. |
|
// var disqus_identifier = 'unique_dynamic_id_1234'; |
|
// var disqus_url = 'http://example.com/permalink-to-page.html'; |
|
|
|
/* * * DON'T EDIT BELOW THIS LINE * * */ |
|
(function() { |
|
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; |
|
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; |
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); |
|
})(); |
|
</script> |
|
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> |
|
|
|
</div> |
|
|
|
<script type="text/javascript"> |
|
|
|
var _gaq = _gaq || []; |
|
_gaq.push(['_setAccount', 'UA-21880461-1']); |
|
_gaq.push(['_trackPageview']); |
|
|
|
(function() { |
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
|
})(); |
|
|
|
</script> |
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> |
|
<script src="Han-the-CSS-Reset/han.min.js"></script> |
|
</body> |
|
</html>
|
|
|