HackMD教學 - HackMD

# HackMD教學 [官方教學原始碼](/E1UakUq8 "官方教學原始碼") 可以用#創建副標題來分隔每個段落，才不會看起來都同一段。編輯內容一樣用MarkDown語法 - 每點最多容納46個字元，也就是23個中文字 - 排版不見得盡如人意，留意呈現出來的結果 - 盡量不要超過三點 - 請留意分隔線，每個分隔的上一行/下一行請留白，參考如下 ``` --- ### 每個分隔的 ### 上一行/下一行 ### 請留白 --- ``` 建立流程 - 建立書本 - 新建檔案 - 分享為書本模式 - 建立無序清單連結 - 建立簡報 - 無序清單檔案 - 分享為簡報模式 - [編輯簡報] 常見錯誤 ---- - 要點選「分享的連結」才會變成書本模式，用編輯模式連結是不行的 ``` # Correct: - [](@wiimax/wryyyyyyy) # Wrong: - [](https://hackmd.io/wryyyyyyyyyyyyyyyyyyyy) ``` **1.文字下方加三等於變成目錄** ``` 目錄 === ``` 目錄下面能放介紹此筆記的目標和， **2.快速建立筆記** ``` - [筆記](/IK6LYwTdQWqFHWDFhOfOdw) ``` 只要輸入方括弧[建立筆記]裡面輸入文字，並把游標移動到最後一個字就能透過按鍵選取來快速建立筆記 >選取建立筆記並按下enter後，()裡面會自動產生新筆記的筆記代碼，也就是顯示在網址裡面的hackmd.io後面這段代碼，包含斜線/。 **3.連結說明** ``` [官方教學](/E1UakUq8 "在這輸入你想顯示的連結說明") ``` 另外網址後面用雙引號""或單引號''包覆就能形成有說明的超連結 **4.建立待辦清單** ``` - [ ]待辦 - [x] 買些沙拉 - [ ] 刷牙 - - - [x] 喝水 - [ ] ``` - [ ]待辦 - [x] 買些沙拉 - [ ] 刷牙 - - - [x] 喝水 - [ ] **5.上傳圖片** ``` ![](圖片網址) ``` 輸入!就會跑出插入圖片的提示文字，記得!前面不要有任何文字擋住。你也可以直接把圖片複製貼上或直接拖曳到編輯欄位。 **6.上傳youtube影片** ``` {%youtube youtubeid %} ``` **7.共筆時能加入評論功能** > [name=讀者]我也要來寫文章！輸入 [name=] >[name=] **8.插入表情** ``` : + emoji代碼 +: 快速打出表情圖案 ``` - 可以透過大標、次標的版型調整emoji大小。 ``` # :mask: ## :mask: :mask: ``` :point_left: **9.改變文字顏色** - 透過HTML code to change color 1. 使用 HTML 的 font 元素 <font color="#8C33FF">font color</font> 會顯示紫色 ``` <font color="#8C33FF">font color</font> ``` * 透過[color picker](https://htmlcolorcodes.com/color-picker/ "color picker") 這網站能找到對應顏色的代碼#+數字 [CSS Colors](https://www.w3schools.com/cssref/css_colors.asp) <font color="#FFD700">Hello</font> <font color="A52A2A">World</font> * 使用 -[fondawesome](https://fontawesome.com/v4/icons/) - 搜尋想要的icon，複製該html語法，直接貼上至編輯區即可。 <font color="#FFD700"> <i class="fa fa-trophy" aria-hidden="true"></i> </font> 可以像編輯網頁，比照文件屬性調整大小、顏色等 2.CSS 使用 css 的 class 功能來改變文字顏色在文件內定義 css 的作法，定義您想要的文字樣式，並將該樣式套用到文字中 <style> .purple { color: purple; } </style> <span class="purple"> Hello World</span> ``` <style> .blue { color: blue; } </style> Hello, <span class="blue">World</span> ``` **10. :::spoiler 你==我== 前後雙等於就是螢光筆 ::: :::info 妳 ::: :::danger ::: :::warning * <del>我刪除我自己</del> * * ::: :::success ::: **11.呼叫出搜尋視窗** ctrl+shift+p 呼叫出搜尋視窗來搜尋標題或標籤也會列出最近開啟過的筆記 **12.嵌入影片 ``` {%youtube youtubeid %} ``` https://www.youtube.com/watch?v=zySudOTN05I&list=PLsyeobzWxl7pe_IiTfNyr55kwJPWbgxB5&index=40 * V=後面這些代碼zySudOTN05I，&list前面這段，就是youtubeid 崁入網頁格式 <iframe width="100%" height="500" src="https://hackmd.io/features" frameborder="0"></iframe> **13. ``` - 無序清單 - 無序清單 - 無序清單子清單 - 無序清單子子清單 1. 有序清單 2. 有序清單 1. 有序清單子清單 1. 有序清單子子清單 ``` - 無序清單 - 無序清單 - 無序清單子清單 - 無序清單子子清單 > 引用區塊 >> 子引用區塊 >>> 子子引用區塊 *斜體* **粗體** **14.建立表格** |我|你 | |--|--| ||| 輸入|或 shift +(|)快速進入表格編輯模式或選取現有表格 {%hackmd zfoEnYvRQZqKUpGoVsyDJw %} **. 什麼功能 {%hackmd @你的帳號/你取的名字 %} //分享連結 https://hackmd.io/@wiimax/intro-hackmd-17 - {%hackmd /@wiimax/intro-hackmd-017 %} //編輯連結 https://hackmd.io/i0LbXWybTTapFgAPEZbO9w - {%hackmd /@wiimax/i0LbXWybTTapFgAPEZbO9w %} **插入樂譜 ```abc X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ```