<style>
.reveal .slide-background {
background-color: #333;
}
</style>
## 開發者的三項之力
Note:
一開始簡報就停在這頁一陣子
---
### 三項之力？
---
## 深蹲、臥推、硬舉 ✗
Note:
難道是深蹲、臥推、硬舉？嗯，強身健體，有健康的身體才能健康的寫扣！得一分！
不過自己 diss 一下自己
啊不對啦，今天這個場地怎麽是講這個
---
## Markdown, VSCode, GitHub ✓
---
## 開發者的三項之力
### 來聊聊 Markdown, VSCode, GitHub
<br>
<br>
Note:
好那現在正式開始我的分享
---
## 開發者「小」聚
<small>150 人的小聚 :joy:</small>
Note:
首先想感謝贊助場地的微軟，還有來幫忙的 Azure 社群朋友們，沒有你們可能就沒有這麼「大」的小聚了。首當然還要感謝來參加這個各位！
---
喂！！
---
## 關於我
- Yukai
- HackMD 開發者 & 粉專小編
- VSCode Taiwan 粉專小編
Note:
簡單的自我介紹，我的名字是 Yukai，目前在 HackMD 服務擔任全端工程師，略懂略懂的那種全端，然後兼任粉專小編，就是發發臉書貼文，回覆留言的那種。
也弄了一個 VSCode Taiwan 的粉專，偶爾更新更新發發廢文，追蹤 VSCode 的最新進度
---
## 信仰
- 我用 ~~neovim~~ VSCode 寫扣！
- 我用 ~~空格~~ TAB 縮排！
Note:
編輯器部分，我用 VSCode 寫程式！縮排部分使用 TAB 而不是空格。
嗯，希望現在講這些不要在等下的交流時間引起宗教戰爭，我還是快速進入下部分好了 :sweat_smile:
---
## Markdown
---
- John Gruber & Aaron Swartz
- 易讀易寫
- 容易轉換成 HTML
Note:
在這裡簡介一下 Markdown，Markdown 是由 J & A 在 2004 年合作一起制定的一種標記語法，為了要創造出一種易讀易寫的語言。在當時已經有許多「標記語言」，比如 textile、RstructureTExt 等等，但沒有 Markdown 這麼簡潔及有表現力。
那所謂簡潔具有表現力是什麼意思呢？
---
#### Markdown 語法
<div class="large-code">
```
# 標題一
## 標題二
### 標題三
> 引言
```
</div>
<style>
.reveal .large-code code {
font-size: 2em;
line-height: 1.8em;
}
</style>
Note: 讓我們直接看到以下的語法
---
#### 產生 HTML
<div class="large-code">
```htmlmixed
<h1>標題一</h1>
<h2>標題二</h2>
<h3>標題三</h3>
<blockquote>引言</blockquote>
```
</div>
---
---
## 無干擾的書寫
Note:
Markdown 可以讓我們很方便的進行書寫，不用一直像操作像 Word 這類型的文書軟體一樣去按那些調整格式的按鈕，例如加上粗體、斜體、超連結、調文字大小...
---
# HackMD
Note:
欸，下張簡報怎麽就是 HackMD。不要懷疑，就讓我直接進入業配主題！
---
## HackMD
- MD → Markdown
- 即時協作大！平！台！
Note:
就來介紹一下 HackMD。HackMD 是在 2017 前後上線的即時協作大平臺，主打絕佳的編輯與寫作體驗。HackMD 裡的 MD 就是 Markdown
---
<!-- .slide: data-background="https://i.imgur.com/KIkHm07.png" -->
---
<!-- .slide: data-background="https://i.imgur.com/yMpP7Kb.png" -->
---
### 常見功能
- 小組討論
- 會議記錄
- 逐字槁
- 黑客松
- ...
---
彩蛋
---
`npm install`
Note:
想先請問一下在座有多少人聽過 HackMD？麻煩幫我舉一下手謝謝 :)
（先講上面的）好了傳說中的業配就在這裡結束。身為一個 HackMD 的開發者，平常雖然寫了很多 Bug，但我其實藏了一些彩蛋在 HackMD 裡。什麼是彩蛋，就是網站上隱藏的炫炮功能。
總之故事是這樣的，某一天起床，我翻開電腦，打開 HackMD，想到開發者最愛玩的 Konami 祕技，順手就在 HackMD 編輯器打了一把，想當然爾，什麼事都沒發生。我隨手 Google 了幾個套件，敲下 npm install，等了等，再等了等。啊，終於裝好了。
---
---
{%youtube pRco7SBNgxM %}
Note:
我隨手敲了幾行程式碼，喝了口咖啡，就把套件組裝起來。好，現在輸入 Konami 組合鍵：上上下下左右左右 BA
哎，開發者的快樂，往往就是這麼樸實無華，且枯燥。
---
## 開發者的快樂
## 往往就是這麼樸實無華，且枯燥
<!-- .slide: data-background="https://i.imgur.com/zQXtawO.jpg" -->
---
## KONAMI 彩蛋
⬆️ ⬆️ ⬇️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ <kbd>B</kbd> <kbd>A</kbd>
Note:
對於已經開啟 Power Mode 的同學，這邊也提供一個方法來關閉。
找到狀態列上的小扳手，把 Power Mode 取消勾選就可以了
---
---
## Visual Studio Code
---
<!-- .slide: data-background="https://i.imgur.com/DIhnnZI.png" -->
## 最受歡迎編輯器！
---
<small>[Stackoverflow survey 2019](https://insights.stackoverflow.com/survey/2019#development-environments-and-tools)</small>
---
## 最活躍的擴充功能！
---
<small>[Extension stats](https://yukaii.tw/extension-stats/)</small>
---
## 天天都在用 VSCode
## 天天都在用 HackMD
---
## 何不兩者兼得
<!-- .slide: data-background="https://i.imgur.com/6tUpn6X.gif" -->
---
## HackMD x VSCode
## 擴充功能
<br>
<br>
<br>
<small>還是 VSCode x HackMD</small>
<small>~~嗯，攻守互換~~</small>
---
# Live Demo
Note:
先來看一下 HackMD 的功能介紹頁面，我來滑一下，比如有行號的程式碼區塊，再來 LaTeX 的數學式區塊、各種圖表, blah blah blah，還有我們最為炫炮的樂譜功能
鏡頭轉到我們的 VSCode。同樣的一份 Markdown，打開預覽功能，LaTeX 區塊、格式圖表....（捲卷卷）、樂譜，87% 支援！
---
<!-- .slide: data-background="https://i.imgur.com/Wdo7KZ6.png" -->
---
## How
---
### VSCode Markdown 三種擴充方式
<small>參考資料：[Markdown Extension guide](https://code.visualstudio.com/api/extension-guides/markdown-extension)</small>
---
### 1. Preview styles
<!-- .slide: data-background="https://i.imgur.com/pmt7mv6.png" -->
---
<small>Debug Markdown Preview Webview</small>
---
### 2. markdown-it plugins
例：markdown-it-ruby
Note:
這是一個叫做 markdown-it-ruby 的 plugin。右邊 HTML 是基於一種叫 ruby 的語法，可以做到「寫作 OO 讀作 XX」的效果，網頁上的注音也是利用這種方式排版的。
markdown-it-ruby 定義了左邊這種，用大括號把文字框起來，用垂直線隔開的語法，把這種語法轉換成 HTML ruby 右邊的樣子。這就是第二種擴充 VSCode Markdown 的方式
---
### 3. Preview Scripts
<small>非同步，在 Markdown 渲染完後執行</small>
---
---
---
<small>在 Marketplace 上架了！</small>
---
### 在 GitHub 上開源！
[hackmdio/vscode-hackmd](https://github.com/hackmdio/vscode-hackmd)
Note:
歡迎大家找 Bug 開坑開 PR！
Roadmap
---
## GitHub
---
## ~~全球最大開發者交友社群~~
---
<!-- .slide: data-background="https://i.imgur.com/yz2lXY9.jpg" -->
---
## HackMD 與 GitHub 整合的文件流程範例
---
## Demo
---
## 看，很簡單吧~
<!-- .slide: data-background="https://i.imgur.com/nztRd2v.jpg" -->
---
## HackMD :heart: Markdown, VSCode, GitHub
---
<div class="big-table">
|Markdown 台灣|VSCode 台灣|
|:--:|:--:|
||
|https://bit.ly/2MNfisR|https://bit.ly/2MO833E
</div>
<style>
.reveal section .big-table img {
max-width: unset;
max-height: unset;
}
</style>
---
# One more thing...
---
{%youtube ISjUhChsCDY %}
---
<div class="btn btn-primary thefancybutton">
上線
</div>
<style>
.thefancybutton {
font-size: 3em;
padding: 10px;
color: black;
background-color: white;
border-radius: 25px;
width: 3em;
display: block;
margin: 0 auto;
cursor: pointer;
user-select: none;
transition: background linear 250ms, color linear 250ms;
}
.thefancybutton:hover {
background-color: #fff57c;
}
.thefancybutton:active {
background-color: #9e9100;
color: white;
}
</style>
---
# Quick Demo
---
# 團隊空間
# <ruby>限時<rt><small style="margin-top: 20px;">即將正式</small></rt>開放</ruby>
---
---
## Special Thanks
微軟大好き :heart_eyes:
{"metaMigratedAt":"2023-06-14T23:44:53.657Z","metaMigratedFrom":"YAML","title":"開發者的三項之力 - 小聚簡報","breaks":false,"contributors":"[{\"id\":\"6d3b4625-23c8-4275-a28e-cdc2cb546eda\",\"add\":14280,\"del\":8130}]"}