點我

回到 HackMD 教學首頁

點我

給予建議 或回報BUG

用 HackMD 做簡報

HackMD 整合了 reveal.js，讓我們可以用 Markdown 輕鬆寫簡報。讓我們開始吧！

點此看本份文件原始碼

製作簡報與分頁

只要 HackMD 有支援的 Markdown 語法就能放進簡報裡面，無論是流程圖、內嵌 Youtube 影片或是 Latex 語法都行！

我們用「三個連字號」（-）組成的「分隔線」來區別簡報的分頁，記得在前後各加上一個空行：

提示

分隔線前後都要加空行，才能正確分頁！

# 簡報標題一

## 簡報標題二

---

- 清單
- 清單

在編輯時，預覽選擇「瀏覽模式」呈現這樣

預覽選擇「簡報模式」呈現這樣

這裡有更詳細的範例：Slide-example

 

開啟筆記的簡報模式

要怎麼將右側改為簡報模式顯示呢？

1. 打開右上角的的共享選單「」
2. 在在瀏覽模式的下拉選單裡，選擇「 簡報模式」
3. 按下「預覽」按鈕，便會在新分頁開啟筆記的簡報模式。

簡報總覽模式

在簡報模式下，可以按下 Esc 鍵進入「總覽模式」，全部簡報一覽無遺

在總覽模式下，我們用方向鍵切換不同的簡報頁面，按下 Enter 進入選擇的簡報頁面

講者模式

在簡報模式下按下 s 鍵，會彈出講者模式的獨立視窗。在這裡你可以看到這次簡報的用時，以及每張投影片的速記：

以章節組織簡報

在你的簡報中可能會有多個不同的主題，我們可以用「章節」的方式來組織這些頁面，無論是在總覽模式或是切換簡報時都會更有條理。

以 HackMD - Markdown 協作筆記 @ 2016 MOPCON 這篇簡報為例，可以看到講者在「如何協作同步」、「資料儲存架構」、「如何記錄修訂版本」這幾個主題下（左右方向），分別加上了投影片去詳細描述不同主題（上下方向）。

一、如何建立簡報章節呢？

以下方的灰色區塊舉例，您可以使用四個連字號來分隔單一章節內衍生簡報。

章節內簡報用 ----（四個連字號）來分頁，連字號前後都必須有空行來分隔頁面。

想在一個章節之後接上一個普通的分頁，或是另開新章節，請用 --- （三個連字號）。

# 章節 1

---

# 章節 2

----

## 章節 2.1

----

## 章節 2.2

---

# 章節 3

使用 YAML 在雙欄模式預覽簡報

您可以在筆記的編輯器開頭加入 YAML 設定，使製作簡報的效率再升級！

將下面的設定插入整篇筆記的最頂端，就能立即在右側預覽。

---
type: slide
---

下載簡報為 PDF 格式

在簡報模式頁面捲動到底部，會發現印表機的按鈕 :

點擊之後會進入簡報的列印模式，此時利用瀏覽器內建的「列印成 PDF」功能，就能把簡報輸出成 PDF 囉！

進階用法：自訂簡報樣式

如想自訂簡報樣式，請按「分享」，再點擊「自訂簡報選項」。

即可在底下的文字欄位，用 YAML 語法自訂簡報選項。

舉例來說：

theme: solarized  # 顏色主題
transition: slide # 換頁動畫

將以上範例貼到簡報選項：

再按「更新」即可

若要使用縮排，請確定 YAML 設定檔區塊的縮排是 兩個空白。在 YAML 格式中，我們在每行的最前面加上 #（井字符號）代表註解。註解內的設定值會被忽略。

更多的設定值請參考可用的 YAML 設定值

---

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

使用 YAML 標頭的設定會影響整份簡報，如果只想要調整單頁的話，可以用這樣的語法來設定：

<!-- .slide: -->

例如，想要自訂簡報背景的話可以這麼做：

---

<!-- .slide: data-background="https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg" -->

#### testslide

---

---

進階功能：簡報聚光燈

忘記帶簡報筆，或者線上會議只能用游標指示你說的重點？你可以使用簡報聚光燈！
在 YAML 設定檔加以下的設定值：

slideOptions:
  spotlight:
    enabled: true

設定後開啟簡報模式，在畫面上按下左鍵，就會開啟聚光燈囉！

提示

在聚光燈模式下，要用方向鍵才能換頁哦！

---

Demo

---

進階功能：簡報倒數計時

想要在限定的時間內精準傳遞你的訊息，又不想一直看錶？可以用簡報倒數計時的功能來提示自己！
在 YAML 設定檔加上設定值：

slideOptions:
  allottedMinutes: 5  # 預計一張簡報花幾分鐘

設定後開啟簡報模式，會看到原本藍色簡報進度條的上方多了紅色的長條，代表目前經過的時間，與進度條對照就會清楚目前簡報的用時，是超前還是落後

---

Demo

---

可用的 YAML 設定值

# Display controls in the bottom right corner
controls: true

# Display a presentation progress bar
progress: true

# Set default timing of 2 minutes per slide
defaultTiming: 120

# Display the page number of the current slide
slideNumber: false

# Push each slide change to the browser history
history: false

# Enable keyboard shortcuts for navigation
keyboard: true

# Enable the slide overview mode
overview: true

# Vertical centering of slides
center: true

# Enables touch navigation on devices with touch input
touch: true

# Loop the presentation
loop: false

# Change the presentation direction to be RTL
rtl: false

# Randomizes the order of slides each time the presentation loads
shuffle: false

# Turns fragments on and off globally
fragments: true

# Flags if the presentation is running in an embedded mode,
# i.e. contained within a limited portion of the screen
embedded: false

# Flags if we should show a help overlay when the questionmark
# key is pressed
help: true

# Flags if speaker notes should be visible to all viewers
showNotes: false

# Global override for autolaying embedded media (video/audio/iframe)
# - null: Media will only autoplay if data-autoplay is present
# - true: All media will autoplay, regardless of individual setting
# - false: No media will autoplay, regardless of individual setting
autoPlayMedia: null

# Number of milliseconds between automatically proceeding to the
# next slide, disabled when set to 0, this value can be overwritten
# by using a data-autoslide attribute on your slides
autoSlide: 0

# Stop auto-sliding after user input
autoSlideStoppable: true

# Use this method for navigation when auto-sliding
autoSlideMethod: Reveal.navigateNext

# Enable slide navigation via mouse wheel
mouseWheel: false

# Hides the address bar on mobile devices
hideAddressBar: true

# Opens links in an iframe preview overlay
previewLinks: false

# Transition style
transition: 'slide' 
# none/fade/slide/convex/concave/zoom

# Transition speed
transitionSpeed: 'default'
# default/fast/slow

# Transition style for full page slide backgrounds
backgroundTransition: 'fade'
# none/fade/slide/convex/concave/zoom

# Number of slides away from the current that are visible
viewDistance: 3

# Parallax background image
parallaxBackgroundImage: ''
# e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"

# Parallax background size
parallaxBackgroundSize: ''
# CSS syntax, e.g. "2100px 900px"

# Number of pixels to move the parallax background per slide
# - Calculated automatically unless specified
# - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: null
parallaxBackgroundVertical: null

# The display mode that will be used to show slides
display: 'block'

# Enable spotlight mode
spotlight:
  enabled: true
  
# Enable timer (in minutes)
allottedMinutes: 5