Obs082｜用Obsidian學會Markdown

版本: v1.0 2022/04/04
　　 v1.1 2022/10/22

來源：簡睿隨筆
教學影片：簡睿學堂 同時服用效果更佳 😄
PDF下載：Google Drive

1. Markdown是什麼？

1. Markdown是一個輕量級的標記語言，相較於複雜、繁多的HTML，Markdown更簡單、更容易使用
2. 將純文字內容賦予格式化的標記，能讓文字轉換成HTML
3. Markdown提供了易讀易寫的標記格式
4. John Gruber在2004年發明
5. 隨著科技的進步，Markdown也衍生了多個版本

2. 為什麼要學Markdown?

• Markdown應用範圍廣泛：舉凡網站、簡報、筆記、文件、書籍、電子郵件、即時通訊軟體都在使用。
• Markdown可攜性高
• Markdown具有平台獨立性

2.1. 幾個Markdown的應用

太多了，族繁不及備載，列舉一二。

• 線上Markdown編輯器：StackEdit、HackMD
• 靜態網站產生器(Static Site Generator)：Hugo、MkDocs、VuePress
• 瀏覽器擴充：
  • Email格式轉換：Markdown Here
  • 網站下載成Markdown：MarkDownload
• Windows Markdown編輯器：Markdown Monster、ghostwriter
• macOS Markdown編輯器：iA Writer、MacDown、Bear、Craft、Drafts
• Linux Markdown編輯器：ghostwriter、ReText
• 跨平台 Markdown編輯器：Typora
• iOS / Android Markdown編輯器：iA Writer、Drafts

3. Markdown的處理步驟

4. 涵蓋的標記

4.1. 區塊標記

4.2. 行內標記

5. 標題 (Heading)

5.1. 另類標題

5.2. 段落 (Paragraph)

段落間以一個空行隔開。

6. 換行 (Line break)

【精確的換行符號】設定會影響換行的行為。

7. 文字變化 (Emphasis)

7.1. 斜體

被前後一個星號(*)、一個底線(_)或 $ (非Markdown)：夾住的文字會變成斜體。

7.2. 粗體

被前後兩個星號(**)或兩個底線(__)夾住的文字會變成粗體。

7.3. 粗斜體

被前後三個星號(***)或三個底線(___)夾住的文字會變成斜體。__*兩個底線一個星號或**_兩個星號一個減號等的組合也可以用，不過不建議使用。

7.4. 刪除文字

被前後兩個波浪號(~~)夾住的文字會變成刪除樣式。

被前後兩個波浪號(`~~`)夾住的文字會變成~~刪除樣式~~。

7.5. 高亮文字

被前後兩個等號(==)夾住的文字會變成重要強調樣式。

學習Obsidian的最好方法是==開始寫==、 ==認真寫==，主題和外掛只是輔助。

7.6. 下底線

非Markdown：Markdown沒有底線格式，可以使用HTML的<u>與</u>來形成文字底線。

不要在Obsidian的外掛上花太多精力，<u>筆記本身</u>才是最重要的。

7.7. 上頂線

非Markdown：使用HTML的<ruby>等標籤。

<ruby style="ruby-position: under">漢字<rt>ㄏㄢˋ ㄗˋ</rt></ruby>
 <ruby style="ruby-position:under">電腦<rt>dian nao</ruby>
 <span style="-webkit-text-emphasis: filled red">重要內容！</span> 
 <span style="border-top: 1px solid red">重要內容！</span>

7.8. 上標字與下標字

非Markdown：Obsidian沒有直接支援上標字與下標字的語法，有兩個方法解決。

7.8.1. 方法1. MathJax

用MathJax (JavaScript display engine for LaTeX, MathML, and AsciiMath notation)語法達成(本文使用Quick Latex for Obsidian外掛)。

* $E=MC^2$
* $CO_2$

• $E=MC^2$
• $CO_2$

7.8.2. 方法2. 用HTML標籤

* E=MC<sup>2</sup>
* CO<sub>2</sub>

• E=MC²
• CO₂

7.9. 行內程式碼

行內程式碼(用一個倒引號夾住文字)也可以變化文字的顯示，有需要時也可使用。

8. 區塊引言 (Blockquotes)

1. 以「> 」(小於再加一個空白)在每行開頭以形成區塊引言。
2. 以「>> 」(兩個小於再加一個空白)在每行開頭以形成第二階層的區塊引言。
3. 區塊裡能再使用部份Markdown標記，具體能使用的標記因應用系統的實作而有不同。

> 111
>> 222 **粗體**
>>> AAA *斜體*
>>> BBB ***粗斜體***
>> 333
> 444

111

222 粗體

AAA 斜體
BBB 粗斜體
333
444

9. 列表 (Lists)

