糖米's Blog
0%

常用 Markdown 語法（Hexo 適用）

發表於 更新於 分類於 Disqus：

為了寫部落格需要大量使用 Markdown 語法，就以第一篇文章來練習吧！d(`･∀･)b

主標題

1
2
主標題
===

副標題

1
2
副標題
---

標題 h1~h6

需依標題重要性從 h1 ~ h6 依序使用，字體大小也會隨重要性由大至小呈現，用法同 HTML 的 <h1>、<h2>、<h3>、<h4>、<h5>、<h6> 標籤。

須注意一個網頁中只能有唯一一個最重要的 h1 標籤！

1
2
3
4
5
6
# h1
## h2
### h3
#### h4
##### h5
###### h6

引言

引言

第二層引言

第三層引言

1
2
3
> 引言
>> 第二層引言
>>> 第三層引言

字體效果

斜體字

1
2
3
<!-- 以下兩種寫法皆可 -->
*斜體字*
_斜體字_

粗體字

1
2
3
<!-- 以下兩種寫法皆可 -->
**粗體字**
__粗體字__

斜粗體

1
***斜粗體***

刪除線

1
~~刪除線~~

一般文字上標

1
2
3
一般文字^上標^
<!-- 在 Hexo 中需使用以下語法 -->
一般文字<sup>上標</sup>

一般文字下標

1
2
3
一般文字~下標~
<!-- 在 Hexo 中需使用以下語法 -->
一般文字<sub>下標</sub>

底線

1
2
3
++底線++
<!-- 在 Hexo 中需使用以下語法 -->
<u>底線</u>

螢光標記

1
2
3
==螢光標記==
<!-- 在 Hexo 中需使用以下語法 -->
<mark>螢光標記</mark>

列表

無序清單

用於不需要依序排列的清單，例如：購物清單。
在 HTML 中對應的標籤為 <ul> 與 <li> 的列表標籤組合。

  • HTML
  • CSS
  • JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 以下三種符號皆可，需注意在同一個列表中混用符號的話，項目之間會有空白間距 -->
- HTML
- CSS
- JavaScript

+ HTML
+ CSS
+ JavaScript

* HTML
* CSS
* JavaScript

巢狀無序清單

  • HTML
    • CSS
      • JavaScript
1
2
3
- HTML
    - CSS
        - JavaScript

有序清單

用於需要依序排列的清單，例如：排名。
在 HTML 中對應的標籤為 <ol> 與 <li> 的列表標籤組合。

  1. HTML
  2. CSS
  3. JavaScript
1
2
3
4
<!-- 項目符號會以第一個項目的數字為準遞增。 -->
1. HTML
2. CSS
3. JavaScript
  1. HTML
  2. CSS
  3. JavaScript
1
2
3
4
<!-- 因第一個項目的數字為 8，就算後續數字順序亂打，也會從 8 開始遞增排列 -->
8. HTML
3. CSS
5. JavaScript

巢狀有序清單

  1. HTML
  2. CSS
    1. JavaScript
      1. Bootstrap
1
2
3
4
1. HTML
2. CSS
    1. JavaScript
        1. Bootstrap

CheckBox


1
2
[ ]  沒有勾選
[x]  勾選

需注意由於 Hexo 預設的 Markdown 渲染器 hexo-renderer-marked 不支援 CheckBox 樣式，若要實現的話需依照以下步驟：

  1. 打開命令提示字元，進入專案的根目錄執行以下指令
1
2
3
4
npm un hexo-renderer-marked --save # 刪除 Hexo 預設 Markdown 引擎
npm i hexo-renderer-markdown-it --save # 安装 markdown-it
cd node_modules/hexo-renderer-markdown-it/
npm install markdown-it-checkbox --save # 安裝支援 CheckBox 樣式的插件 markdown-it-checkbox
  1. 打開 Hexo 專案根目錄中的 _config.yml 加入以下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true # Doesn't escape HTML content so the tags will appear as html.
    xhtmlOut: false # Parser will not produce XHTML compliant code.
    breaks: true # Parser produces `<br>` tags every time there is a line break in the source document.
    linkify: false # Returns text links as text.
    typographer: true # Substitution of common typographical elements will take place.
    quotes: '“”‘’' # "double" will be turned into “single”
                   # 'single' will be turned into ‘single’
  plugins:
    - markdown-it-abbr
    - markdown-it-checkbox
    - markdown-it-emoji
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
  anchors:
    level: 2 # Minimum level for ID creation. (Ex. h2 to h6)
    collisionSuffix: 'v' # A suffix that is prepended to the number given if the ID is repeated.
    permalink: true # If true, creates an anchor tag with a permalink besides the heading.
    permalinkClass: header-anchor # Class used for the permalink anchor tag.
    permalinkSymbol: ¶ # The symbol used to make the permalink.
  1. 重啟 Hexo 伺服器
1
hexo s -g

就會有美美的 CheckBox 囉！

程式碼

行內程式碼

關於 <p>行內程式碼</p> 的使用技巧。

1
關於 `<p>行內程式碼</p>` 的使用技巧。

程式碼區塊（在 Hexo 套用 Next 主題的情況下，無行數標示）

在 HTML 中會轉換成 <pre><code>程式</pre></code> 結構。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 前方縮排 4 個空白，或是 1 個 tab -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
    </html>

程式碼區塊（在 Hexo 套用 Next 主題的情況下，有行數標示）

在 HTML 中會轉換成 <pre><span>程式</span></code> 結構。

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
``` HTML（這裡可以寫對應的程式語言，在顏色呈現上會隨著語言有差異）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
```

分隔線

行內需有三個（含）以上的符號，且同行中不能有其他文字內容，但符號間可以有空格。

1
2
3
4
5
6
<!-- 以下方式皆可 -->
* * *
***
*****
- - -
---------------------------------------

超連結

文字超連結

歡迎來到 糖米's Blog 技術分享部落格。

1
2
3
4
[文字](網址)

歡迎來到 [糖米\'s Blog](https://olivialin21.github.io/) 技術分享部落格。
<!-- 因「'」為特殊符號，前方需加上「\」避免觸發 Markdown 樣式 -->

簡易超連結

https://olivialin21.github.io/

1
2
3
<網址>

<https://olivialin21.github.io/>

表格

欄位1 欄位2 欄位3
置左 置右 置中 
1
2
3
| 欄位1 | 欄位2 | 欄位3 |
| :-- | --: |:--:|
| 置左 | 置右 | 置中 |

圖片

插入圖片

糖米

1
2
3
![圖片敘述 alt](圖片路徑 "游標顯示")

![糖米](https://raw.githubusercontent.com/olivialin21/olivialin21.github.io/master/images/olivialin21.png "哈囉～我是糖米")

點擊連至外部網頁

糖米

1
2
3
[![圖片敘述 alt](圖片路徑)](連結網址)

[![糖米](https://raw.githubusercontent.com/olivialin21/olivialin21.github.io/master/images/olivialin21.png)](https://raw.githubusercontent.com/olivialin21/olivialin21.github.io/master/images/olivialin21.png)

跳脫字元

在特殊符號前方加上 \ 避免觸發 Markdown 樣式。

  • \ 反斜線
  • ` 反引號
  • * 星號
  • _ 底線
  • {} 大括號
  • [] 中括號
  • () 小括號
  • # 井字號
  • + 加號
  • - 減號
  • . 英文句點
  • ! 驚嘆號

參考資料

關於作者

大家好我是糖米，持續在精進網頁前端 + 後端的準自由工作者 😄
希望能透過撰寫技術文章紀錄學習過程，歡迎大家留言提供回饋。
所有文章都會同步發布在 iT 邦幫忙以及 Medium 喔！