Markdown 基礎語法

Markdown語法可以大大提升打字或者編寫的速度,這個語法可以用最簡單的方法設定好文本的基本樣式,我認爲如果工作中有需要繼續長期編輯文章或打字的都可以瞭解這款語言,下面就是有關 Markdown 的基本語法和使用方法。

Markdown是什麼?

Markdown

Markdown是一種輕量級標記式語言,創始人為約翰·格魯伯(John Gruber)。它允許人們「使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XHTML(或者HTML)文件」。這種語言吸收了很多在電子郵件中已有的純文字標記的特性。Markdown也可以理解為將以MARKDOWN語法編寫的語言轉換成HTML內容的工具。

爲什麼要使用Markdown?

  1. 它是易讀(看起來舒服)、易寫(語法簡單)、易更改純文本。
  2. 兼容HTML,可以轉換為HTML格式發布。
  3. 跨平台使用。
  4. 越來越多的網站支持Markdown。
  5. 更方便清晰地組織你的電子郵件。 (Markdown-here, Airmail)

誰需要使用Markdown?

Markdown 是為那些需要經常打字或者進行文字排版的、對打字手速和排版順暢度有要求的人群設計的,他們希望用鍵盤把文字內容快速地打出來後就已經排版好了,最好從頭到尾都不需要使用滑鼠。這些人包括經常需要寫文檔的 程序員、博客作者、網站小編、出版業人士 等等。

應該用什麼工具?

有好的學習環境或寫作環境,就一定要有一款順手的工具,下面推薦各個平台較爲好用的工具。

MarkdownPad

markdownpad

目前分為MarkdownPad2和MarkdownPad Pro版本,後者收費,我們使用前者足矣,用戶可以通過鍵盤快捷鍵和工具欄按鈕來使用或者移除Markdown各種語法格式,支持自定義配色方案、字體、大小和佈局、即時HTML預覽、HTML和PDF導出,被很多人稱讚為Windows平台最好用的Markdown編輯器,實用性強,僅支持Windows系統,個人覺得在Windows 10系統上界面並不是很好看,有時候添加音樂什麼的,資源多了,實時預覽會顯示資源加載失敗

官方網站

Typora

typora

Typora同樣支持Windows、OS X和Linux,Typora支持即時渲染技術,這也是與其他Markdown編輯器最顯著的區別,支持數學編輯,可與Word直接格式轉換,在Pandoc的支持下進行多種文檔格式轉換,Typora適合那些對碼字手速和排版順暢度有要求的人群,譬如作者、網站小編等

官方網站

Visual Studio Code

Visual-Studio-Code

Visual Studio Code是眾所周知的神器,是微軟推出一款輕量級的文本編輯工具,類似於Sublime,它已經默認集成Markdown文檔編輯插件,原生就支持高亮Markdown的語法,但想要實時預覽還需要選擇Markdown: Open Preview to the Side命令實現

官方網站

Marxico

Marxico

Marxico中文名馬克飛象,提供桌面客戶端以及離線Chrome App,支持移動端Web,可以直接把文本存到印象筆記

官方網站

Atom

atom

Atom是Github專門為程序員推出的一個跨平台文本編輯器,具有簡潔和直觀的圖形用戶界面,並有很多有趣的特點:支持CSS,HTML,JavaScript等網頁編程語言,當然也支持Markdown ,支持宏,自動完成分屏功能,集成了文件管理器

官方網站

更多選擇

除了上述提到一些比較常見的工具軟件外,還有很多也很好用的 Markdown 編輯器,而且數量非常多,下面就再列出一些選擇。如果上面的都不合適也可以看看下面的

  • Smark
  • Mou
  • Haroopad
  • CuteMarkEd
  • MarkPad
  • Cmd Markdown
  • FarBox
  • Miu
  • MacDown
  • Byword
  • MaHua
  • Dillinger
  • etc.

要細數Markdown 編輯器的話,可能永遠也數不盡,而且每個人的看法也不同,正所謂蘿蔔白菜各有所愛,什麼編輯器不是最重要的,重要的是我們能寫出優質的文章,不斷學習進步!不斷提升自我!

如何使用Markdown?

Markdown語法主要分為如下幾大部分:

  1. 標題
  2. 段落
  3. 區塊引用
  4. 代碼區塊
  5. 強調
  6. 列表
  7. 分割線
  8. 鏈接
  9. 圖片
  10. 表格
  11. 轉義字符
  12. 注釋
  13. 公式

而在 Makrdown 中的所有寫法到最後都會被編譯為 HTML 語法,所以關於樣式的問題也會被網頁所使用的 CSS 影響。如果 Markdown 出來的樣式你不滿意,可以通過修改 CSS 調整。不同的網站或編輯器預設的樣式都會不一樣。

