Try   HackMD

HackMD 快速入門教學

嗨！您好，歡迎使用 HackMD

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

HackMD 是能讓您快速撰寫知識，並輕鬆管理的平台
在此為您介紹基本功能，以及如何快速上手
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

觀念

HackMD 採用 Markdown 語法，它是能夠使用文字與符號快速排版的寫作方式，採用純文字儲存，在視覺上也能約略看出文章脈絡，目前已廣泛地運用在各式網路平台。

使用 Markdown 書寫的時候，建議您直接將想法輸入到編輯器中，先避免對文字進行視覺上的調整 (例如：變成粗體、斜體、標題、分項目等)，專注在把想法表達出來，當內容比較完整的時候，再來使用語法排版。

開始寫作

來到編輯頁面，可以看到上方的功能列，有個 按鈕，按下後就可以切換到雙欄模式。雙欄模式中，左欄是編輯區域，請在此輸入文字與編輯語法；右欄是檢視區域，請在此預覽算繪後的結果。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

語法

千萬不要被各式各樣的語法嚇到了！這些語法是輔助原本的文字可以表達得更清楚，因此就算是沒有這些語法與標記，文章還是可以閱讀的。在此說明一些基本常用的語法。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
小提示：您隨時都可以使用編輯區塊上方的工具列來快速插入語法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

標題

當您想要將一段文字標示為標題的時候，請使用這個語法。
請在行首輸入 # 符號，並在後面加上一個空白後，再輸入標題文字。
標題有分成 6 個層級，# 的數量愈多，層級越低。

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

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

以上範例結果為：

第一層級標題

第一層級標題

第一層級標題

第一層級標題

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
小提示：覺得語法容易忘記嗎？沒關係！
HackMD 提供貼心的自動完成功能，例如：您在行首輸入 #，就會出現自動完成選單，提示您可用的標題語法！

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

清單

當您想要列舉一些項目的時候，請使用此語法，並且可以加上項目編號，將項目縮排即可作為子清單。
清單分為有序清單與無序清單兩種。有序清單是項目符號會使用數字編號；無序清單是項目符號會使用同樣的層級的符號。

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

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

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

以上範例結果為：

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

引用區塊

當您需要將一段文字標示為引用的時候，請使用此語法。
請在行首輸入 > 符號，並在後面加上一個空白後，再輸入引用文字，即可形成引用區塊。如在引用區塊前多次輸入 > 符號，即是子引用區塊。

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

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

以上範例結果為：

引用區塊

子引用區塊

子子引用區塊

粗體、斜體

當您需要將一段文字以粗體或是斜體表現的時候，請用此語法。
請在文字兩端加上 * 符號，即可將文字變成粗體或是斜體
使用一個 * 為斜體；使用兩個 * 為粗體。

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

*斜體*
**粗體**

以上範例結果為：

斜體
粗體

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
小提示：使用編輯區塊上方的工具列，快速對選取中的文字加上格式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

圖片

當您需要在筆記中加入圖片的時候，請使用此語法。
請先輸入 ![]() 這些文字，然後在後面的 () 中間插入圖片的網址，即可加入圖片。
您也可以將圖片直接拖曳到編輯器、複製圖片後直接在編輯器貼上，都會直接將圖片上傳到 imgur 後自動插入圖片語法。

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

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

以上範例結果為：

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
小提示：在空白之後輸入 ! 會有自動完成，提示您可用的圖片語法

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

影片

當您需要加入影片的時候，請使用此語法。
請先輸入 {} 這些文字，這時候會有自動完成：

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

接下來請按下列步驟：

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

以上範例結果為：

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
恭喜您完成快速入門了！
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

以上就是 HackMD 的快速入門！
還有非常多功能等待您探索

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

如果您還想知道更多用法，請至下面連結：

tags: tutorial
Last changed by 
 
Laravel Taiwan
0
4
13216
Published on HackMD