--- title: HackMD入門筆記 tags: 公開筆記, .md description: --- # HackMD入門筆記 <!-- 深色模式 {%hackmd BJrTq20hE %} --> > :::spoiler 本篇參考來源</br> > [HackMD 使用教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Fquick-start-tw#1%EF%BC%8E%E5%9F%BA%E6%9C%AC%E9%82%8F%E8%BC%AF)</br> > [十分鐘快速掌握 Markdown](https://wcc723.github.io/development/2019/11/23/ten-mins-learn-markdown/)</br> > [簡報模式](https://hackmd.io/@emisjerry/H1oIcbWIB?print-pdf#/)</br> > [進階模式](https://hackmd.io/@chiaoshin369/Shinbook/https%3A%2F%2Fhackmd.io%2F%40chiaoshin369%2Fhackmd)</br> > ::: ## 標題 * ### 語法 ``` = # h1標題 ## h2標題 ### h3標題 #### h4標題 ##### h5標題 ###### h6標題 ``` * ### 呈現效果 --- > # h1標題 > ## h2標題 > ### h3標題 > #### h4標題 > ##### h5標題 > ###### h6標題 --- ## 階層清單 * ### 語法 `-`、`+`、`*`效果是一樣的 ``` markdown= - 無序清單 + 無序清單2 * 無序清單3 * 無序子清單 * 無序子子清單 1. 有序清單 1. 有序子清單 1. 有序子子清單 2. 有序子子清單 ``` * ### 呈現效果 --- > - 無序清單 > + 無序清單2 > * 無序清單3 > * 無序清單子清單 > * 無序子子清單 > 1. 有序清單 > 1. 有序子清單 > 1. 有序子子清單 > 2. 有序子子清單 --- ## 引用區塊 * ### 語法 ``` markdown= > 引用區塊 >> 引用子區塊 >>> 引用子子區塊 ``` * ### 呈現效果 --- > > 引用區塊 > >> 引用子區塊 > >>> 引用子子區塊 --- ## 粗體、斜體 * ### 語法 ``` markdown= *斜體* **粗體** _斜體_ __粗體__ ``` * ### 呈現效果 --- > *斜體* > **粗體** > _斜體_ > __粗體__ --- ## 連結 * ### 語法 `[顯示文字](連結路徑)` ``` markdown= [Google](https://www.google.com.tw/) ``` * ### 呈現效果 --- > [Google](https://www.google.com.tw/) --- ## 插入圖片 * ### 語法 `![說明文字](圖片網址)` 說明文字非必填，通常作為` hover 後的提示文字`或` SEO 增強`使用 ``` markdown= ![](https://hackmd.io/favicon.png) ``` * ### 呈現效果 --- > ![](https://hackmd.io/favicon.png) --- ## 嵌入影片 1. 請先輸入`{}`，這時候會出現自動完成的選項 ![](https://i.imgur.com/e2dWOvX.png) 2. 選擇影片來源 3. 如果選youtube，文字就會變成`{%youtube youtubeid %}` 4. 如果影片連結是：`https://www.youtube.com/watch?v=PJuNmlE74BQ` 5. 把`youtubeid`改成連結id，也就是`PJuNmlE74BQ` 6. 最後你會得到`{%youtube PJuNmlE74BQ %}` * ### 語法 ``` markdown= {%youtube PJuNmlE74BQ %} ``` * ### 呈現效果 --- > {%youtube PJuNmlE74BQ %} --- ## 程式碼區塊 * ### 語法 1. 用三個連續的反引號` ``` `作為程式碼區塊的開頭與結尾 2. 可在第一行補上特定程式碼語言名稱，將套用該語言的Highlight方式 3. 在程式碼語言後方加上`=`可以顯示行號 4. 在`=`後再加上數字可改變起始行號 5. 使用`=+`可接續上一段區塊的行號 ``` = ``` javascript=201 for (let i = 0; i < 10; i++) { setTimeout(function () { console.log('這執行第' + i + '次'); }, 0); } ``` ``` javascript=+ var s = "JavaScript syntax highlighting"; alert(s); ``` ``` * ### 呈現效果 --- > ``` javascript=201 > for (let i = 0; i < 10; i++) { > setTimeout(function () { > console.log('這執行第' + i + '次'); > }, 0); > } > ``` > ``` javascript=+ > var s = "JavaScript syntax highlighting"; > alert(s); > ``` --- ## 分隔線 使用三個連續符號表示，`---`、`***`、`___` * ### 語法 ``` markdown= --- *** ___ ``` * ### 呈現效果 --- > --- > *** > ___ --- ## 表格 概念上就是用`|`和`-`兩種符號畫出表格，`:`可以置中對齊，或是使用[表格工具](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-table-tw)快速建立表格 > 使用上對齊較麻煩，若環境許可使用HTML的表格標籤也不錯 * ### 語法 ``` markdown= | a | b | c | |:---:|---|---| | d | e | f | ``` ``` html= <table> <tr align="center" valign="center"> <td>a</td> <td>b</td> </tr> <tr align="center" valign="center"> <td>c</td> <td>d</td> </tr> </table> ``` * ### 呈現效果 --- > | a | b | c | > |:---:|---|---| > | d | e | f | --- --- > <table> > <tr align="center" valign="center"> > <td>a</td> > <td>b</td> > </tr> > <tr align="center" valign="center"> > <td>c</td> > <td>d</td> > </tr> > </table> --- ## 螢光筆 * ### 語法 ``` markdown= ==要標色的文字== ``` * ### 呈現效果 <!----> --- > ==要標色的文字== --- ## 色塊 * ### 語法 1. 打上三個冒號 ::: 之後會自動出現「色塊」選項。 2. <font color="#0f0">success</font> / <font color="#00f">info</font> / <font color="#ff0">warning</font> / <font color="#f00">danger</font> 分別會對應不同顏色。 3. `spoiler`則是可收起的內容 ``` markdown= :::success ==色塊==內的文字也支援**md**語法 ::: :::spoiler 顯示的文字 隱藏的文字 ::: ``` * ### 呈現效果 --- > :::success > ==色塊==內的文字也支援**md**語法 > ::: > :::spoiler 顯示的文字 > 隱藏的文字 > ::: --- <!-- ## 段落標題 * ### 語法 ``` markdown= ``` * ### 呈現效果 --- > --- -->