HackMD 快速入門教學

點我

回到 HackMD 教學首頁

點我

給予建議 或回報BUG

嗨！你好，歡迎使用 HackMD

HackMD 是讓你快速撰寫筆記，流暢管理知識，支援多種衍生功能的生產力工具

這篇文章，將讓你快速上手

---

• HackMD 快速入門教學
• 1．Markdown 編寫邏輯
• 2．開始寫作
• 3．Markdown 常用語法
  • 🕹 3-1．設定標題
  • 🕹 3-2．階層清單
  • 🕹 3-3．引用區塊
  • 🕹 3-4．粗體、斜體
  • 🕹 3-5．內容強調
    • 螢光筆
    • 文字顏色
    • 色塊
    • GitHub Alert
  • 🕹 3-6．插入圖片
  • 🕹 3-6．嵌入影片
• 恭喜，你已完成快速入門！
• FAQ

1．Markdown 編寫邏輯

HackMD 採用 Markdown 語法，它是僅僅使用文字與符號，就能快速排版的寫作方法。

以純文字儲存，在視覺上，也能約略看出文章脈絡，已廣泛地運用在各式網路平台。

使用 Markdown 書寫的時候，你可以直接將想法輸入到編輯器中：

• 先不對文字進行視覺上的調整 （例如：變成粗體、標題、分項目），專注把想法表達出來。
• 當內容比較完整的時候，再來使用語法排版。

也可以充分運用 HackMD 的雙欄模式，你在編輯器寫作，同時檢視「被呈現」的模樣：

• 先寫出結構，大標題、次標題、文件資訊的醒目提示
• 有個排版的基本想法，再來填充文字內容。

2．開始寫作

來到編輯頁面，可以看到上方的功能列，有個 按鈕，按下後就可以切換到雙欄模式。

雙欄模式中，左欄是編輯區域，請在此輸入文字與編輯語法；右欄是檢視區域，請在此預覽算繪後的結果。

由於 HackMD 高度重視編輯器協作體驗，你可以比較各家筆記軟體的打字流暢度。中文使用者，不會像其他軟體常遇到中文打字裂掉的問題，適合重視寫作體驗的你

3．Markdown 常用語法

千萬不要被各式各樣的語法嚇到了！

這些語法，是輔助原本的文字可以表達得更清楚。因此，就算是沒有這些語法與標記，文章還是可以閱讀的。在此說明一些基本常用的語法：標題、清單、引用區塊、粗斜體、圖片、影片。

小提示：您隨時都可以使用編輯區塊上方的工具列來快速插入語法

🕹 3-1．設定標題

當你想要將一段文字標示為標題的時候，請使用這個語法。

在行首輸入 # 符號，並在後面加上一個空白後，再輸入標題文字。

標題有分成 6 個層級，# 的數量愈多，層級越低。

你可以按照範例輸入看看：

# 第一層級標題
## 第一層級標題
### 第一層級標題
#### 第一層級標題
##### 第一層級標題
###### 第一層級標題

以上範例結果為：

小提示：覺得語法容易忘記嗎？沒關係！
HackMD 提供貼心的自動完成功能，例如：您在行首輸入 #，就會出現自動完成選單，提示您可用的標題語法！

🕹 3-2．階層清單

當你想要列舉一些項目的時候，請使用此語法。

加上項目編號，將項目縮排即可作為子清單。

清單分為有序清單與無序清單兩種。

有序清單，是項目符號會使用數字編號；無序清單，是項目符號會使用同樣的層級的符號。

你可以按照範例輸入看看：

- 無序清單
- 無序清單
    - 無序清單子清單
        - 無序清單子子清單

1. 有序清單
2. 有序清單
    1. 有序清單子清單
        1. 有序清單子子清單

以上範例結果為：

• 無序清單
• 無序清單
  • 無序清單子清單
    • 無序清單子子清單

1. 有序清單
2. 有序清單
   1. 有序清單子清單
      1. 有序清單子子清單

🕹 3-3．引用區塊

當你需要將一段文字標示為引用的時候，請使用此語法。

請在行首輸入 > 符號，並在後面加上一個空白後，再輸入引用文字，即可形成引用區塊。

如在引用區塊前多次輸入 > 符號，即是子引用區塊。

你可以按照範例輸入看看：

> 引用區塊
>> 子引用區塊
>>> 子子引用區塊

以上範例結果為：

引用區塊

子引用區塊

子子引用區塊

🕹 3-4．粗體、斜體

當你需要將一段文字以粗體或是斜體表現的時候，請用此語法。

請在文字兩端加上 * 符號，即可將文字變成粗體或是斜體

