2022 iThome鐵人賽

小題大作的 30 個

HackMD技巧

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #2

HackMD 的

前世今生

HackMD

HackMD CTO 吳承翰 2014年學生時期(北科碩)的資安作業
來自台灣最知名的線上協作工具
使用者超過 50 萬人，遍佈全球 30 個國家

媒體報導

各大技術研討會指定採用

吳承翰 2016 MOPCON分享

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #3

HackMD 的編輯介面

編輯區-左上方

編輯 / 雙欄 / 預覽

編輯區-右上方-分享方式

編輯區-右上方-更多選項

編輯區-左上方-功能選單

編輯區-下方-文件資訊

編輯區-左下方-畫筆

編輯介面版型

編輯區-左下方-換行

差異在輸出的換行方式

編輯區-左下方-智慧工具

POWER!!

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #4

HackMD 與常用筆記軟體比較

想用筆記的時機?

記下稍縱即逝的靈感
記下值得一讀的文章
規劃待辦清單
知識產出寫作
…

您有用過那些數位工具/筆記軟體

HackMD	Evernote	Notion
2017	2008	2018
MarkDown	MarkDown	MarkDown
協作	知識紀錄	知識管理
免費/個人/企業	免費/個人/專業	個人/專業(教育方案可免費)
靠網頁渲染	收費才好用	檔案多就慢
轉出容易	轉出不易	轉出不易

HackMD	Obsidian	Heptabase
MarkDown	MarkDown	MarkDown
協作	知識網絡	適合卡片盒筆記的知識網絡
雲端筆記	本機檔案/APP/免費為主	雲端筆記/APP
不適合卡片盒筆記	非雲端主力	收費

卡片盒筆記 ZettelKasten

讓筆記之間互相連結，建立網路狀的知識系統
由德國社會學家 Niklas Luhmann 盧曼發明
盧曼一生著作超過70本專書、400篇以上論文的驚人產出
申克‧艾倫斯 Sönke Ahrens 整理問世
2022年繁中版問世有額外收錄

卡片盒筆記的 3 種筆記類型

靈感筆記	文獻筆記	永久筆記
紀錄，也記下當時情境	記錄原文出處，心得解釋	定期整理前2者，歸納出只要看到永久筆記自動會有聯結的筆記結果

HackMD

台灣原生

即時紀錄協作共享知識

知識分享的類公共財

HackMD

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #5

HackMD 與 MarkDown

MarkDown前世今生

Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →	Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →

John Gruber 在 2004 年創造了 Markdown ，用以簡潔文字方案有效的轉為 HTML/XHTML

MarkDown 為了簡化 HTML 而生

MarkDown	HTML
# h1	`<h1></h1>`
- list	`<ul><li>Coffee</li></ul>`
`![](圖片網址)`	`<img src="圖片網址">`
`[](連結網址)`	`<a href="連結網址"></a>`

MarkDown延伸閱讀

MarkDown語法無所不在

HackMD也是以此語法為編輯基底，常用到的地方包含：
- 編寫GitHub的Readme.md檔
- 編寫Jupyter Notebook的文字描述
- 技術部落格Medium
- 筆記軟體Evernote等
- Line的訊息也可以
- iTHome鐵人賽!!!

Markdown常用指令

標題H1 `#`

標題H2 `##`

標題H3 `###`

標題H4 `####`

引用 `>`

在非洲，每過一分鐘，就有六十秒過去。willismax

清單 `-`、`1`

無序清單：`*`、`+`、`-`

有序清單：`1.`～`5.`

不用在意數字的正確性，但最好從1.開始

CheckBox

要做的事

- [ ] 要做的事

巢狀清單用4個空白或是1個`TAB`縮排

第一排
- 4個空白或1個tab縮排。第二行推齊可對齊。

小數點

