如何在 Visual Studio Code 中快速使用 Markdown 建立簡報

今天看到保哥分享 vscode-reveal 套件可以直接在 visual studio code 中使用 reveal.js 來開啟 markdown 檔做成簡報，感覺很像之前文章 用 Markdown 與 Reveal.js 來製作簡報 分享的做法，所以立馬吸引了我的目光，因此特別來體驗比較一下

Visual Studio Code 安裝 vscode-reveal 套件(擇一即可)

  1. 使用指令安裝

    • ctrl+p

      ext install vscode-reveal

  2. 使用介面安裝

    • Extensions –> Search ‘vscode-reveal’ –> Install 1install

Visual Studio Code 如何開啟簡報(擇一其可)

先開啟 markdown 檔案

  1. 使用快捷鍵

    • Ctrl+Shift+P –> Revealjs: Show presentation by side

      3showside

  2. 使用介面

    • View –> Command Palette… –> Revealjs: Show presentation by side

      2command

      3showside

設定參數

  • 參數內容比照 reveal.js

  • 參數的設定直接寫在 markdown 檔的開頭當做第一頁

    ---
progress: true
slideNumber: true
history: true
---
簡報開始
---
    NameDescriptionDefault
    notesSeparator註解標記note:
    separator換頁符號---
    verticalSeparator垂直簡報分割符號--
    theme佈景主題：
    black
    white
    league
    beige
    sky
    night
    serif
    simple
    solarized    		black
    highlightTheme高亮主題Zenburn
    controls是否顯示換頁控制器true
    progress是否顯示簡報進度條true
    slideNumber是否顯示簡報頁數false
    history簡報換頁是否保留至瀏覽器紀錄false
    keyboard是否啟用鍵盤來換頁true
    overview是否啟用簡報全覽true
    center是否將內容垂直置中true
    touch是否啟用觸控功能來換頁true
    loop循環顯示簡報false
    rtl改變簡報順序成由右至左false
    shuffle每次換頁都隨機載入false
    fragments是否開啟區塊逐步顯示true
    embedded是否開啟 embedded modefalse
    help按下 ? 是否在最上層顯示相關資訊true
    showNotes是否直接顯示註解內容false
    autoSlide自動換頁毫秒數，0 表示停用自動換頁
    可以被簡報的 data-autoslide 屬性複寫    		0
    autoSlideStoppable當使用者屬入時停用自動換頁true
    mouseWheel是否啟用滑鼠滾輪來換頁false
    hideAddressBar在手機上隱藏 urltrue
    previewLinks內嵌連結內容false
    transition轉場特效：
    none
    fade
    slide
    convex
    concave
    zoom    		slide
    transitionSpeed轉場速度：
    default
    fast
    slow    		default
    backgroundTransition背景的轉場特效：
    none
    fade
    slide
    convex
    concave
    zoom    		fade
    viewDistance預先載入的頁數3
    parallaxBackgroundImage視差背景圖-
    parallaxBackgroundSize視差背景大小
    (CSS syntax, e.g. 2100px 900px)    		-
    parallaxBackgroundHorizontal每頁簡報視差背景水平移動的距離-
    parallaxBackgroundVertical每頁簡報視差背景垂直移動的距離-

心得

  1. 不需另外設架網頁伺服器
  2. 不需自己調整載入的 js 、css 、md 檔
  3. 參數設定方式較簡潔
  4. 在 visual studio code 中顯示簡報比較麻煩，有內容更新都要關閉預覽視窗再重開才會生效(瀏覽器只需 refresh)
  5. 一樣可以匯出 pdf ，詳細做法請參考 如何將 Reveal.js 簡報匯出成 PDF

總言之非常推薦改用這個做法

參考資訊

  1. vscode-reveal(VSC markeplace)
  2. vscode-reveal(GitHub)
  3. reveal.js
  4. 用 Markdown 與 Reveal.js 來製作簡報
  5. 如何將 Reveal.js 簡報匯出成 PDF