9.1. 有序列表

1. 以「數字. 」(數字、點、空白)或「數字) 」開頭
2. 數字不必照順序排列
3. 起始數字以列表第一個項目的數字開始遞增
4. 列表項目間有空行時，每個項目會自動插入空行。空行後有非列表內容時，第二個區塊會以開始項目的數字重新編號
5. 自動重新編號：按<span class="keybs">Tab</span>再按<span class="keybs">Shift+Tab</span>
6. 開頭四個空白或<span class="keybs">Tab</span>形成第二階層列表

9.2. 無序列表

1. 以「星號 」(*、空白)、「減號 」或「加號 」開頭
2. 列表項目間有空行時，每個項目會自動插入空行
3. 開頭四個空白或<span class="keybs">Tab</span>形成第二階層列表
4. 項目裡有「數字. 」(數字、點、空白)造成顯示異常，可以在點的左側加上跳脫字元反斜線

10. 程式碼 (Code)

10.1. 行內程式碼

1. 用一個倒引號夾住程式碼
2. 用兩個倒引號以顯示行內程式碼

10.2. 程式碼區塊

1. 用三個倒引號開頭，結尾行用三個倒引號開頭
2. 三個倒引號也可用波浪號（~~~）
3. 程式碼每行用至少四個空白或<span class="keybs">Tab</span>開頭

```
<kbd>Ctrl+Enter</kbd>
```

10.3. 擴充語法

開頭倒引號後可指定程式碼使用語言。

```html
<kbd>Ctrl+Enter</kbd>
```

11. 水平分隔線

三個以上的星號、減號或底線。

---

12. 網址鏈接

提示文字可省略。

💡 小技巧 如何記憶？

成語「內方外圓」→「前方後圓」

13. 圖片

14. 表格

14.1. 有對齊功能的表格

| 標題1 | 標題2 | 標題3 |
|:----|:---:|----:|
| 111 | 222 | 333 |
| 444 | 555 | 666 |

14.2. 簡單表格

標題1 | 標題2 | 標題3
--|--|--
111 | 222 | 333
444 | 555 | 666

15. 區塊代碼

段落下方插入境^區塊代碼讓內部鏈接參考使用。

16. 註腳

1. [^數字或註腳代碼]：指定註腳，自動以數字顯示
2. [^數字或註解代碼]: 說明文字：註腳說明

Markdown標記語言¹由 John Grube發明。

紅樓夢的作者是曹雪芹² ，紅樓夢又名石頭記³

17. 任務

輸入任務描述後按一個 <span class="keybs">Ctrl+Enter</span>即可快速形成任務語法。開頭字元可用減號、加號與星號。

18. 註解

不顯示在HTML裡的內容即為註解。

19. 嵌入網頁

<iframe src="網址"></iframe>

20. 第三方整合

20.1. Mermaid: 流程圖等

核心支援。

• Online FlowChart & Diagrams Editor - Mermaid Live Editor

```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!

```mermaid
pie title 本週番茄鐘
	"週一": 5
	"週二": 11
	"週三": 12
	"週四": 22
	"週五": 10
	"週六": 7
	"週日": 6
```

pie title 本週番茄鐘
	"週一": 5
	"週二": 11
	"週三": 12
	"週四": 22
	"週五": 10
	"週六": 7
	"週日": 6

20.2. Excalidraw

20.3. Diagrams

20.4. Emoji

21. YAML Front matter

預設關鍵字：

21.1. tags

• 不能用空白
• 可以用底線(_)或減號(-)當做分隔字元
• 不能全為數字：#3c可以用，但#2022無法使用
• 能用正斜線(/)形成巢狀式標籤：3c/notebook

tags: test1, test2, tet3/test3-1
tags: [ test1, test2, tet3/test3-1 ]
tags: 
  - test1 test2 tet3/test3-1 
 
tags: 
  - test1
  - test2
  - tet3/test3-1 

21.2. aliases

筆記檔名的別名，讓一篇筆記有多個名稱。

---
aliases: [Markdown用法, Markdown語法彙總]
---

21.3. cssClasses

cssClass或cssClasses皆可使用。讓本篇筆記套用特定的CSS類別。

21.4. publish

publish: true發佈到Publish網站，publish: false不發佈到Publish網站。

22. 相關鏈接

💡 解說文章(繁體中文): https://jdev.tw/blog/7066/

💡 Explanation article(English): https://quaily.com/jdevtw-en/p/obs-use-obsidian-learn-markdown

💡 解説記事(日本語): https://quaily.com/jdevtw-jp/p/obs-use-obsidian-learn-markdown

• Markdown 語法說明
• 教程-MarkDown
• Format your notes - Obsidian Help

23. 教學影片

▼ YouTube

▼ Bilibili

＃＃