---
title: Introduction of HackMD
date: 2019-08-17
tags: KeyParty
author: Treeple
slideOptions:
transition: slide
spotlight:
enabled: false

description: 讓世界迎接大協作時代吧！！！！
image: https://i.imgur.com/ClsvttK.png

---

<!-- .slide: data-transition="none" data-background="https://i.imgur.com/ClsvttK.png" data-background-size="cover" -->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<font color = #3b3b3b>

## **HackMD - 讓合作變簡單**</font>

---

|<h2>**歡迎：來到協作的世界**</h2>|
|:-|
|<font size=9>線上協作對現代人來說可以是相當的普遍。舉凡<font color = lightgreen>小組報告</font>到<font color = lightgreen>正式會議</font>，<font color = lightgreen>跨區</font>的多人共事不可避免，也就越來越需要能同時間在<font color = lightgreen>線上協作</font>。</font>|

---

|<h1><i class="fa fa-file-text"></i> HackMD</h1>|
|:--:|
|<h2>INTRODUCTION</h2>|

<font color="#83aec9"><i class="fa fa-pencil fa-fw"></i> <span>**簡單** <!-- .element: class="fragment" data-fragment-index="1"--></span></font> <font color="#9dd1a4"><i class="fa fa-pencil fa-fw"></i> <span>**方便** <!-- .element: class="fragment" data-fragment-index="2" --></span></font> <font color="#e8e2b0"><i class="fa fa-pencil fa-fw"></i> <span>**易讀** <!-- .element: class="fragment" data-fragment-index="3" --></span></font>

---

<h1><font color="#b84133">
<i class="fa fa-warning fa-fw"></i> </font></h1>
<h2>注意事項</h2>

||
|:-|
|<span>1. 雖然簡單，但還是有門檻<!-- .element: class="fragment" data-fragment-index="1" --></span><br><span>2. 雖然方便，但需要適應<!-- .element: class="fragment" data-fragment-index="2" --></span><br><span>3. 擴充功能要自己尋找和學習<!-- .element: class="fragment" data-fragment-index="3" --></span>|

---

<!-- .slide: data-transition="none" -->
<!-- .slide: data-background="https://i.imgur.com/7vAs2e1.png" data-background-size="cover" -->

---

### 進入HackMD


---

### 介面介紹

---

### 完整的HackMD筆記會長成這樣
<iframe src="https://hackmd.io/CvDiafL5Shi4rKaVtI_GZg?both" height=500 width=120%></iframe>

---

<!-- .slide: data-transition="none" data-background="https://media.giphy.com/media/lkdH8FmImcGoylv3t3/giphy.gif" -->

---

<!-- .slide: data-transition="none" -->

|<h1>看不懂對不對？</h1>
|:-|
|<h2>恭喜你，你是正常人！</h2>|

<span>這是一種名叫**Markdown**的註記式語言<!-- .element: class="fragment" data-fragment-index="1" --></span>

---

# Markdown是什麼

