HackMD 取代 Hackpad 的中文版 Markdown 共筆平台上手教學


當你需要跟其他人一起快速共同編輯自己的筆記、文件時,有很多雲端服務可以滿足你的需求,例如我在電腦玩物推薦過幾次的「 Quip 」,或是使用簡易版的「 Google Keep 」,當然也可以用「 Google Docs 」。

但是如果想要找一款特別適合工程師、程序員需求的共筆服務,方便「貼上與顯示程式碼」,筆記過程可以「全程使用 Markdown 」,那麼之前很受歡迎的服務就是「 Hackpad 」。不過 Hackpad 被 Dropbox 收購後,目前雖然還是可以使用,但看起來主力團隊應該是投入了最新的「 Dropbox Paper 」的開發,而 Dropbox Paper 反而有點失去 Hackpad 簡潔快速的特色。

這時候,或許可以試試看由台灣團隊開發,在 2015 年初推出至今,仍然持續維護改版的「 HackMD 」,它的特色就是完整支援 Markdown 與各種程式碼、圖表語法,不一定需要登入就能快速開始共筆編輯,運作速度流暢,而且有完整中文版介面與解說。

「 HackMD 」甚至在不斷的改進中,還支援了一些很棒的功能,像是可以切換到簡報模式,支援上傳圖檔,可以調整分享權限,而且目前還是完全免費。




如果你對「 HackMD 」感興趣,可以先看看打開下面網頁,看看我用「 HackMD 」製作的本文大綱草稿。為了避免被隨意修改,所以我關閉了共同編輯功能,但你還是可以從下面文件查看語法與效果、測試簡報模式等。


打開上方連結後,你可以嘗試在左上方切換[檢視]、[雙欄]、[編輯]等模式,其中[雙欄]模式可以同時查看原始語法,以及顯示的效果。

你也可以利用右上方的[選單]打開[簡報模式],看看「 HackMD 」的筆記自動轉成簡報的效果。





1. 跨平台、跨裝置協同合作編輯


你可以在任何裝置用瀏覽器打開「 HackMD 」網頁,就可以在不同系統、不同螢幕上進行筆記了,在電腦、平板甚至是手機都適用。

你不一定需要登入,可以直接在「 HackMD 」新增筆記進行編輯,而編輯完成後會留下記錄在瀏覽器,你也可以記下網址,都能在以後回頭修改。

當然你也可以用自己的 Google、 Dropbox 等不同帳戶登入「 HackMD 」,登入後,可以獲得完整設定權限等功能。





2. 快速編輯,上手 Markdown 語法


「 HackMD 」在編輯時完全看不到傳統的編輯工具列,所有的編輯效果都用 Markdown 語法來完成。如果你不熟悉 Markdown 語法,可以試試看打開左上方的[?]按鈕,或是查看其「教學文件」,都可以學會完整的編輯語法。

