---
title: HackMD @ SITCON 2017
lang: zh-tw
disqus: hackmd
---

<style>
.reveal { font-size: 38px !important; }
.reveal, .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, PingFangTC-Light, "Microsoft JhengHei", "微軟正黑", sans-serif, "Apple Color Emoji" }
</style>

# <i class="fa fa-file-text"></i> HackMD

#### 您使用 Markdown 寫作與分享知識的最佳方式

Max Wu @ SITCON 2017

---

<img src="https://i.imgur.com/PTbB46S.jpg" style="width:300px;height:300px;border-radius:50%"/>

## Max Wu

#### 北科大 資訊工程所

### 我喜歡好的產品，也開發好的產品；<br>我寫的不是程式，是理想。

---

# <i class="fa fa-file-text"></i> HackMD

#### 使用 Markdown 的跨平台即時協作筆記

----

# Hack
## =
# 用聰明的方法做事

----

# MD
## =
# Markdown

---

# <i class="fa fa-file-text"></i> HackMD 用途
- 製作筆記
- 撰寫文件
- 快速簡報
- 還有很多意想不到的用法...

----

# <i class="fa fa-file-text"></i> 功能
- 自動上傳圖片
- 支援嵌入影片
- 支援數學公式
- 支援各式圖表
- 自動修訂紀錄
- 自動作者標記

----

# <i class="fa fa-file-text"></i> 採用
- PyCon TW 2016
- g0v
- CTF write-ups
- Debater
- jserv 系列課程
- MOPCON 2016
- :star2: SITCON 2017 :star2:

---

# 來談談 Markdown
2004/3/19 由 John Gruber 所開發
用以簡化 HTML ，被廣泛地運用在各式系統
- 一句話說明它
- 有誰在用？
- 優點與缺點
- HackMD 的 Markdown

----

# Markdown

# 輕量的視覺化標記語言<!-- .element: class="fragment" data-fragment-index="1" -->

# 「蛤？」<!-- .element: class="fragment" data-fragment-index="2" -->

----

# 文字就可以排版的語法

感謝 @clkao 貢獻此麻瓜咒語

----

# 誰在用 Markdown？
- GitHub
- Stack Overflow
- Reddit
- Bitbucket
- GitLab
- etc...

----

# Markdown 的優點
- 輕量：純文字
- 直覺：標記簡單清楚

----

# Markdown 缺點
- 需要腦袋：還是要記語法
- 百家爭鳴：規範與實作雜亂

----

## HackMD 的 Markdown
- 遵守 CommonMark
- 參考 Jekyll 語法 (kramdown)
- 參考 StackEdit 等社群套件
- 加入許多額外方便的語法

---

## HackMD 的語法簡介
- 標題
- 無序清單
- 有序清單
- 引用
- 文字變化
- 連結
- 圖片
- 程式碼
- 表情符號
- 外部嵌入
- 數學公式
- 警告區塊

----

# 標題
在行首輸入 `#` 加上一個空白
愈多個 `#` 代表愈低層級的標題

> `# 標題`

:bulb: 先輸入 `#` 就會有提示了

*相當於 HTML header tag*

----

# 無序清單
在行首輸入 `-` 加上一個空白
縮排後可為子清單

> `- 清單`

*相當於 HTML unordered list*

----

# 有序清單
在行首輸入 `1.` 加上一個空白
縮排後可為子清單

> `1. 清單`

*相當於 HTML ordered list*

----

# 引用
在行首輸入 `>` 加上一個空白
縮排後可巢狀使用

> `> 引用內容`

*相當於 HTML blockquote*

----

# 文字變化
- 粗體：使用兩個星號夾住 `**粗體**`
- 斜體：使用一個星號夾住 `*斜體*`
- 刪除線：使用兩個波浪符號夾住 `~~刪除~~`
- 底線：使用兩個加號夾住 `++底線++`
- 重點：使用兩個等號夾住 `==重點==`

----

# 連結
> `[連結文字](連結網址)`

:bulb: 先輸入 `[]` 就會有提示了

*相當於 HTML a tag*

----

# 圖片
> ``

:bulb: 先輸入 `!` 就會有提示了

*相當於 HTML img tag*

----

# 程式碼
- 行內程式碼：使用一個重音符號夾住 `*斜體*`
- 區塊程式碼：使用三個重音符號上下夾住

<blockquote>
<pre>```javascript
var i = 0;

</blockquote>

:bulb: 先輸入三個重音符會提示支援的程式碼顏色標示

----

# 表情符號
使用冒號夾住表情符號名稱

> `:smile:`

:bulb: 先輸入冒號會提示支援的標情符號

----

# 外部嵌入
可以內嵌入影片、Gist 等外部方法

> `{%youtube youtubeid %}`

:bulb: 先輸入 `{}` 會提示支援的嵌入方法

----

# 數學公式
可以撰寫 Tex 相容的數學描述式

$L^aT_eX$
> `$L^aT_eX$`

----

# 警告區塊
可以凸顯某些需要的注意的區塊

:::danger
記得放一包乖乖到機房 :cookie: 
:::

<blockquote>
<pre>:::danger
記得放一包乖乖到機房 :cookie: 
:::</pre>
</blockquote>

:bulb: 先輸入三個冒號會提示支援的警告區塊

---

# <i class="fa fa-file-text"></i> HackMD 現況
- 2015 年 3 月開始上線服務
- 累計超過 10 萬份筆記
- 每月超過 6 萬的活躍使用者
- 會員超過 1.6 萬名
- 使用者來自 台灣、日本、美國、歐洲、南美洲
- 支援超過 15 種介面語言

----

# <i class="fa fa-github"></i> 開源
- 被星星超過 1,750 次
- 擁有超過 45 名貢獻者
- 被 Fork 超過 220 次
- 最近在重構中...

----

# <i class="fa fa-file-text"></i> 桌面版
- 使用 Electron 包裝
- hackmdio/hackmd-desktop
- GitHub 開源開發中，歡迎參與 :heart: 

---

# Q&A

---

# 特別感謝

## OSS Plant 提供社群節點
## cdn.js 提供開源套件 CDN

---

# 謝謝您的聆聽！
這份簡報使用 HackMD 製作
https://hackmd.io/p/B1BYM89ix