2021-05-12 14:32:11
前端學Markdown語法
2020-06-16 17:24:57
前面的話
我個人理解，Markdown就是一個富文字編輯器語言，類似於sass對於css的功能，Markdown也可以叫做HTML前處理器，只不過它是一門輕量級的標示語言，可以更簡單的實現HTML文件。本文將詳細介紹Markdown的內容
概述
Markdown的目標是實現易讀易寫，一份使用Markdown格式撰寫的檔案應該可以直接以純文字發布
Markdown的語法全由一些符號所組成，它的語法種類很少，只對應HTML標記的一小部分。由於Markdown實際上就是簡化版的HTML，所以直接寫HTML也是可以的
段落
不加任何符號的一段字元，就是一個段落。多個段落之間用空行分隔
[注意]在markdown中，多個空行會合併為一個空行顯示
p1
p2
p3輸出HTML為
<p>p1</p>
<p>p2</p>
<p>p3</p>換行
如果段落之間沒有空行，則解析為HTML標籤<br>
p1
p2
p3輸出HTML為
<p>p1<br>
p2<br>
p3</p>標題
#、##、###、####、#####、######分別對應<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。其實我個人感覺，不如直接使用<h>標籤方便，特別是到標題3以後
#h1
##h2
###h3
####h4
#####h5
######h6輸出HTML為
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>區塊
說起區塊，可能聽說的人比較少。它用'>'這個符號來表示，對應於HTML中的<blockquote>標籤，用於參照塊元素。《Head first HTML And CSS》一書中，還專門針對<blockquote>和<q>進行了詳細的區分，但實際用的比較少
但是，markdown對應區塊參照的實現上，並不能完整表達<blockquote>標籤的語意，應該可以參照多個段落，但實際上markdown的'>'符號只能參照一個段落
>p1
p2輸出HTML為
<blockquote>
<p>p1</p>
</blockquote>
<p>p2</p>列表
【無序列表】
無序列表使用星號、加號和減號來做為列表的專案標記
* red
* blue
* green
+ red
+ blue
+ green
- red
- blue
- green輸出HTML為
<ul>
<li>red</li>
<li>blue</li>
<li>green</li>
</ul>【有序列表】
有序的列表則是使用一般的數位接著一個英文句點作為專案標記
1. Red
2. Green
3. Blue輸出HTML為
<ol>
<li>red</li>
<li>blue</li>
<li>green</li>
</ol> [注意]如果在專案之間插入空行，那專案的內容會用<p>包起來
分隔線
可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線
* * *
***
*****
- - -
---------------------------------------輸出HTML為
<hr>
<hr>
<hr>
<hr>
<hr>連結
Markdown支援三種形式的連結語法：行內、參考和自動。行內和參考連結都使用角括號把文字轉成連結
[注意]由於Markdown預設產生的連結是當前頁開啟，且無法實現_blank，所以，就個人而言還是直接使用<a>更方便
【行內連接】
行內形式是直接在後面用括號直接接上連結
This is an [example link](http://linuxidc.com/)輸出HTML為
<p>This is an<a href="http://linuxidc.com/">example link</a></p> 【參考連結】
參考形式的連結可以為連結定一個名稱，之後可以在檔案的其他地方定義該連結的內容。title屬性是選擇性的，連結名稱可以用字母、數位和空格，但是不分大小寫
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"輸出HTML為
<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>【直接連結】
Markdown支援比較簡短的自動連結形式來處理網址和電子郵件信箱，只要是用方括號包起來，Markdown就會自動把它轉成連結，連結的文字就和連結位置一樣
[注意]在網址前一定要加http://，否則將不會被識別為URL
<http://linuxidc.com/>輸出HTML為
<a href="http://linuxidc.com/">http://linuxidc.com/</a>圖片
圖片的語法和連結很像。先是一個驚嘆號!，接著一個方括號，裡面放上圖片的替代文字，接著一個普通括號，裡面放上圖片的網址，最後還可以用引號包住並加上選擇性的'title'文字
【行內形式】
【參考形式】
![alt text][id]
[id]: /path/to/img.jpg "Title"上面兩種方法都會輸出HTML為：
<img src="/path/to/img.jpg" alt="alt text" title="Title" /> 程式碼
【code】
使用反引號`來標記程式碼區段<code>，區段內的&、<和>都會被自動的轉換成HTML實體
`<p>`段落`</p>`輸出HTML為
<code><p></code>段落<code></p></code>【pre】
如果要建立一個已經格式化好的程式碼區塊，只要每行都縮排 4 個空格或是一個 tab 就可以了，而 &、< 和 > 也一樣會自動轉成 HTML 實體
<blockquote>
<p>For example.</p>
</blockquote>輸出HTML為
<pre><code><blockquote><p>For example.</p></blockquote></code></pre>強調
Markdown 使用星號*和底線_作為標記強調字詞的符號，被*或_ 包圍的字詞會被轉成用 <em>標籤包圍，用兩個* 或_包起來的話，則會被轉成<strong>
如果* 和 _ 兩邊都有空白的話，它們就只會被當成普通的符號。如果要在文字前後直接插入普通的星號或底線，可以用反斜線：
*em* **strong**輸出HTML為
<em>em</em><strong>strong</strong>跳脫
在markdown中，有一些符號具有特殊的用途，如、*等，如果要使用它們的本意，則需要在前面加一個反斜槓來實現
Markdown 支援以下這些符號前面加上反斜槓來幫助插入普通的符號
反斜線
` 反引號
* 星號
_ 底線
{} 花括號
[] 方括號
() 括弧
# 井字號
+ 加號
- 減號
. 英文句點
! 驚嘆號空兩格
使用markdown排版時，很常用的需求是實現首行縮排，一般使用兩個全形空格&emsp$emsp來實現
注意
在Linux公社中使用markdown寫文章時，由於沒有即時顯示的功能，經常因為多敲了幾個空格，而被解析為<br>的情況
本文永久更新連結地址：http://www.linuxidc.com/Linux/2016-12/138837.htm
相關文章