# 跨平台 MackDown - HackMD ![](https://i.imgur.com/6mWct9y.png) &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;*Photo on [HackMD - Posts | Facebook](https://www.facebook.com/pg/hackmdio/posts/)* --- # 前言 前幾個禮拜小弟分享了一個跟自動化沒有關係的團隊看板工具 **Trello** 而這禮拜 小弟想要再次題外話 分享一個共享筆記的工具 **HackMD** HackMD 基本上是使用 Markdown 的語法進行編輯 會這樣說是因為 HackMD 也可以偷偷的使用 HTML 的語法 使用文字與符號快速排版的寫作方式 在視覺上也能約略看出文章脈絡 而且 HackMD 除了提供文字編輯之外 也提供瀏覽的模式,能夠即時瀏覽 包含了預覽模式、書本模式與簡報模式 小弟自己本身三種都有使用過 真的非常好用 非常便利 (用言語無法形容它的好 ...會不會太誇張 XD) 這篇主要記錄一些較為基本的操作方式 希望讓沒用過的大哥大姐能夠較快的上手 ## 分享重點 * 使用 HackMD * 文字編輯方式 * 程式編輯方式 * 留言編輯方式 * 清單編輯方式 * 瀏覽模式 * 建立團隊 * 擴充套件 * 同步 GitHub --- ## 使用 HackMD HackMD 使用方式非常簡單 開啟瀏覽器 並搜尋 `HackMD` [搜尋結果的第一筆資料就是了](https://lmgtfy.com/?q=HackMD) >>> hackmd.io 到 HackMD 的網站後進行註冊 登入後就可以使用了 覺得覺得註冊流程太過麻煩 也可以透過下方的其他應用程式登入 ![](https://i.imgur.com/fniw0Lu.png) 免費使用的情況下 功能就已經非常的足夠了 小弟今天介紹的內容也都是免費使用的功能介紹 單然如果想要使用更多的功能 也可以參考 HackMD 的收費方案 ![](https://i.imgur.com/uQnawaL.png) --- ## 文字編輯方式 因為編輯的內容在 HackMD 上使用 效果較為顯著 所以小弟除了說明之外 會在附上 HackMD 使用的結果圖片 * **標題**:在文字前面使用 `#` ~ `######` 分別是 h1~h6 * **斜體**:在文字前後使用 `*` 或是使用快捷鍵 `command`+`i` * **粗體**:在文字前後使用 `**` 或是使用快捷鍵 `command`+`b` * **粗斜體**:在文字前後使用 `***` 或是使用粗體與斜體的快捷鍵 * **底線**:在文字前後使用 `++` * **刪除線**:在文字前後使用 `~~` * **標記**:在文字前後使用 `==` * **上標**:在文字前後使用 `^` * **下標**:在文字前後使用 `~` ![](https://i.imgur.com/zpgjgJI.png) ## 程式編輯方式 * **單行代碼**:在代碼前後使用 \` * **多行代碼**:在代碼前後使用 \`\`\` * **多行代碼語言**:在代碼前後使用 \`\`\` 的第一個 \`\`\` 後面加上程式語言名稱 * **列出多行代碼語言**:在代碼前後使用 \`\`\` 的第一個 \`\`\` 最後面加上 `=` ![](https://i.imgur.com/JSQkCRR.png) * **外部引入**:使用 gist 撰寫 ![](https://i.imgur.com/astzIqt.png) ## 留言編輯方式 * **單一留言**:在留言前使用 `>` * **巢狀留言**:在留言前多次使用 `>` 使用一次就往下一層 * **標記使用者**:在留言裡輸入 `[name=<user_name>]` * **標記時間**:在留言裡輸入 `[time=<date>]` * **標記留言顏色**:在留言裡輸入 `[color=<#color_code>]` * **自訂文字顏色**:使用 html 方式編輯 `<font color="#f00">Red</font>` &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;自訂文字顏色 也可以運用在留言以外的地方 ![](https://i.imgur.com/KNnhkS6.png) ## 清單編輯方式 * **基本清單**:在字段前加上 `*` 和一格空格即可 (鍵入 Tab 可以自動到下一階) * **數字清單**:在字段前加上 `<1.>` 和一格空格即可 (鍵入 Tab 可以自動到下一階) * **代辦清單**:在字段前加上 `- [ ]` 和一格空格即可 &emsp;&emsp;&emsp;&emsp;&ensp; 標記 `- [x]` 和一格空格為已完成事項 ![](https://i.imgur.com/Gqd5O26.png) --- ## 瀏覽模式 HackMD 提供的瀏覽模式總共有四種 分別是編輯模式、預覽模式、書本模式和簡報模式 而每一種的模式所編輯的方式有些許不同 但是大致上都離不開上面所介紹過的編輯方式 如果想要選擇預覽模式 可以透過右上角的 share icon 選擇 Preview 並點擊 Preview ![](https://imgur.com/AQQ1XFo.png) * ### 編輯模式 (Edit mode) 編輯模式也就是新增一份新筆記預設的模式 該模式寫分成了三種小模式 分別是 編輯 (Edit):`control`+`option`+`e` 編輯與查看 (Both):`control`+`option`+`b` 查看 (View):`control`+`option`+`v` 或是透過 上方的按鈕來進行切換 ![](https://i.imgur.com/wxpKdP2.png) 另外編輯窗上方有一排工具列包含了上面說過的編輯方式 可以透過上方的功能進行點擊來快速使用 基本上在上面都有介紹過 只剩下後面五個中的四個功能還沒介紹 從前面到後面分別是 編輯超連結、上傳圖片、新增表格、分隔線、留言的功能(這個上面有介紹過了) * ### 預覽模式 (View mode) 預覽模式的編輯方式最單純 也就是在編輯模式下 View 所看到的內容即是預覽模式會看到的內容 [預覽模式 - Demo](https://hackmd.io/@XBlcmLl_SOSDCrTevei9wQ/r1seD_-7P) * ### 書本模式 (Book mode) 書本模式主要是將許多的筆記統整在一起 所以使用的方式都是超連結的方式 例如:`- [筆記名稱](筆記連結)` 將多個筆記整理在同一份筆記中 結果會像下面這個樣子 ![](https://i.imgur.com/cgwvetn.png) [書本模式 - Demo](https://hackmd.io/@XBlcmLl_SOSDCrTevei9wQ/Hkw67MstU/%2FrQhksE5qQ02eJRBo_npeQw) * ### 簡報模式 (Slide mode) 簡報模式的編輯方式較為特別 HackMD 提供章節方式的分頁方式 以 `---` 三個減號的分隔線區分章節 以 `----` 四個減號的分隔線區分頁面 遍及起來會像這個樣子 ![](https://i.imgur.com/oyyagYO.png) 雖然看起來很醜 但是使用簡報模式就會好很多了 而透過左右可以切章節 上下則可以切該章節的頁面 總覽會長得像這個樣子 ![](https://i.imgur.com/ZT27N8g.png) [簡報模式 - Demo](https://hackmd.io/@XBlcmLl_SOSDCrTevei9wQ/HJcGfiG4D#/1/1) ## 建立團隊 除了自己建立筆記所使用的 My WorkSpace 之外 還可以與團隊共同協作一起使用同一個 WorkSpace 新增的方式非常的方便 到導向到 HackMD 筆記總覽的頁面 點擊 Workspace 的下拉式選單 最後點擊 "**+ Create new team**" 就可以建立屬於自己團隊的 workspace 了 ![](https://i.imgur.com/8IYyvr7.png) ![](https://i.imgur.com/Ll4h12H.png) * **Team Name**:也就是 workspace 的顯示的名稱 * **Team Description**:可以稍微描述一下,雖然之後好像不會特別顯示出來 * **Team URL Path**:自行指定 team workspace 的 url 例如:輸入 `demo` 則網址就為 `https://hackmd.io/team/demo` * **Privacy**:該 teamworkspace 的觀看與使用權限 ## 擴充套件 - VSCode 如果平時就有在用 VSCode 編輯器的大哥大姐們 想必這個擴充套件在使用起來應該會更加便利~ 這個擴充套件 是使用 VSCode 來瀏覽或寫作所有 HackMD 透過 VSCode 中的 Extension 搜尋 HackMD 進行安裝 ![](https://i.imgur.com/m3YhpgT.jpg) 安裝完成後 就可以使用 HackMD 的編輯模式 在 VSCode 上進行編輯 副檔名存成 `<file_name>.md` 即可同時編輯與預覽 ![](https://i.imgur.com/hhZry0f.jpg) ## 擴充套件 - HackMD-it HackMD-it 是一個可以不用開啟 HackMD 也可以快速搜尋 釘選 或開啟 HackMD 的筆記 目前支援 Chrome、Firefox 和 Opera 這是 HackMD-it 的 GitHub 連結 [GitHub : hackmd-it-issue](https://github.com/hackmdio/hackmd-it-issues) * [chrome web store](https://chrome.google.com/webstore/detail/hackmd-it/cnephjboabhkldgfpdokefccdofncdjh) * [firefox browser add-ones](https://addons.mozilla.org/en-US/firefox/addon/hackmd-it/) * [opera add-ones](https://addons.opera.com/en/extensions/details/install-chrome-extensions/) ![](https://i.imgur.com/riKZKZC.jpg) ## 同步 GitHub 在 GitHub 中基本上都會有一份 README 的文件檔案 主要是被用來記錄一些關於該 repo 的一些資訊 而 README 的文件 也可以使用 markdown 的方式撰寫 因此 HackMD 也有相對應的功能可以使用 透過新增一份新筆記 來 pull GitHub 的 README 編輯完後在 sync 到 GitHub 上 操作上非常的好懂不會太過複雜 **Step1:** 點擊 Pull from GitHub 來編輯現有的 README 或是 點擊 Push to GitHub 來新增一份 markdown 檔案 (小弟這邊使用 Pull from GitHub 來進行分享) ![](https://i.imgur.com/OQ6UNhK.png) 第一次使用會需要登入 GitHub 才有辦法取得資料 **Step2:** 選擇想要更改的檔案位置 ![](https://i.imgur.com/0d8kBHM.png) **Step3:** 編輯完成後 透過 menu 中的 GitHub Sync ![](https://i.imgur.com/tFBdtLj.png) **Step4:** 點擊上方工具列的 Push 將更改的內容更新上去 ![](https://i.imgur.com/JVSM4XR.png) **Step5:** 設置更改內容的相關資訊 包含 branch, name 和 description ![](https://i.imgur.com/UODExqX.png) Push 成功後 HackMD 也會有 alert 通知 GitHub 也會多一條 Commit 為剛剛使用 HackMD push 的內容 --- # 結尾 以上是這週小弟分享 HackMD 的內容 當然 HackMD 的功能不只如此 還有很多好用的功能 只是礙於篇幅過長且有些功能較不常使用 小弟只能忍痛割捨 挑選一些常用實用的來做分享 如果有大哥大姐使用過更方便更好用的功能 也歡迎再一起分享 或是有些功能使用上不明白 也可以再一起討論~ 有疑問或是有錯誤,還請各位大哥大姐提點。 小弟將繼續往下週邁進。 ─=≡Σ((( つ•̀ω•́)つ --- # 參考文件 **官方網站 (載點)** - [HackMD - Collaborative Markdown Knowledge Base](https://hackmd.io/) - [HackMD - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=HackMD.vscode-hackmd) - [GitHub : hackmd-it-issue](https://github.com/hackmdio/hackmd-it-issues) - [HackMD-it: chrome web store](https://chrome.google.com/webstore/detail/hackmd-it/cnephjboabhkldgfpdokefccdofncdjh) - [HackMD-it: firefox browser add-ones](https://addons.mozilla.org/en-US/firefox/addon/hackmd-it/) - [HackMD-it: opera add-ones](https://addons.opera.com/en/extensions/details/install-chrome-extensions/) **相關文章** * [HackMD 使用教學](https://hackmd.io/c/tutorials-tw/%2Fs%2Ftutorials-tw) * [HackMD - 文字編輯方式](https://hackmd.io/VrpLGWhjRgaklUUfbzM5ww?view) * [預覽模式 - Demo](https://hackmd.io/@XBlcmLl_SOSDCrTevei9wQ/r1seD_-7P) * [書本模式 - Demo](https://hackmd.io/@XBlcmLl_SOSDCrTevei9wQ/Hkw67MstU/%2FrQhksE5qQ02eJRBo_npeQw) * [簡報模式 - Demo](https://hackmd.io/@XBlcmLl_SOSDCrTevei9wQ/HJcGfiG4D#/1/1) ###### tags: `鼠年全馬鐵人挑戰`