.跟清單1.避免誤用，可以使用反斜線\.。
- 如: 3.14改為`3.14

程式碼 - 單行

用一個鍵盤左方(Esc下方)的頓點符號包住

print(Hello World)

程式碼 - 多行

多行程式用三個鍵盤左方(Esc下方)的頓點符號包住
可以選不同程式語言的高亮排版


print("hi")

print("hi")

HTML

< >可以產生HTML的效果

<div class="footer"> &copy; 2022 </div>

換行分隔線：

一行3個以上的下列符號皆可分隔

***、* * *
---、---
___、_ _ _

超連結

使用[連結名稱](網址)，如[markdown.tw](https://markdown.tw/)，顯示結果為我是超連結

有alt說明的超連結

要游標移至超連結的說明，如[markdown.tw](https://markdown.tw/ ' MarkDown中文教學')
顯示結果為滑我身上看看

參考的連結

I get 10 times more traffic from Google than from Yahoo or MSN.

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

強調：以`*`或`_`包圍的文字

單個變斜體，如斜體、斜體
兩個變粗體，如強調、強調

圖片

![Alt text](/path/to/img.jpg "Optional title")

一般使用![文字](連結)即可使用
在HackMD貼上圖片，即在圖床上傳產生連結並顯示

圖片

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

![](https://i.imgur.com/rtaQxYP.png)

有調整尺寸的圖片

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

![](https://i.imgur.com/rtaQxYP.png =450x)

有調整尺寸、加上文字說明的圖片

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

![如沒有圖的話會出現的文字](https://i.imgur.com/rtaQxYP.png =450x '如滑鼠游標在上方會顯示的提示文字')

將方形圖改成圓形圖

這招已經是CSS，已經不是MarkDown語法
此方法僅適用正方形圖喔

Image Not Showing Possible Reasons The image was uploaded to a note which you don't have access to The note which the image was originally uploaded to has been deleted Learn More →	Image Not Showing Possible Reasons The image was uploaded to a note which you don't have access to The note which the image was originally uploaded to has been deleted Learn More →
方形圖	用CSS圓角

<img 
src="https://hackmd.io/_uploads/BkpYqKDpq.png" 
style="width:200px;height:200px;border-radius:50%"/>

表格

預設靠左

編號	標題	說明
1

表格-置中

編號	標題	說明
100	100	100

|編號|標題|說明|
|:-:|:-:|:-:|
|100|100|100

表格-靠右

編號	標題	說明
100	100	100

|編號|標題|說明|
|-:|-:|-:|
|100|100|100

MathJax

使用 MathJax 語法來產生 LaTeX 數學表達式
符號表參見此筆記[target=_blank] \(\sum_{i=1}^{n}(w_ix_i+b)\)

HackMD編輯介面

HackMD官方功能介紹

pie

title 你最常喝什麼酒？

"啤酒" : 52.8
"紅、白葡萄酒" : 24.8
"威士忌" : 8.6
"高粱" :  4.0
"花式調酒": 8.9

官方功能介紹

官方進階功能

小結

許多文書服務都有支援 MarkDown
饒過你排版的心思，專注在書寫上
HackMD 共筆的重要功能，你得到他了!

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #6

HackMD 的

簡報模式

分享為簡報模式

編輯區上方用`---`包住以下程式碼，會是YAML設定檔

此為預覽模式會顯示簡報渲染結果，有頁碼

slideOptions:
  slideNumber: true
type: slide

簡報的心法

注意力應該在人的身上

圖文只是輔助

大字流

字體大、數量多、速度快

《高橋流簡報術》

雙欄對照

雙欄對照	雙欄對照
A	B
C	D

|雙欄對照|雙欄對照
|:-:|:-:
|A|B
|C|D

3個減號`---`當分隔線

4個減號`----`當次分隔線

每個分隔的

上一行/下一行

請留白

---

### 每個分隔的
### 上一行/下一行
### 請留白

---

編輯內容

一樣用

MarkDown語法

# 大標 h1

## 次標 h2

### 中標 h3

#### 小標 h4

無順序的列表

用條列式說明
每點最多容納46個字元，也就是23個中文字
排版不見得盡如人意，留意呈現出來的結果
盡量不要超過三點

有順序的列表

把冰箱門打開
把大象放進冰箱
把冰箱門關起來

放圖請注意排版

!![](https://hackmd.io/_uploads/r1PRPax-j.jpg)

附加尺寸屬性改善

![](https://hackmd.io/_uploads/r1PRPax-j.jpg =450x)

插入程式碼

使用``顯示的結果 print("hello HackMD")

插入程式碼

使用``` ```顯示的結果

print("hello HackMD")

插入程式碼

使用``` ```多到滿出的程式

print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")
print("hello HackMD")

製作圖表

表格遠不如簡報軟體靈活

左欄	右欄
適合對照	也不適合太多文字

|左欄|右欄|
|:-:|:-:|
|適合對照|也不適合太多文字|


說明1	說明2

pie

title 工程師的一天

"吃飯" : 10
"睡覺" : 30
"打咚咚" : 60

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #7

HackMD 的

書本模式

但人腦需要輔助，很難紀錄太多

蔡加尼克效應(Zeigarnik effect)

未完成的工作項目會一直佔據大腦短期記憶體，如果沒做完事情就容易分心。
也就是說，先記下來以清空大腦短期記憶體，其實就會減少分心!

用筆記錄下來，作為第二大腦

用數位工具幫助生活安排吧

建立書本

先將一個筆記改為書本模式，即書目

書目的無序清單

有超連結的話

會變成書本內頁

如何編輯目錄?

左邊目錄點可編輯

超狂的

多層書本結構

(還可以加入別人的書本)

常見錯誤

要點選「分享的連結」才會變成書本模式，像是
用編輯模式連結是不行的

# Correct:
- [](@wiimax/wryyyyyyy)

# Wrong:
- [](https://hackmd.io/wryyyyyyyyyyyyyyyyyyyy)

Just Do it

製作自己的知識庫，並且增加內頁吧!

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #8

HackMD 與共筆協作

共筆 = 多人一起筆記

共筆 = 開源 + 知識分享

共筆 = 開放、協作、易用

共筆所需的功能

HackMD 幫忙考慮好了

"很多軟體分享功能是要額外收費的"

都在右上方的分享按鈕

右上分享介面區

共享與權限功能

共享連結
共享筆記模式
可閱讀權限
可編輯權限
公開發表

共享連結

https://hackmd.io/@wiimax/c9763 https://hackmd.io/[您的ID]/[專屬連結]

專屬連結可免費客製 (太佛了!)

可閱讀權限

擁有者 / 已登錄者 / 所有人

可編輯權限

擁有者 / 已登錄者 / 所有人

`所有人`可閱讀，編輯權限可選?

擁有者 / 已登錄者/ 所有人

`已登錄者`可閱讀，編輯權限可選?

擁有者 / 已登錄者/ ~~所有人~~

`擁有者`可閱讀，可編輯權限可選?

擁有者 / ~~已登錄者~~ / ~~所有人~~

預設分享權限修改

個人設定區

共筆互動的方式

開啟共同編輯的權限，直接修正/留言

選取文字註記留言

在開頭的YAML欄位設定disqus: {申請的帳號}，例如disqus: willismax，就有如同部落格的留言區了

也有透過嵌入 Slido 讓使用者留言與講者互動

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #9

HackMD

書本+簡報共舞

書本+簡報 DEMO

建立書本

新建檔案
分享為書本模式
建立無序清單連結

建立簡報

無序清單檔案
分享為簡報模式
編輯簡報

簡報的開頭YAML檔

---
slideOptions:
  slideNumber: true
type: slide
---

簡報的預覽

簡報PDF列印

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #10

HackMD 與

版本控制

用差異備份紀錄文件過程
是共筆協作的基石

HackMD的版本控制

自動儲存差異內容
可以自行命名版本

免費版紀錄10個版次
免費版每月免費推至GitHub20次
付費版無限制

版本記錄介面

上傳至GitHub

需先連動GitHub帳號
GitHub開啟控制該Rapo的權限
選擇目的連動/新建上傳
上傳後可以添加連動標章

下拉至HackMD

選從GitHub拉取
可以添加連動標章

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #11

HackMD 的

智慧貼上

智慧貼上特點

可以連同版型一起複製

貼上時呈現版型對應的MarkDown語法

減少反覆編排複製文件的時間

DEMO

智慧貼上限制

貼圖片時留意，可能會貼到經Base64編碼的圖片

超過10萬字無法順利貼上
超過字很多原因是因為圖片編碼導致

有時不想貼格式，要手動切換回一般模式

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #12

HackMD 的表格

與簡報排版

表格遠不如簡報軟體靈活

但在簡報排版

有auto-scale的妙用

一張純貼上的圖檔

一張表格化的圖檔

2張表格化的圖檔

4張表格化的圖檔

4張表格化的圖檔+文字


我	就	讚	!!

8張表格化的圖檔+文字


是	要	說	幾	次	我	就	讚

但2個Row就沒辦法了

除非第1個Row排版在調整

以此類推

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #13

HackMD 佐

FontAwsome V4

美化您的 HackMD

您可以使用emoji

Image Not Showing Possible Reasons
The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported
Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

也可以使用 FontAwsome

<font color="#FFD700">
  <i class="fa fa-trophy" aria-hidden="true"></i>
</font>

CSS Colors

by w3schools.com

只支援到V4

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #14

HackMD 佐

Google Analytics

網站流量分析

可以看到流量趨勢、分布、文章閱覽情形等

需先申請取得ID

在 HackMD 嵌入 GA 很簡單

在編輯區YAML檔加入`GA: [GA的ID]`

以下是我的GA，請改您自己的

---
GA: G-CH7FZ71WRC
---

GA 讓您更認識客群

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #15

HackMD

簡報 YAML 設定

簡報模式可透過YAML檔

修改動畫與設計

---
slideOptions:
  transition: slide #[none, fade, slide, convex, concave, zoom]
  theme: league #[white, black, league, beige, sky, night, serif, simple, solarized, blood, moon]
---

簡報修改動畫與設計DEMO

樣式表參見

---
title: 文件標題
description: 文件描述
date: 2022-08-13
langs: zh #見https://en.wikipedia.org/wiki/List_of_ISO_639-1_code
dir: rtl #[rtl, ltr]右至左、左至右
author: Willis Chen
disqus: willismax #替換為您申請的disqus
image: https://hackmd.io/screenshot.png #文件圖片，Twitter需1200:675才會預覽顯示
tags: `tag1`、`tag2` #自訂標籤，優先於文內標籤
GA: G-CH7FZ71WRC #自己申請的GA ID
---

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #16

HackMD

簡報客製動畫設定

順續出現的動畫

第一點
第二點

## 順續出現的動畫
1. 第一點<!-- .element: class="fragment" data-fragment-index="1" -->
2. 第二點<!-- .element: class="fragment" data-fragment-index="2" -->

順續出現的動畫

1.如果整段沒有空格

2.就可以隱藏清單標頭

3.請記得用兩個空格換行

1. 第一點<!-- .element: class="fragment" data-fragment-index="1" -->
2. 第二點<!-- .element: class="fragment" data-fragment-index="2" -->

1.第一點<!-- .element: class="fragment" data-fragment-index="1" -->
2.第二點<!-- .element: class="fragment" data-fragment-index="2" -->

layout範例

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

<div class="r-stack">
  <img class="fragment fade-out" data-fragment-index="0" src="https://placekitten.com/450/300" width="450" height="300">
  <img class="fragment current-visible" data-fragment-index="0" src="https://placekitten.com/300/450" width="300" height="450">
  <img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
</div>

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #17

HackMD

簡報客製背景設定

進階用法：自訂單頁簡報樣式

設定單頁簡報背景

``

<!-- .slide: data-background="https://hackmd.io/_uploads/rkZ8MIjbi.png" -->

美美的背景

大腦在星爆.gif

背景嵌入影片

<!--.slide:
  data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" 
  data-background-video-loop 
  data-background-video-muted  -->

沒事不要用滿版的背景iframe

太容易混淆有資安風險

<!--.slide:data-background-iframe="https://hackmd.io/@wiimax/Bk0dCIiWs/edit"
 data-background-interactive preloadIframes  -->

revealjs簡報DEMO

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #18

HackMD

智慧複製兼翻譯對照

說起來這個用法有點奇葩

用智慧貼上文章

在雙欄模式之下開啟翻譯

啪! 沒了!!

DEMO

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #19

HackMD

`{}`內嵌筆記

輸入`{}`會出現嵌入選項

可嵌入類型DEMO

PDF
Figma
Gist
Speakerdeck
Slidesure
Vimeo
Youtube

嵌入DEMO

包含`{}`嵌入與`<iframe>`嵌入

記得點上方DEMO來看 (iframe太多在簡報容易崩潰)

Adobe 的 Figma

https://www.figma.com/file/PNxLYmeFKvZz9G7DEwnI0o/Untitled?node-id=0%3A1

{%figma https://www.figma.com/file/PNxLYmeFKvZz9G7DEwnI0o/Untitled?node-id=0%3A1 %}

Gist

https://gist.github.com/willismax/2838f065f9b29099ea48a46afafb2216

{%gist 
  2838f065f9b29099ea48a46afafb2216 
  %}

PDF

https://doggy8088.github.io/A-Whirlwind-Tour-of-Python-zh-tw/

{%pdf 
  https://doggy8088.github.io/A-Whirlwind-Tour-of-Python-zh-tw/ 
  %}

Youtube

https://www.youtube.com/watch?v=GOP4G21aNIg
{%youtube 
  GOP4G21aNIg 
  %}

HackMD

//分享連結
https://hackmd.io/@wiimax/intro-hackmd-17
- {%hackmd /@wiimax/intro-hackmd-017 %}

//編輯連結
https://hackmd.io/i0LbXWybTTapFgAPEZbO9w
- {%hackmd /@wiimax/i0LbXWybTTapFgAPEZbO9w %}

嵌入 `{HackMD}` 注意事項

不要嘗試貼自己本身的連結，無窮迴圈會拖累效能。

`{}`與`<iframe>`最大差異

{}嵌入有優化
<iframe>嵌入，部分JS失效
<iframe>嵌入非常占用記憶體資源

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #20

HackMD

嵌入`<iframe>`運用

嵌入語法

`<iframe src="網址"></iframe>`

<iframe src="網址" frameborder="0" width="600" height="400"></iframe>
<iframe src="網址" frameborder="0" width="100%" height="400"</iframe>

嵌入`<iframe>`優點

彈性整合各資源

嵌入`<iframe>`缺點

載入速度增加
消耗記憶體資源
不利搜索引擎檢索

嵌入`<iframe>`示範

(點選連結)

可發言的簡報

可共筆的簡報

可展示簡報的簡報

滿版iframe(背景嵌入)

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #21

HackMD

書本模式與外部連結

書本模式的清單

會變成內頁
可以是HackMD分享連結
可以是外部連結!

書本模式外部連結DEMO

HackMD

筆記、書本、簡報皆可用

書本模式另開視窗

[](link)[tatget=_blank]

外部連結注意事項

-可能會拒絕連線，跟iframe情況一致 -可能手機瀏覽有問題

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #22

HackMD

與 Google 文件共舞

Google 文件

文件、試算表、簡報、問卷…

可以共享、可以有權限設定、線上撥放

招式一

就是一個超連結

招式二

嵌入`<iframe>`

招式三

書本模式

運用 Google 雲端硬碟開啟 Office 檔案

書本模式外部連結DEMO

建議點閱

恭喜!!

您實現了Office遠端編輯同步功能

PPT、EXCEL、WORD 皆適用

Word

以Google文件線上編輯

PPT

以Google文件線上編輯

PDF

存Google雲端硬碟，將檔案連結末尾從`/view`改為`/preview`

MP4

存Google雲端硬碟，將檔案連結末尾從/view改為/preview。但手機會異常顯示

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #23

HackMD

嵌入 Colab with Gist

Colab

Google 的應用之一，可在瀏覽器中編寫及執行 Python 程式碼

Colab優點

不必進行任何設定
免付費使用
輕鬆共用

Colab 存放地點

在 Google 雲端硬碟儲存
在 GitHub Gist 儲存
在 GitHub 儲存
在本機儲存為.ipynb
在本機儲存為.py

Colab 不能用`<iframe>` 嵌入

哪種方法可以 HackMD

結合 Colab ?

方法一

分享超連結

方法二

存至Gist以`{}`內嵌Colab

{%gist 171dccff8e7ade253ea6ddad3ae262d4 %}

結合`:::spoiler`切換展示效果

:::spoiler
{%gist 171dccff8e7ade253ea6ddad3ae262d4 %}
:::

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #24

HackMD 與

本機 VS Code 協作

方法一

您可以一鍵下載所有筆記

透過VS Code

本機開啟解壓縮的資料夾

本機以 MarkDown 語法編輯筆記

注意事項

只是下載了HackMD檔案，本地編輯與網頁檔案不同步。

方法二

安裝VS Code 的 HackMD 套件

HackMD - Visual Studio Marketplace

在 VS Code 登入 HackMD

側邊欄有HackMD圖示，可以看歷史資料

可以在 VS Code 閱覽

可用命令列指令

將本機檔案上傳至HackMD當筆記
滑鼠右鍵呼叫"命令列選擇區"

注意事項

目前 HackMD 外掛可拉取歷史編輯資料
但不允許在 VS Code 編輯
可以Open note on HackMD

VS Code 的 HackMD 套件

可用的2個命令列指令

ctrl + shift + p

> HackMD: Create note from editor

在 VS Code 任一檔案開啟命令列
用命令區執行指令
另開 HackMD 網頁確認

> HackMD: Create a code snippet

在 VS Code 選取要貼去 HackMD 的程式碼
用命令列執行指令
另開 HackMD 網頁確認

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #25

HackMD 佐

Obsidian

可以做為第二大腦，建構知識網絡
以本機資料夾的.md檔為文檔結構，不是資料庫
以雙層中括號[[]]做為雙向連結的知識網路節點
原則免費

可以用網絡檢視筆記

進一步請參閱官方介紹

換言之本機的.md檔

可以用 Obsidian 開啟
可以用 VS Code 開啟，上傳至 HackMD

打造自己的知識系統

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #26

HackMD API

來用 Python 串接吧

HackMD API

注意!!

HackMD API

目前為付費功能

(更正影片說法，目前免費可用)

HackMD User API

{
    "id": "00c437e8-9d79-4200-997f-8e9384415a76",
    "name": "James",
    "email": null,
    "userPath": "AMQ36J15QgCZf46ThEFadg",
    "photo": "https://avatars.githubusercontent.com/u/26138990?s=96",
    "teams": [
        {
            "id": "e9ed1dcd-830f-435c-9fe2-d53d5f191666",
            "ownerId": "00c437e8-9d79-4200-997f-8e9384415a76",
            "path": "CAT",
            "name": "API client testing team",
            "logo": "data:image/svg+xml;base64,...",
            "description": "This is for testing client API",
            "visibility": "public",
            "createdAt": 1644371278721
        }
    ]
    }

User Notes API

[
   {
      "id": "ehgwc6a8RXSmcSaRwIQ2jw",
      "title": "Personal note title",
      "tags": ["personal", "test"],
      "createdAt": 1643270371245,
      "publishType": "view",
      "publishedAt": null,
      "permalink": null,
      "shortId": "SysJb0yAY",
      "lastChangedAt": 1643270452413,
      "lastChangeUser": {
          "name": "James",
          "photo": "https://avatars.githubusercontent.com/u/26138990?s=96",
          "biography": null,
          "userPath": "AMQ36J15QgCZf46ThEFadg"
      },
      "userPath": "AMQ36J15QgCZf46ThEFadg",
      "teamPath": null,
      "readPermission": "guest",
      "writePermission": "signed_in",
      "publishLink": "https://hackmd.io/@username/permalink"
    }
 ]

Teams API

Team Notes API

(略)

Try on Postman

PyHackMD

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #27

HackMD API 打造

LINE-BOT 賴爸特助

手機是黏在身體的一部分

作筆記、收藏資料沒那麼方便

那就結合

LINE Message API

x

HackMD API

打造駭客MD賴爸特助吧

功能需求

標示@靈感作為一個獨立的靈感筆記
標示@TODO作為一個連續的的代辦清單
都不標示就持續附加在暫存筆記裡

程式碼在此

https://github.com/willismax/hackmd-line-bot-on-fly

歡迎 Fork / Star

首先在 LINE Developers 啟用一個 Channel

取得以下資訊

CHANNEL_ACCESS_TOKEN = ''
CHANNEL_SECRET = ''
LINE_USER_ID = ''

部署到 Fly.io

https://hackmd.io/@wiimax/flask-on-fly

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #28

HackMD

客製佈景主題

HackMD 可插入 CSS 樣式

`<style></style>`

HackMD 可內嵌筆記

`{%hackmd noteid %}`

CSS 模板可以到處嵌入了

在哪裡找布景主題?

整理主題介紹與範例

Dark 佈景主題

{%hackmd BJrTq20hE %}
{%hackmd hackmd-dark-theme %}

Notion 佈景主題

{%hackmd @themes/notion %}

OrangeHeart 佈景主題

{%hackmd @themes/orangeheart %}

Dracula 佈景主題

{%hackmd @themes/dracula %}

Conversational 對話式佈景主題

`{%hackmd @yukai/conversational-theme %}`

Medium 佈景主題

{% hackmd @yukai/medium-theme %}

中文直書的主題

{%hackmd SkPurArK4 %}

直書主題僅供「預覽模式」，不能編輯+預覽

- 網友分享毛毛的前端筆記:

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #29

HackMD

自製範本

透過範本加速筆記效率

免費版容許3個自製範本

自製靈感筆記範本

自製簡報範本

自製文獻筆記範本

從範本新增

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #30

系列小結

系列文編輯方式

HackMD 書本模式管理
文章錄製、編輯、上傳進度管理
每日簡報模組化製作
累積簡報模組化結合

挑戰心得

完成連3年鐵人賽
一步一腳印，累積不會白費

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

小題大作的 30 個

HackMD技巧

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #2

HackMD 的

前世今生

HackMD

媒體報導

各大技術研討會指定採用

吳承翰 2016 MOPCON分享

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #3

HackMD 的編輯介面

編輯區-左上方

編輯區-右上方-分享方式

編輯區-右上方-更多選項

編輯區-左上方-功能選單

編輯區-下方-文件資訊

編輯區-左下方-畫筆

編輯區-左下方-換行

編輯區-左下方-智慧工具

POWER!!

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #4

HackMD 與常用筆記軟體比較

想用筆記的時機?

您有用過那些數位工具/筆記軟體

卡片盒筆記 ZettelKasten

卡片盒筆記的 3 種筆記類型

HackMD

台灣原生

即時紀錄 協作 共享知識

知識分享的類公共財

HackMD

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #5

HackMD 與 MarkDown

MarkDown前世今生

MarkDown 為了簡化 HTML 而生

MarkDown延伸閱讀

MarkDown語法無所不在

Markdown常用指令

標題H1 #

標題H2 ##

標題H3 ###

標題H4 ####

引用 >

清單 -、1

無序清單：*、+、-

有序清單：1.～5.

CheckBox

巢狀清單用4個空白或是1個TAB縮排

小數點

程式碼 - 單行

程式碼 - 多行

HTML

換行分隔線：

超連結

有alt說明的超連結

參考的連結

強調：以*或_包圍的文字

圖片

圖片

有調整尺寸的圖片

有調整尺寸、加上文字說明的圖片

將方形圖改成圓形圖

表格

表格-置中

表格-靠右

MathJax

HackMD編輯介面

官方功能介紹

官方進階功能

小結

THANK YOU

2022 iThome鐵人賽

小題大作的 30 個 HackMD技巧 #6

HackMD 的

即時紀錄協作共享知識

標題H1 `#`

標題H2 `##`

標題H3 `###`

標題H4 `####`

引用 `>`

清單 `-`、`1`

無序清單：`*`、`+`、`-`

有序清單：`1.`～`5.`

巢狀清單用4個空白或是1個`TAB`縮排

強調：以`*`或`_`包圍的文字

編輯區上方用`---`包住以下程式碼，會是YAML設定檔

3個減號`---`當分隔線

4個減號`----`當次分隔線