使用一個 * 為斜體；使用兩個 * 為粗體。

您可以按照範例輸入看看：

*斜體*
**粗體**

以上範例結果為：

斜體
粗體

小提示：使用編輯區塊上方的工具列，快速對選取中的文字加上格式

🕹 3-5．內容強調

當你需要強調筆記中的一個詞、一段文字等等，請依需求使用下列語法。

螢光筆

請在一段文字的前後輸入 ==，就能快速對文字套用螢光筆效果。

您可以按照範例輸入看看：

==螢光筆==

以上範例結果為：

螢光筆

文字顏色

使用 <font color="#"> 和 </font> 前後包住想要變色的文字

# 符號的後面請輸入指定的顏色代碼，常見的顏色：

• 灰色 #96999A
• 紫色 #aa57fc
• 藍色 #449df9
• 紅色 #fd4340
• 橘色 #F7A004

您可以按照範例輸入看看：

<font color="#96999A"> 灰色 </font>
<font color="#aa57fc"> 紫色 </font>
<font color="#449df9"> 藍色 </font>
<font color="#fd4340"> 紅色 </font>
<font color="#F7A004"> 橘色 </font>

以上範例結果為：

灰色
紫色
藍色
紅色
橘色

色塊

當您在編輯器輸入 ::: ，將會出現選單提示，您可以使用方向鍵上下移動快速插入色塊。

您可以按照範例輸入 ::: 看看，HackMD會秀給你看不同的顏色選項：

:::success
text
:::

以上範例結果為：

text

GitHub Alert

當您在編輯器輸入 >[!] ，請將滑鼠移到驚嘆號右側，將出現選單提示，使用上下移動方向鍵插入引用警示。

>[!Note]註記
>即使您換行仍可以繼續撰寫內容

以上範例結果為：

註記

即使您換行仍可以繼續撰寫內容

🕹 3-6．插入圖片

當你需要在筆記中加入圖片的時候，你可以將圖片直接拖曳到編輯器、複製圖片後直接在編輯器貼上，都會直接將圖片上傳到 HackMD 後自動插入圖片語法。

想上傳超過 1 MB 的圖片嗎？現在就升級 HackMD Prime 個人方案，傳高清美照也沒問題。

或是使用此語法：請先輸入 ![]() 這些文字，然後在後面的 () 中間插入圖片的網址，即可加入圖片。

你可以按照範例輸入看看：

![](https://hackmd.io/favicon.png)

以上範例結果為：

小提示：在空白之後輸入 ! 會有自動完成，提示您可用的圖片語法

🕹 3-6．嵌入影片

當你需要加入影片的時候，請使用此語法。

請先輸入 {} 這些文字，這時候會有自動完成：

接下來請按下列步驟：

1. 在自動完成中選擇您的影片來源，可能是 youtube 或是 vimeo
2. 假設你選擇 youtube，你的文字會變成 {%youtube youtubeid %}
3. 假設你的影片連結是：https://www.youtube.com/watch?v=PJuNmlE74BQ
4. 請你將文字 {%youtube youtubeid %} 中的 youtubeid 替換成你影片連結的 id，也就是 PJuNmlE74BQ
5. 你的文字最後會是：{%youtube PJuNmlE74BQ %}

以上範例結果為：

恭喜，你已完成快速入門！

你剛完成了 HackMD 的快速入門！還有非常多功能等待你探索唷

不想錯過 HackMD 的最新消息、新功能預告嗎？快按讚FB粉絲專頁或加入DC群吧~

• [e-mail]
• X (Twitter)
• Facebook
• LinkedIn
• Discord

FAQ

點擊展開問題

單獨將標點符號套用粗體效果／句中的標點符號無法套用粗體

在Markdown語言規範中，標點符號前後不可以直接標語法，除非該符號在句尾。

若有需要，你可以在文字後面多加一個空格。

例如

我想要**標注：** 粗體文字
我想要**標注？** 粗體文字
我想要**標注粗體。**

呈現效果如下

我想要標注： 粗體文字
我想要標注？ 粗體文字
我想要標注粗體。

我的筆記分享/匯出後有些圖片無法讀取，可以怎麼解決？

圖片的閱讀權限和你上傳圖片的原始筆記權限一致（當圖片網址為https://hackmd.io/）

如果想在多個筆記使用同一張圖片，記得將原始筆記調整為所有人可閱讀哦！

例如
我在Ａ筆記上傳（圖一），Ａ筆記設定只有 擁有者 可閱讀
則當我將（圖一）超連結插入Ｂ筆記，並且分享給其他人，圖片將顯示無法存取。