使用 hackmd online editor 與 markdown 語法製作工程師簡報

  • outline:
    1. 章節與小節語法
    2. 更換投影片背景顏色
    3. 為內容加上淡出動畫
    4. 調整投影片轉場動畫
    5. 調整投影片轉場速度

HackMD 投影片語法介紹：

章節與小節語法

按鍵與方向 定義 分頁符號
→ 章節 - - -
↓ 小節 - - - -

範例：

假設我們要介紹一本書從首頁～第二章它的結構如下

  • 首頁
  • 第一章
    • 1.1 節
    • 1.2 節
  • 第二章

語法範例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
首頁
--- (→ 章節)
 
# 第一章
---- (↓ 小節)
# 1.1 節
內容..
---- (↓ 小節)
# 1.2 節
內容..
--- (→ 章節)
# 第二章

小提醒

  • 分頁符號最好前後加上空行，才不會有語法沒有解析到的情形
  • 分頁符號解析成功在編輯器內會變成藍色
  • 按下 esc 可以看到簡報結構

更換投影片背景顏色

Is the background syntax

1
<!-- .slide: data-background="#1A237E" -->`

將需要的顏色使用 Hex Color 修改成相對應色碼既可。

為內容加上淡出動畫

Is the fragment syntax

1
<!-- .element: class="fragment" data-fragment-index="1" -->

直接修改 data-fragment-index="1" 的值就可以調整出場順序

淡出動畫 範例：

1
2
3
4
5
6
7
8
---
## 淡出動畫
- 淡出動畫1<!-- .element: class="fragment" data-fragment-index="1" -->
- 淡出動畫2<!-- .element: class="fragment" data-fragment-index="2" -->
- 淡出動畫2<!-- .element: class="fragment" data-fragment-index="3" -->
---

調整投影片轉場動畫

Is the transition syntax

1
<!-- .slide: data-transition="concave" -->

轉場動畫其他效果：

效果名稱 效果
none 無
fade 淡入淡出
slide 向左平移
convex 向內旋轉
concave 向外旋轉
zoom 向外放大

並且可以分別為投影片 進/出場，加上後綴符號設定：

  • 進場：-in
  • 出場：-out
1
2
特效加上後綴符號範例:
<!-- .slide: data-transition="zoom-in convex-out" -->

調整投影片轉場速度

Custom the transition speed!

1
<!-- .slide: data-transition-speed="fast" -->

速度有三種可以調整：

  • default
  • fast
  • slow