標題

標題顧名思義就是文章的標題,我們可以通過 Markdown 簡單的語法就可以將文本設爲 1-6 級不同大小的標題。

效果展示:

一級標題

二級標題

三級標題

四級標題

五級標題
六級標題

而標題的語法是:

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

文本內容前的 # 號數量就代表大小的不同。

段落

在文章中如果需要換行來添加新的段落,做法非常簡單。

一個 Markdown 段落是由一個或多個連續的文本行組成,它的前後要有一個以上的空行。
以一個空行開始,以一個空行結束,中間的就是一個段落。

這就是一個段落

這是第二個段落

但如果需要加入空行,就需要換行後輸入 &nbsp; 或者 <br /> 就可以加入一行空行。

區塊引用

在文章中如有需要用到區塊或者要引用部分文字,可以使用區塊引用。
語法如下:

> 第一層區塊 
> 第一層區塊
>> 第二層區塊
>>> 第三層區塊
>>>> 第四層區塊
>>>>> 第五層區塊

效果展示:

第一層區塊

第一層區塊

第二層區塊

第三層區塊

第四層區塊

第五層區塊

每多一層就在穩步前方多加一個 # 符號,層數可無限增加。

代碼區塊

對於程序員來說,文章內通常都需要寫到代碼,而如果直接輸入代碼通常都會因格式問題無法正確顯示。這個時候就需要使用代碼區塊來完整顯示代碼中的內容。Markdown的代碼區塊還可以因應不同的語言而調整文本的顏色,方便查閱。

開頭和結尾都需要輸入 ``` ,如果需要顯示代碼色彩,就在開頭的三點後加上語言的名稱。
語法如下:

  • 例子一:HTML 語言
```html
<html>
    <body bgcolor="#E6E6FA">
        Markdown 正確顯示Html代碼
    </body>
