HackMD註冊與Markdown語法入門

主講人：黃夙賢

HackMD

• 以 Markdown語法為基礎，追求簡潔的線上協作筆記

• 北科大資工系吳承翰所開發

• MD指的是採用MarkDown語法撰寫

• 線上編輯，自動存檔

• 可儲存不同版本文件進行協同作業 (免費版有10個版本限制)

MarkDown語法

• 一種輕量級標記式語言

• 於2004年由John Gruber所制定

• 目標是易讀易寫

• 最大靈感來源是純文字的電子郵件格式，參考HTML的設定格式

HackMD註冊

• http://hackmd.io/

輸入註冊資訊

註冊驗證

註冊驗證

登入

登入成功

隨堂練習

• 請各位同學至HackMD網站註冊一帳號

HackMD入門教學

撰寫基本原則

• 先不對文字進行視覺上的調整 （例如：變成粗體、標題、分項目），專注把想法表達出來

• 當內容比較完整的時候，再來使用語法排版

• 充分運用 HackMD 的雙欄模式，你在編輯器寫作，同時檢視「被呈現」的模樣

• 寫出結構，大標題、次標題、文件資訊的醒目提示。有個排版的基本想法，再來填充文字內容。

雙欄模式

標題

• # 第一層標題

• ## 第二層標題

• ### 第三層標題

• #### 第四層標題

• ##### 第五層標題

• ###### 第六層標題

• 注意#字號後面需要空白

斜體、粗體

• 在文字兩端加上 * 符號，即可將文字變成斜體

• 在文字兩端加上 ** 符號，即可將文字變成粗體

• 例如：

斜體
粗體

隨堂練習

清單 - 無序清單

• 加上 "-" 即可設定無序清單

• 次清單只需要縮排即可(兩個空白，或者Tab鍵)

• 例如：

清單 - 有序清單

• 直接寫上序號即可
• 例如：

隨堂練習

區塊

• 行首輸入 > 符號，並在後面加上一個空白後，再輸入引用文字，即可形成引用區塊
  • "> 引用區塊"
  • ">> 子引用區塊"
  • ">>> 子子引用區塊"
• 例如：

引用區塊

子引用區塊

子子引用區塊

隨堂練習

插入圖片

• 語法：! [想要顯示的文字] (URL)

• 可以將圖片直接拖曳到編輯器、複製圖片後直接在編輯器貼上，都會直接將圖片上傳到 imgur 後自動插入圖片語法

• imgur圖床為公開圖床

隨堂練習

嵌入影片

• 請先輸入 { }，會自動產生以下選項進行選擇
• 選擇影片來源，假設是youtube，{ }會變成 { %youtube youtubeid % }
• 影片連結：https://www.youtube.com/watch?v=eT6Xza1T4KA，將yotubeid替換成影片連結的 id，也就是 eT6Xza1T4KA
• 例如：{ %youtube eT6Xza1T4KA % }

隨堂練習

隨堂作業一

• 請完成我的第一個HackMD筆記，並將連結上傳至Tronclass作業當中
• 筆記標題請設定為: 我的第一個HackMD筆記
• 請點選右上角 『分享』，並點選『複製』即可獲得分享連結
• 『可閱讀』權限記得開放『所有人』
• 作業範例請參考：https://hackmd.io/@shhuangmust/ryE-BCMnt

範例畫面