HackMD 快速入門教學 === {%hackmd zfoEnYvRQZqKUpGoVsyDJw %} 嗨!您好,歡迎使用 HackMD :smile: **HackMD 是能讓您快速撰寫知識,並輕鬆管理的平台** 在此為您介紹基本功能,以及如何快速上手 :100: 觀念 === HackMD 採用 Markdown 語法,它是能夠使用文字與符號快速排版的寫作方式,採用純文字儲存,在視覺上也能約略看出文章脈絡,目前已廣泛地運用在各式網路平台。 使用 Markdown 書寫的時候,**建議您直接將想法輸入到編輯器中**,先避免對文字進行視覺上的調整 (例如:變成粗體、斜體、標題、分項目等),專注在把想法表達出來,當內容比較完整的時候,再來使用語法排版。 開始寫作 === 來到編輯頁面,可以看到上方的功能列,有個 <i class="fa fa-columns"></i> 按鈕,按下後就可以切換到**雙欄模式**。雙欄模式中,左欄是編輯區域,請在此輸入文字與編輯語法;右欄是檢視區域,請在此預覽算繪後的結果。 ![](https://i.imgur.com/DBRXsw9.png) 語法 === 千萬不要被各式各樣的語法嚇到了!這些語法是輔助原本的文字可以表達得更清楚,因此就算是沒有這些語法與標記,文章還是可以閱讀的。在此說明一些基本常用的語法。 :::info :bulb: 小提示:您隨時都可以使用編輯區塊上方的工具列來快速插入語法 ![](https://i.imgur.com/Cnle9f9.png) ::: 標題 --- 當您想要將一段文字標示為標題的時候,請使用這個語法。 請在行首輸入 `#` 符號,並在後面加上一個空白後,再輸入標題文字。 標題有分成 6 個層級,`#` 的數量愈多,層級越低。 您可以按照範例輸入看看: ``` # 第一層級標題 ## 第一層級標題 ### 第一層級標題 #### 第一層級標題 ##### 第一層級標題 ###### 第一層級標題 ``` 以上範例結果為: # 第一層級標題 ## 第一層級標題 ### 第一層級標題 #### 第一層級標題 ##### 第一層級標題 ###### 第一層級標題 :::info :bulb: 小提示:覺得語法容易忘記嗎?沒關係! HackMD 提供貼心的自動完成功能,例如:您在行首輸入 `#`,就會出現自動完成選單,提示您可用的標題語法! ![](https://i.imgur.com/fyFgCez.png =300x) ::: 清單 --- 當您想要列舉一些項目的時候,請使用此語法,並且可以加上項目編號,將項目縮排即可作為子清單。 清單分為**有序清單**與**無序清單**兩種。有序清單是項目符號會使用數字編號;無序清單是項目符號會使用同樣的層級的符號。 您可以按照範例輸入看看: ``` - 無序清單 - 無序清單 - 無序清單子清單 - 無序清單子子清單 1. 有序清單 2. 有序清單 1. 有序清單子清單 1. 有序清單子子清單 ``` 以上範例結果為: - 無序清單 - 無序清單 - 無序清單子清單 - 無序清單子子清單 1. 有序清單 2. 有序清單 1. 有序清單子清單 1. 有序清單子子清單 引用區塊 --- 當您需要將一段文字標示為引用的時候,請使用此語法。 請在行首輸入 `>` 符號,並在後面加上一個空白後,再輸入引用文字,即可形成引用區塊。如在引用區塊前多次輸入 `>` 符號,即是子引用區塊。 您可以按照範例輸入看看: ``` > 引用區塊 >> 子引用區塊 >>> 子子引用區塊 ``` 以上範例結果為: > 引用區塊 >> 子引用區塊 >>> 子子引用區塊 粗體、斜體 --- 當您需要將一段文字以粗體或是斜體表現的時候,請用此語法。 請在文字兩端加上 `*` 符號,即可將文字變成粗體或是斜體 使用一個 `*` 為斜體;使用兩個 `*` 為粗體。 您可以按照範例輸入看看: ``` *斜體* **粗體** ``` 以上範例結果為: *斜體* **粗體** :::info :bulb: 小提示:使用編輯區塊上方的工具列,快速對選取中的文字加上格式 ![](https://i.imgur.com/Cnle9f9.png) ::: 圖片 --- 當您需要在筆記中加入圖片的時候,請使用此語法。 請先輸入 `![]()` 這些文字,然後在後面的 `()` 中間插入圖片的網址,即可加入圖片。 您也可以將圖片直接拖曳到編輯器、複製圖片後直接在編輯器貼上,都會直接將圖片上傳到 [imgur](https://imgur.com/) 後自動插入圖片語法。 您可以按照範例輸入看看: ``` ![](https://hackmd.io/favicon.png) ``` 以上範例結果為: ![](https://hackmd.io/favicon.png) :::info :bulb: 小提示:在空白之後輸入 `!` 會有自動完成,提示您可用的圖片語法 ![](https://i.imgur.com/sZJf6AJ.png =400x) ::: 影片 --- 當您需要加入影片的時候,請使用此語法。 請先輸入 `{}` 這些文字,這時候會有自動完成: ![](https://i.imgur.com/e2dWOvX.png =300x) 接下來請按下列步驟: 1. 在自動完成中選擇您的影片來源,可能是 youtube 或是 vimeo 2. 假設您選擇 youtube,您的文字會變成 `{%youtube youtubeid %}` 3. 假設您的影片連結是:`https://www.youtube.com/watch?v=PJuNmlE74BQ` 4. 請您將文字 `{%youtube youtubeid %}` 中的 `youtubeid` 替換成您影片連結的 id,也就是 `PJuNmlE74BQ` 5. 您的文字最後會是:`{%youtube PJuNmlE74BQ %}` 以上範例結果為: {%youtube PJuNmlE74BQ %} :tada: 恭喜您完成快速入門了! :tada: === 以上就是 <i class="fa fa-file-text"></i> HackMD 的快速入門! 還有非常多功能等待您探索 :mag_right: 如果您還想知道更多用法,請至下面連結: - [Features 功能簡介](https://hackmd.io/features) - [YAML Metadata](https://hackmd.io/yaml-metadata) - [Slide Example 簡報模式範例](https://hackmd.io/slide-example) - [Book Example 書籍模式範例](https://hackmd.io/book-example) ###### tags: `tutorials`