iT邦幫忙

3

常用 Markdown 語法（Hexo 適用）

markdown hexo blog
糖米 2023-06-19 09:48:00 ‧ 1290 瀏覽

  • 分享至 

  • xImage
    •  

為了寫 Hexo 部落格需要大量使用 Markdown 語法，就以第一篇文章來練習吧！(ﾉ>ω<)ﾉ
由於 Markdown 版本的關係，部分樣式在 iT 邦幫忙網頁中無法正確呈現，但都會附上程式碼給大家參考～

主標題

主標題
===

副標題

副標題
---

標題 h1~h6

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

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

# h1
## h2
### h3
#### h4
##### h5
###### h6

引言

引言

第二層引言

第三層引言

> 引言
>> 第二層引言
>>> 第三層引言

字體效果

斜體字

# 以下兩種寫法皆可
*斜體字*
_斜體字_

粗體字

# 以下兩種寫法皆可
**粗體字**
__粗體字__

斜粗體

***斜粗體***

刪除線

~~刪除線~~

文字上標

一般文字^上標^
# 在 Hexo 中需使用以下語法
一般文字<sup>上標</sup>

文字下標

一般文字~下標~
# 在 Hexo 中需使用以下語法
一般文字<sub>下標</sub>

底線

++底線++
# 在 Hexo 中需使用以下語法
<u>底線</u>

螢光標記

==螢光標記==
# 在 Hexo 中需使用以下語法
<mark>螢光標記</mark>

列表

無序清單

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

  • HTML
  • CSS
  • JavaScript
# 以下三種符號皆可，需注意在同一個列表中混用符號的話，項目之間會有空白間距
- HTML
- CSS
- JavaScript

+ HTML
+ CSS
+ JavaScript

* HTML
* CSS
* JavaScript

巢狀無序清單

  • HTML
    • CSS
      • JavaScript
- HTML
    - CSS
        - JavaScript

有序清單

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

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

巢狀有序清單

  1. HTML
  2. CSS
    1. JavaScript
      1. Bootstrap
1. HTML
2. CSS
    1. JavaScript
        1. Bootstrap

CheckBox

[ ]  沒有勾選
[x]  勾選

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

  1. 打開命令提示字元，進入專案的根目錄執行以下指令
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 加入以下配置
# 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 伺服器
hexo s -g

就會有美美的 CheckBox 囉！

程式碼

行內程式碼

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

關於 `<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>

<!-- 前方縮排 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> 結構。

<!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>

``` 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>
```

分隔線

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

<!-- 以下方式皆可 -->
* * *
***
*****
- - -
---------------------------------------

超連結

文字超連結

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

[文字](網址)

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

簡易超連結

https://olivialin21.github.io/

<網址>

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

表格

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

圖片

插入圖片

糖米

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

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

點擊連至外部網頁

糖米

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

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

跳脫字元

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

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

參考資料

關於作者

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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
greenriver
iT邦研究生 5 級 ‧ 2023-06-21 08:45:39

謝謝分享，
收穫無窮~
學到一些比較少用到的新知
像是主標題跟副標題，
點擊連至外部網頁
上下標等
/images/emoticon/emoticon41.gif

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