HackMD介紹 - HackMD

# HackMD介紹 --- 簡介 === **HackMD** 是個跨平台的 Markdown 即時協作筆記可以在**電腦、平板、手機**與其他人做筆記！ --- 筆記是由 [Markdown](http://markdown.tw/images/208x128.png) 語法寫成 ![markdown](http://markdown.tw/images/208x128.png) --- 共同編輯、擴充語法、簡報模式 === ![共同編輯、擴充語法、簡報模式](https://i.imgur.com/DsvBNgd.png) ---- ## 共同編輯/快速分享編輯=複製網址分享=按右上角的發表 ---- 擴充語法 === 像是可以使用 **MathJax** 語法來產生 *LaTeX* 數學表達式，如同 [math.stackexchange.com](http://math.stackexchange.com/)： The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ > 更多關於 **LaTeX** 數學表達式 [請至這裡](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) ---- 程式碼區塊 === 支援多個程式語言，可以使用自動完成來看支援哪些語言 ```haskell = import System.IO main = do putStr "請輸入你的名稱：" hFlush stdout name <- getLine putStrLn ("哈囉！" ++ name ++ "！") ``` ---- 簡報模式 === 可以使用一些語法將筆記分成投影片然後用 **簡報模式** 來展示 [簡報模式說明](https://hackmd.io/slide-example/slide-example) PS:我這次投影片就是用這個做的啦~~ --- 可以在 **[首頁](/)** 透過 **Facebook、Twitter、GitHub、Dropbox、Google** 登入 ![login](https://i.imgur.com/OqAudgh.png =500x500) --- 快速方便共同編輯(電腦、平板、手機) === **電腦 & 平板** 編輯：只看到編輯器 檢視：只看到結果 同時：同時看到兩邊 **手機** 檢視：只看到結果 編輯：只看到編輯器 ---- 有權限控管 === 檢視右上方有個小按鈕，您可以透過以下選項來更改權限： 隨意：任何人都可以更改這份筆記 可編輯：已登入使用者可以更改這份筆記 鎖定：只有擁有者可以更改這份筆記 私有：只有擁有者可以更改與檢視這份筆記 **只有筆記的擁有者可以更改權限** --- 增加功能，讓筆記更易於使用 === ---- 上傳圖片 === 只要按下這個按鈕 或是 **拖放** 圖片到編輯器，甚至 **貼上** 圖片也可以喔！這會自動上傳圖片至 **[imgur](http://imgur.com)**，啥都不必煩惱了 :tada: ![](https://i.imgur.com/9cgQVqD.png) ---- UML 圖表 === ---- ### 循序圖 ```sequence 艾莉絲->包柏: 哈摟，你好嗎？ Note right of 包柏: 包柏思考中包柏-->艾莉絲: 我很好，謝謝！ Note left of 艾莉絲: 艾莉絲回應艾莉絲->包柏: 最近過得怎樣？ ``` ---- ### 流程圖 ```flow st=>start: 開始 e=>end: 結束 op=>operation: 我的操作 op2=>operation: 啦啦啦 cond=>condition: 是或否？ st->op->op2->cond cond(yes)->e cond(no)->op2 ``` ---- ### Graphviz ```graphviz digraph hierarchy { nodesep=1.0 // increases the separation between nodes node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Blue, style=dashed] //All the lines look like this Headteacher->{Deputy1 Deputy2 BusinessManager} Deputy1->{Teacher1 Teacher2} BusinessManager->ITManager {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level } ``` ---- ### Mermaid ```mermaid gantt title A Gantt Diagram section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d ``` ---- > 更多關於 **循序圖** 語法 [在這裡](http://bramp.github.io/js-sequence-diagrams/). > 更多關於 **流程圖** 語法 [在這裡](http://adrai.github.io/flowchart.js/). > 更多關於 **Graphviz** 語法 [在這裡](http://www.tonyballantyne.com/graphs.html) > 更多關於 **Mermaid** 語法 [在這裡](http://knsv.github.io/mermaid) ---- Youtube === {%youtube 1G4isv_Fylg %} ---- Gist === {%gist schacon/4277%} ---- SlideShare === {%slideshare briansolis/26-disruptive-technology-trends-2016-2018-56796196 %} ---- 待辦清單 === - [ ] 待辦 - [x] 買些沙拉 - [x] 刷牙 - [ ] 喝水 --- 題外話 === HackMD也有open source到github上，可以用nodejs/docker自己架一個來玩玩看 [https://github.com/hackmdio/hackmd/](https://github.com/hackmdio/hackmd/) [https://github.com/hackmdio/docker-hackmd](https://github.com/hackmdio/docker-hackmd) --- Reference === [HackMD首頁](https://hackmd.io/) [HackMD功能介紹](https://hackmd.io/CwYwhgzAbApgHFAtHAnAIzY4awBNkwCsA7ImFCBCHAIxwBMhhIQA) [投影片簡報版](https://hackmd.io/p/ByAePIJd) [投影片MD版](https://hackmd.io/s/ByAePIJd)