</html>
```

結果如下:

<html>
    <body bgcolor="#E6E6FA">
    Markdown 正確顯示Html代碼
    </body>
</html>
  • 例子二:C 語言
```C
void main()
{
    printf("Hello, Markdown.");
}
```

結果如下:

void main()
{
    printf("Hello, Markdown.");
}

注意:需要和普通段落之間存在空行。

強調

Markdown使用星號 * 和底線 _ 作為標記強調字詞的符號,被 *_ 包圍的字詞會被轉成用 <em> 標籤包圍,用兩個 *_ 包起來的話,則會被轉成 <strong>...</strong>,例如:

*斜體文字*

_斜體文字_

**粗體文字**

__粗體文字__

效果如下:

斜體文字

斜體文字

粗體文字

粗體文字

列表

Markdown支援有序列表和無序列表。

在無序列表中,我們可以使用 + 或者 - 來標記無序列表

- 第一項
+ 第二項
+ 第三項
- 第四項
  • 第一項
  • 第二項
  • 第三項
  • 第四項

在有序列表中,我們可以使用數字加上.來標記有序列表。在第一層排序必然按照順序排列,即使錯誤輸入序號也會自動修正。

語法如下:

1. 第一項
2. 第二項
2.2 第2.2項
2.3 第2.3項
2.5.1 第2.5.1項
4. 第三項
3. 第四項
9. 第五項

效果如下:

  1. 第一項
  2. 第二項
    2.2 第2.2項
    2.3 第2.3項
    2.5.1 第2.5.1項
  3. 第三項
  4. 第四項
  5. 第五項

分割線

分割線最常使用就是三個或以上*,還可以使用-_。這些符號的效果都一樣。
語法如下:

***

************

---

___

效果如下:





鏈接

鏈接可以由兩種形式生成:行內形式和參考形式。
不管是哪一種,連結的文字都是用 [] 來標記。

行內形式

要建立一個行內形式的連結,只要在方塊括號後面馬上接著括號並插入網址連結即可,如果你還想要加上連結的title文字,只要在網址後面,用雙引號把title文字包起來即可。
示例語法如下:

這是 [測試文本](http://example.com/ "標題") 鏈接.
[這個鏈接](http://example.net/) 沒有文本屬性.

效果如下:

這是 測試文本 鏈接.

這個鏈接 沒有文本屬性.

參考形式

參考形式的連結使用另外一個方括號接在連結文字的括號後面,而在第4行裡面要填入用以辨識連結的標籤:

語法如下:

這是參考形式的 [示範鏈接][id] .

(在文章任何地方輸入以下代碼,以下代碼不會顯示在文章內)
[id]: http://example.com/  "可選標題"

這是參考形式的 示範鏈接 .

圖片

利用 Markdown 語法添加圖片也是非常容易的事情,和鏈接的方法非常相似。只需在链接的基础上前方加一个 !

同樣圖片也用可以由兩種形式生成:行內形式和參考形式。

行內形式

語法如下:

![Markdown](https://markdown.tw/images/208x128.png)
![Markdown](https://markdown.tw/images/208x128.png "可選標題")

效果如下:

Markdown

參考形式

語法如下:

![Markdown2][id2]

(在文章任何地方輸入以下代碼,以下代碼不會顯示在文章內)
[id2]:https://markdown.tw/images/208x128.png "可選標題"

效果如下:

Markdown2

但是要留意,使用Markdown語法添加的圖片無法修改圖片的任何屬性,包括高度和寬度,如果有需要修改這些參數,還是使用 <img> 去添加圖片。


 

表格

如果你想添加表格,可以直接使用語法添加表格。
使用 |_ 來設計表格。分割線的 - 數量不限,但最少要一個。

基本語法如下:

| 姓名 | 電話 | 班級 | 興趣 |
| ------ | ------ | ------ | ------ |
|  小明 | 12345678  | 1A | 作文 |
|  小紅 | 23456781  | 2B | 繪畫 |

效果如下:

姓名 電話 班級 興趣
小明 12345678 1A 作文
小紅 23456781 2B 繪畫

除此之外,我們還可以編輯表格中的對齊方式,利用 : 來決定條目的對齊方式。
語法如下:

| 向左對齊 | 向右對齊 | 置中對齊 | 分散對齊 |
| :------| ------: | :------: | ------ |
| 測試123456789 | 測試123456789 | 測試123456789 | 測試123456789 |
| 測試12345 | 測試12345 | 測試12345 | 測試12345 |
向左對齊 向右對齊 置中對齊 分散對齊
測試123456789 測試123456789 測試123456789 測試123456789
測試12345 測試12345 測試12345 測試12345

轉義字符

如果你的描述中需要用到 markdown 的符号,比如 _ , # , * 等,但又不想它被转义,这时候可以在这些符号前加反斜杠,如 \_ , \# , \* 进行避免。
語法如下:

\_不想這裡的文本變斜體\_

\*\*不想這裡的文本被加粗\*\*

效果如下:

_不想這裡的文本變斜體_

**不想這裡的文本被加粗**

注釋

寫Markdown呢?一篇文章寫出來,總是有點草稿的,每次都忍痛割愛刪掉,可能下次還要再敲一遍。

這時候就可以使用 Markdown 的注釋,通過使用 Markdown 的注釋,這些內容就不會被 HTML 顯示出來。

[comment]: <> (This is a comment, it will not be included)
[comment]: <> (in  the output file unless you use it in)
[comment]: <> (a reference style link.)
[//]: <> (This is also a comment.)
[//]: # (This may be the most platform independent comment)

也可以用這些可愛的表情符號
用一個 tab 或 四個空格來區分注釋內容

[^_^]:
    commentted-out contents
    should be shift to right by four spaces (`>>`).

這不是注釋

[^_^]:
    1

[>_<]:
    2

[>_>]:
    3

這不是注釋

公式

當你需要在編輯器中插入數學公式時,可以使用兩個美元符 $$ 包裹 TeXLaTeX 格式的數學公式來實現。提交後,問答和文章頁會根據需要加載 Mathjax 對數學公式進行渲染。

示例語法如下:

公式一:

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$

公式二:

$$
x \href{why-equal.html}{=} y^2 + 1
$$

效果如下:

公式一:

x=b±b24ac2ax = {-b \pm \sqrt{b^2-4ac} \over 2a}

公式二:

x=y2+1x \href{why-equal.html}{=} y^2 + 1

詳細數學公式語法可以參考下面的網址

https://www.liuguogy.com/archives/markdown-mathjax-grammar.html

https://pic.plover.com/MISC/symbols.pdf

https://colobu.com/2014/08/17/MathJax-quick-reference/

http://whatbeg.com/2016/04/25/latexsyntax.html

總結

如果你看到了這裡,恭喜你,你已經掌握了Markdown 的基本語法。

可以看出Markdown語法並不複雜,就是因爲這種簡易性,讓我們可以大大提高文章的碼字速度,很簡單就可以套用常用的字體樣式。只要多加練習,配合好用的工具,寫起東西來一定會行雲流水,獲得更好的寫作體驗。

參考資料

https://en.wikipedia.org/wiki/Markdown
https://daringfireball.net/projects/markdown/syntax
https://markdown.tw/
https://www.runoob.com/markdown/md-tutorial.html