Skip to main content

MD/HTML 基礎篇

· 3 min read

前言​

在使用 Docusaurus 建立文件或部落格時，最常用到的就是 Markdown 語法。
這篇文章介紹最常用的 Markdown 語法、Docusaurus 特有語法以及基礎 HTML應用。
將來有機會的話，會分享CSS或MDX，利用客製化、樣式調整來讓頁面更豐富，敬請期待！！

本文目錄​

1. 標題​

語法：

# H1 標題
## H2 標題
### H3 標題
#### H4 標題
##### H5 標題
###### H6 標題

示範

H2 標題​

H3 標題​

H4 標題​

H5 標題​
H6 標題​

2. 文字樣式​

**粗體**
*斜體*
~~刪除線~~
<u>底線</u>

示範

粗體
斜體
刪除線
底線

3. 進階文字樣式​

上標、下標
H<sub>2</sub>O
2<sup>10</sup>

螢光筆重點
<mark>重點</mark> 

鍵盤按鈕樣式
<kbd>Ctrl</kbd> + <kbd>C</kbd>  <kbd>Ctrl</kbd> + <kbd>V</kbd>
示範

H2O 210

重點

Ctrl + C Ctrl + V

4. 列表​

- 無序列表
- 無序列表
1. 有序列表
2. 有序列表
- [ ] （未完成）
- [x] （已完成）

示範
  • 無序列表
  • 無序列表
  1. 有序列表
  2. 有序列表
  • （未完成）
  • （已完成）

5. 表格​

| 標題 1 | 標題 2 | 標題 3 |
| ------ | ------ | ----- |
| 內容 1 | 內容 2 | 內容 3 |

示範
標題 1標題 2標題 3
內容 1內容 2內容 3

6. 提示區塊​

:::note[自訂標題]
一般筆記內容
:::

:::tip[自訂標題]
實用技巧內容
:::

:::info[自訂標題]
資訊說明內容
:::

:::warning[自訂標題] 
警告事項內容
:::

:::caution[自訂標題] 
注意事項內容
:::

:::danger[自訂標題] 
危險/嚴重警告內容
:::
自訂標題

一般筆記內容

自訂標題

實用技巧內容

自訂標題

資訊說明內容

自訂標題

警告事項內容

自訂標題

注意事項內容

自訂標題

危險/嚴重警告內容

7. 放置圖片和連結​

連結：[標題](URL連結或本地路徑)
圖片：![替代文字](URL連結或本地路徑)
示範

yt影片

替代文字

8. 引用和程式碼​

> 引用文字
`程式碼`
```程式碼區塊```
示範

引用文字

程式碼

9. 折疊區塊​

<details>
  <summary>點擊展開更多資訊</summary>
  
  詳細內容
</details>
示範
點擊展開更多資訊

詳細內容

10. docusaurus裡特有注意事項​

info

1.單一標籤要加斜線 /​

例如：換行 傳統寫法 <br>

Docusaurus寫法 <br/>

每一個標籤都必須有結尾，尾巴一定要加上 /


2.內聯樣式 兩層大括號 {{ }}​

例如：給文字加顏色或調大小

傳統寫法 <span style="color: red; font-size: 16px;">紅色文字</span>

Docusaurus寫法 <span style={{ color: 'red', fontSize: '16px' }}>紅色文字</span>

要用兩層大括號 {{ }}


3.記得空行​

列表前、HTML 標籤包覆 Markdown 時、提示區塊內部、段落換行等。記得「前後各空一行」

謝謝大家​

有任何問題或建議，歡迎寫信聯絡我！ 信箱：aa10200809@gmail.com