<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;
```</pre>
</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
{"metaMigratedAt":"2023-06-14T12:34:51.687Z","metaMigratedFrom":"YAML","title":"HackMD @ SITCON 2017","breaks":true,"lang":"zh-tw","disqus":"hackmd","contributors":"[]"}