Chiloh Wei

Markdown 是一種使用簡單的標記語法從而使普通文本內容具備一定格式的標記語言。從認識它以後，發現許多地方都用得到，比如當前這篇文章就是使用 Markdown 寫的。它語法極其簡單，學起來也很快，唯有表格的寫法上稍難一些，於是特地寫了這篇文章記錄。

Markdown 概述：#

參考文章：Markdown 中文文檔

設計理念：#

Markdown 致力於使閱讀和創作文檔變得容易.
Markdown 視可讀性為最高準則. Markdown 文件應該以純文本形式原樣發布，不應該包含標記標籤和格式化指令。儘管 Markdown 的語法受到了以下這些 text-to-HTML 過濾器的影響 -- 包括 Setext, atx, Textile, reStructuredText, Grutatext, 還有 EtText 但是 Markdown 語法靈感最大的來源還是純文本 email 的格式.
基於以上背景，Markdown 完全由標點符號組成，這些標點經過仔細挑選以使他們看上去和表達的含義相同。例如，星號標記的單詞就像 強調. 列表就像是列表。如果你使用過 email 的話，就連塊引用都像引用的文本段落.

內聯 HTML：#

Markdown 是用於 創作 web 文檔的.
Markdown 從來都不是要取代 HTML . 它的語法集非常小，只對應一小部分 HTML 標籤。它要做的 不是 創造一種新的語法以使插入 HTML 標籤變得更容易。在我看來，HTML 標籤已經很容易插入了. Markdown 的目標是易於閱讀，創作和編輯文章. HTML 是一種 發布 格式；Markdown 是一種 創作 格式。因此，Markdown 處理的都是純文本.
對於 Markdown 中未包含的標籤，可以直接使用 HTML. 沒有必要使用定界符或標識符來表明從 Markdown 切換到 HTML; 直接使用標籤就行了.
唯一的限制就是對於 HTML 塊級元素 ： 像 <div>、<table>、<pre>、<p> 等等。必須另起一行單獨放，並且開始和結束標籤前面不能有任何縮進. Markdown 會自動識別這些塊級元素而不會在他們周圍添加額外的 <p> 標籤.
例如，下面是添加 HTML 表格到 Markdown 文件:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

注意 Markdown 語法結構在 HTML 塊級元素中不會被處理。例如，你不該在 HTML 塊級元素中使用 Markdown 式的語法如 emphasis .
HTML 內聯元素 -- 例如 <span>、<cite>和 <del> 可以在 Markdown 段落，列表項，標題中任意使用。如果你樂意，你甚至可以使用 HTML 標籤替代 Markdown 格式；例如你可以用 HTML <a> 和 <img> 標籤替代 Markdown 的鏈接和圖片語法.
不同於 HTML 塊級元素，Markdown 語法可以在內聯元素中解析.

Markdown 表格寫法（適用 Github）：#

由上面的 Markdown 中文文檔 可知，表格的寫法應該有兩種：其一是 HTML-Table 標籤寫法；其二是基於 Markdown 自身的寫法；具體請參看下面:

1. HTML-Table 寫法：#

詳細請參考 HTML-Table 標籤，這裡不再贅述。

2. Markdown 寫法：#

參考文章：Organizing information with tables

Markdown 采用| 和 - 創建表格。其中 - 用於創建每個列的標題，而 | 用於分隔每個列。創建表格前需添加一個空行才能正確呈現。

代碼：

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

效果：

單元格的寬度可以不同，並且不需要在列內完美對齊。標題行的每列中必須至少有三個連字符。

代碼：

| Command | Description |
| --- | --- |
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |

效果：

格式化表格中的鏈接、內嵌代碼塊和文本樣式。

代碼：

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |
| `Blog Link` | <https://www.chiloh.cn> |

效果：

在標題行中的 - 的左側，右側或兩側使用 : 來調整文本居左，居右或居中。

代碼：

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

效果：

在單元格內要使用 | ，在 | 前添加 \ 來轉義。typecho 中似乎不能用，因此換用|的 Ascii 碼&#124來實現。

代碼：

| Name     | Character |
| ---      | ---       |
| Backtick | 、        |
| Pipe     | &#124     |

效果：

3. 高級表格#

如果想要對表格進行優化，則可以考慮使用 CSS 實現。有些 Markdown 解析是支持語法混用的，typecho 不支持，所以純用 html 寫表格。

代碼：

<style type="text/css">
.bg table, td, th
{
    border:1px solid grey; //設置表格邊框顏色
}
.bg table th:nth-of-type(1) {
    width: 12%; //設置表格列寬，（1）代表第一列
}
.bg table th:nth-of-type(2) {
    width: 24%; //設置表格列寬，（2）代表第一列
}
.bg table td:nth-of-type(1) {
	color: red; //設置表格列色，（1）代表第一列
}
.bg table td:nth-of-type(2) {
	color: green; //設置表格列色，（2）代表第二列
}
</style>

<div class="bg">

<table>
    <tr>
        <td>編號</td>
        <td>名稱</td>
        <td>簡介</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Apple</td>
        <td>蘋果</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Banana</td>
        <td>香蕉</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Lemon</td>
        <td>檸檬</td>
    </tr>
</table>

</div>

效果：

!!!