||
|:-|
|<span>Markdown 是一種簡單的語法，目標是為了實現「易讀易寫」。[<i class="fa fa-file fa-fw"></i>](https://markdown.tw/)<!-- .element: class="fragment" data-fragment-index="1" --></span><br><span>適用於網路寫作。<!-- .element: class="fragment" data-fragment-index="2" --></span><br><span>兼顧到發佈時的 **可讀性** 與 **便利性** 。<!-- .element: class="fragment" data-fragment-index="3" --></span><br><span>Markdown語法全部都由 **符號** 組成。<!-- .element: class="fragment" data-fragment-index="4" --></span>

---

|<h1>實際操作一遍</h1>|
|:-|
|點入這個連結 [<i class="fa fa-chain"></i>](/TXs92v5UQ-eSluizZW581g)<br>練習將這些文字編輯成好看的文章|

---

### 實際操作一遍 Part 1 - 加入標題


---

### 實際操作一遍 Part 2 - 基本編輯指令


---

### 實際操作一遍 Part 3 - 條列清單


---

### 實際操作一遍 Part 4 - 序列清單


---

### 實際操作一遍 Part 5 - 插入超連結


---

### 實際操作一遍 Part 6 - 編輯引文

---

### 實際操作一遍 Part 7 - 插入次標題

---

### 文章是不是變得不一樣了？
<iframe src="https://hackmd.io/TXs92v5UQ-eSluizZW581g?view" height=500 width=120%></iframe>

---

## 這就是Markdown語法的威力
* Markdown語法不需要使用<font color="#e6df7a">**滑鼠**</font>來註記文字、也不需要按<font color="#d6c4b8"><b>`ctrl + B` </b></font> 或 <font color="#d6c4b8"><b>`cmd + B` </b></font>等組合按鍵，來註記文字。

* 讓寫作者可以更加專注在 <font color = "#d6c4b8"><i class="fa fa-pencil fa fw"></i></font> 書寫上。

---

<!-- .slide: data-background="https://i.imgur.com/VyAKQhp.png" data-background-size="cover" -->

---

# 資料整理和管理

* 如果我有一堆資料，HackMD可以幫我整理嗎？

---

<!-- .slide: data-transition="none" data-background="https://i.imgur.com/jpYXNBF.gif" -->

---

### 將輸入 **韓國瑜** 得到的資料整理如下：
<iframe src="https://hackmd.io/yDV-2vyyQfK6SeXJ1xRErA?both" height=500 width=120%></iframe>

---

### 按下右上方的<i class="fa fa-share-alt"></i> ，並將發布類型選擇為<i class="fa fa-book"></i>

---

### 可以將找到的資料一口氣整理好
<iframe src="https://hackmd.io/@treeple/B1kvLk3XS/" height=750 width=100%></iframe>

---

### 其他類似的資料整理：送中惡法

<iframe src="https://beta.hackfoldr.org/extradition" height=750 width=100%></iframe>

---

### 其他類似的資料整理：g0vhk 教學

<iframe src="https://beta.hackfoldr.org/1WLCYi1iTV6PxexOMRPqIhh7TEA3CHHfOsIPRyoMpdfM" height=750 width=100%></iframe>

---

### 其他類似的資料整理：線上社會

<iframe src="https://bit.ly/sociologyTA" height=750 width=100%></iframe>

---

## 貼標籤 <font color="#d6c4b8">`Tag` </font>

---

|<h2>貼標籤</h2>|
|:---|
|在撰寫文章時，很容易會忘記做歸類，長期下來累積的資料很容易造成團對成員在使用上的困擾。|

---

### 為每一份文件上標籤


---

<!-- .slide: data-background="https://i.imgur.com/kDLyIXi.jpg" data-background-size="cover" -->

<br>
<br>
<br>
<br>
<br>

# 協作

<font color = #DAC9A6><h2>轉動世界</h2></font>

---

|<h2><font color =#DAC9A6>技術 </font>feat. <font color =#DAC9A6>議題 - 蹦出新滋味</font></h2>|
|:--|
|對不熟悉雲端編輯的人而言，這些工具有一定門檻。更明顯的是：越來越多行動者的反覆實作，才讓技術跨過了<font color =#DAC9A6 size = 9>**陌生**</font>的門檻，成為一項可培養、可以普及的技能。。 <br>( [許恩恩：打字，轉動公民社會](https://theinitium.com/article/20160602-opinion-enenhsu-g0v/)，2016 )|

---

|<h2><font color =#DAC9A6>殊途同歸</font></h2>|
|:--|
|無論觀點是否一致，共筆互動過程中產生的<font color =#DAC9A6 size = 9>**合作與信任感**</font>，是倡議團體經營群眾、進行溝通時所需要的基礎。 <br>( [許恩恩：打字，轉動公民社會](https://theinitium.com/article/20160602-opinion-enenhsu-g0v/)，2016 )|

---

|<h2>HackMD - <font color =#DAC9A6>共識的痕跡</font></h2>|
|:--|
|書寫，記錄合作的過程<br>合作，啟動更多新的可能<br>HackMD<br>不只是協作平台<br>更是合作的社群<br>是一種新的生活方式|

---

<!-- .slide: data-background="https://i.imgur.com/wx1XcSh.png" data-background-size="cover" -->

---

### 進階資料<i class="fa fa-share-square-o"></i>

<iframe src="https://hackmd.io/@treeple/Referencesofmd" height=750 width=100%></iframe>

---

<!-- .slide: data-background="https://i.imgur.com/GaqWMMy.png" data-background-size="cover" -->