我這邊也舉出幾個最常用的,應該要熟練起來的 Markdown 語法:
  • # 建立大標中標小標
  • - 建立無排序清單
  • 1. 建立有排序清單
  • - [ ] 建立待辦事項
  • **粗體**  建立粗體字
  • *斜體*  建立斜體字
  • ~~刪除線~~  建立刪除線
  • *** 建立分隔線
  • ==螢光筆== 建立螢光筆效果
  • [電腦玩物](http://www.playpcesor.com/) 建立超連結
利用 Markdown 語法,就能在「 HackMD 」中建立待辦清單、排序清單,做出基本標題編輯。

還有更多適合程式員的進階語法,可以做出流程圖、表格等編輯,大家可以從教學文件去研究。





3. 適合貼上程式碼


「 HackMD 」對於貼上各種程式碼也有很好的支援,只要使用:

```程式碼名稱=

```

這樣的語法形式,就能在之間貼上程式碼,並且用適合的程式碼顏色顯示出來。就像下圖這樣。





4. 自動完成編輯


針對一些特殊語法,「 HackMD 」提供了自動完成與提示的功能,包含下列這些:
  • 表情符號:輸入 : 顯示提示
  • 標頭:輸入 # 顯示提示
  • 參考:輸入 [] 顯示提示
  • 外部:輸入 {} 顯示提示
  • 圖片:輸入 ! 顯示提示
這樣一來就可以輸入關鍵字,來選擇需要的符號或標題了。





5. 插入引用文字


另外一個我覺得很值得學起來的編輯格式,就是:「引用」。

輸入以下的語法,前面以 > 開頭:

> 可以引用一段特殊的文字
> [name=Esor] [time=Fri, Oct 14, 2016 9:59 AM] [color=#907bf7]

就能顯示出引用的特殊格式。





6. 簡單上傳圖片


如果你需要在「 HackMD 」插入圖片時,可以直接拖曳圖片到網頁中,「 HackMD 」會自動上傳到「 imgur 」,並且自動產生語法,所以也不需要特別記住圖片的插入語法,而且這都是免費的。





7. 呈現大綱目錄

另外一個我很喜歡的設計是大綱模式,在「 HackMD 」的「檢視」模式中,右上方會顯示這份文件的標題大綱,方便快速跳轉。





8. 分享筆記與設定權限


要在「 HackMD 」分享筆記也很簡單,有兩個最直接的選擇:

  • 直接分享瀏覽器網址列的網址:這時候對方可以瀏覽這份文件,也能編輯這份文件。
  • 透過右上方的[發表]獲得分享網址:這時候對方只能瀏覽這份文件,不能編輯。



如果你還想設定更進階的權限呢?這時候你需要先登入「 HackMD 」的帳號,然後你可以在「檢視」模式的右上方,針對自己的文件修改不同權限,包含:

  • 知道網址的任何人都可以編輯
  • 只有也登入「 HackMD 」帳號者可以編輯
  • 只有擁有者可以編輯
  • 只有擁有者可以瀏覽與編輯
  • 刪除筆記





9. 如何儲存筆記?


基本上「 HackMD 」新增的文件都有專屬網址,都會即時儲存在雲端,但是你也可以透過右上方的[選單],將自己的筆記以 Markdown 格式儲存至 Dropbox 、 Google Drive 或是下載 .md 到您的電腦中。





10. 查看修訂版本


「 HackMD 」右上方的選單裡,也提供了[修訂版本]的功能,讓你隨時還原到某個重大的編輯時間點。





11. 將筆記轉換成簡報模式


最後,「 HackMD 」還支援簡報模式,最簡單的方式就是用下面的語法,分隔每一頁簡報段落:

---

這樣一來,線上筆記就可以按下[簡報模式],切換成可以換頁的簡報囉!

你可以用我的「電腦玩物的 HackMD 測試筆記」 來試試看上述部分功能,或是自己開一個「 HackMD 」文件來練習。

延伸閱讀相關文章:

轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:HackMD 取代 Hackpad 的中文版 Markdown 共筆平台上手教學


留言

  1. 這真的滿好用的
    就等推出部落格功能了 XD(咦)

    回覆刪除
    回覆
    1. 部落格功能的話 可以考慮logdown
      https://logdown.com
      同樣是支援markdown編輯

      刪除
  2. 用這一塊補上 evernote 的編輯功能應該不錯
    hackmd -> webcliper

    回覆刪除
  3. 要順便補充一下 分頁 / 簡報 的功能嗎?反正你都做了簡報了不是??
    // 感謝大大的分享,這個真的好用。

    回覆刪除
    回覆
    1. 我只用了最基本的,其他太複雜我暫時也尚未研究

      刪除
  4. 請問在共筆的環境下,可以設定無法變更彼此的內容嗎?

    回覆刪除
  5. 看這篇文章知道有HackMD, 這個真是太好用了!!!

    回覆刪除
  6. 補充一下使用上需要思考的部份
    - 使用上是用 tag 來尋找 note,google drive 是用 folder 的方式

    回覆刪除
  7. 好用!感謝分享

    回覆刪除
  8. 存到電腦端的 .md 筆記可以用 Typora 或 Zettlr 打開

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Google Maps 我的地圖完全教學!規劃自助旅行攻略

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google 表單的 10 個專業問卷調查設計秘密教學

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

Draw.io 中文線上製作流程圖首選!專業水準完全免費

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單自動關閉回覆教學:時間人數到達就過期