在VS code裡使用Marp快速製作需要有數學公式和程式碼的美美簡報投影片

更新於 發佈於 閱讀時間約 11 分鐘

最近正在準備開學第一、二週的簡報內容,如果簡報內需要用到數學公式也需要用到程式碼的話,使用powerpoint實在是有點麻煩,於是我決定使用Marp來讓我可以快速的製作簡報,使用VS code的extension的話,也很方便管理程式碼和簡報,這篇文章分享用Marp for VS Code來製作簡報。

什麼是Marp

來源:Marp的官方網站

Marp是Markdown Presentation Ecosystem的簡稱,它可以幫助我們簡單使用基於markdown的語法來進行簡報的編輯。

對我來講,有幾個很不錯的優點:

  1. 節省時間,不論是打字的時間還是美化的時間都是
  2. 不用排版,它會自動幫忙排
  3. 可以熟悉Markdown語法
  4. 可以快速輸入程式碼或是數學公式
  5. 基於html/css/javascript的前端架構,所以想要做個人化調整可以用html語法調整。

雖然我的主業並不是做前端,但是因為自己也需要寫個人網頁等等介面,所以雖然我的html寫得不怎麼漂亮,但是基本的一些html/css還是沒問題,這也讓我可以很方便的客製自己想調整的簡報Layout或美編。

前置作業

  • 電腦已經有用Visual Studio Code (VS code)
  • 知道怎麼建一個 OOOO.md 的markdown檔案
  • 會一點基礎的html更好
  • 會寫mathjax或katex語法很方便

在VS code使用Marp

在自己的VS code裡面去extension market輸入Marp,應該不難找到這個擴充應用

基本操作

安裝好之後,在自己的folder裡面建立一個檔案,例如 my_presentation.md

輸入一些基本的設定如下:

<my_presentation.md>

---
marp: true
theme: default
title: my presentation
author: Guan-Yun Wang
---

以上寫的是一些基本的設定,如果還需要其他的設定,可以再加入:

---
marp: true
theme: default
title: my presentation
author: Guan-Yun Wang
footer: "G.W."
class:
- lead
- invert
paginate: True​
---

其中,theme 指的是主題,除了default可以使用之外,還有 gaiauncover可以選。而 footer是在投影片左下角的呈現的文字,paginate是頁碼,呈現在右下角,class則是指的是排版等美化,其實以html來說,相當於 <div class="">裡面要填入的內容,如果填了lead指的是文字置中(但default主題不支援),如果是invert指的是明亮色調互換。

首頁不同

如果只是想要首頁不同,可以在前面加入_,就可以只做首頁設定。例如

---
marp: true
theme: default
title: my presentation
author: Guan-Yun Wang
footer: "G.W."
_footer: ""
_class:
- lead
- invert
paginate: True
_paginate: False​
---

可以注意到第7行,我加入了_footer: "",這樣一來,首頁的頁尾就會變成空白,而且因為第12行 _paginate: False的關係,也不會有頁碼。


來寫第一頁簡報吧

上面的設定是我蠻喜歡的設定,那麼就來寫第一張簡報吧。

接著再繼續寫:

---
# Week 1
## Course Orientation
Guan-Yun Wang
2025.02.17
---

就會呈現如下圖的效果:

raw-image

那因為這是defaulttheme所以不會有置中效果,但如果換成gaia,如下:

raw-image

一鍵完成主題的轉換。

其他示範

可以寫程式碼、寫數學式子,例如以下範例

---
# Test
<!-- display local image -->
![這裡可以放圖片](./assets/my_picture.png)

<!-- display python code -->
如果要寫程式碼,例如Python
```python
1 print("Hello World")
2 #也可以不要加數字就沒有行數
```

數學式子示範(多行置中)

$$
\begin{align}
f(x) &= x^2+2x+1 \\
&=(x+1)(x+1)\\
&=(x+1)^2\\
\end{align}
$$

也可以把數學式子 $(x+1)$ 放在句子裡面。預設是Mathjax的語法。
---

呈現出來的效果如下:

raw-image

靈活運用 html

如果要修改排版的話,可以直接把html加入到裡面,但是在使用html語法之前,先確認一下extension setting有沒有把html打開。如果不能正常顯示html語法,可能就是這個沒有打開。

raw-image

如果裝好這個擴充的話,應該可以在右上角找到它的圖示,那麼就可以很簡單的找到設定的地方。

raw-image

確認HTML有可以運作,那麼就可以使用html做更多更進一步的操作。

我最常用是修改文字大小或者是想要設計一點顏色,那麼我就會直接在我想要改的那個段落的前後加入一些Html tag

---​
# Color and Day​

<div style = "font-size:22px;">

|Date|Color|
|---|---|
|1/1| Red|
|1/2| Blue|
|1/3| Orange|

<div>

<div style ="background:rgb(230,245,245)">

這是一個測試背景顏色的區塊
這是一個測試背景顏色的區塊
這是一個測試背景顏色的區塊

</div>



---​

效果如下:

raw-image

這裡也同時呈現了用markdown來畫表格的方法,此外,由於這是基於網頁前端的架構,所以其實表格是可以超過簡報的大小的,它會自動變成一個拉霸。另外,也可以透過background來設定背景顏色。

那其他如果很熟悉css語法的話,其實可以直接使用 <style>...</style>在裡面寫好自己喜歡的css,也可以直接自己call來使用,就可以快速的客製化自己想要的樣子。\

而我自己在做簡報的時候,通常都是一邊開著預覽來寫,大概是這樣:

raw-image

這樣就可以一邊寫簡報,一邊即時的看排版出來的樣子是不是自己喜歡的感覺。而因為這樣能專注在文字的輸入上,我個人蠻喜歡這樣製作簡報的方式,比較直接,就像是認真的在寫自己的技術筆記一樣,寫著寫著簡報就做完了。

輸出成簡報

做完簡報之後,就可以來輸出囉。

raw-image

可以點選右上角圖示,選擇Export Slide Deck。

raw-image

大致上有這幾種檔案類型可以選擇。

另外,由於他是基於網頁前端的一個架構,所以如果變成pptx的話,它只會是一張張的圖片,雖然可以另外開功能讓它變成可供編輯的pptx,可是這個功能目前還在測試當中,可能會有Layout崩壞的風險。

但是,正是因為它基於網頁前端技術,所以如果輸出成html,我覺得是最漂亮好用的。

raw-image

它會呈現一個簡報模式,如果開啟投影模式(最右邊的圖示),甚至還會出現演講者備忘稿。如果使用bullet來列點,甚至也會有基本的文字轉場動作。

raw-image

而演講者備忘稿,就是我們在原本的.md檔裡面所寫的<!-- -->的註解。另外會顯示當下的時間以及所經過的時間。

另外,如果要當成講義方便發給其他人,輸出成pdf比較容易發放,pdf格式的話,也仍然會維持著一頁一頁的版面配置,而且也可以複製文字,若有超連結也都可以點選等等。所以也是一個很方便的選擇。

最後補充,使用jupyter notebook也可以快速的轉成簡報,不過因為我還是蠻喜歡這個簡報風格,所以目前我使用了Marp做了前一兩週份量的簡報。而Marp生態系似乎也還有其他可供串接的,不過目前為止我還算夠用,有發現到進階好用的工具再分享囉。

參考網站&資源

Marp.app: https://marp.app/

Marp for VS Code:https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

Marp for VS code github readme: https://github.com/marp-team/marp-vscode/blob/main/README.md

https://github.com/marp-team/marp-core#features

分欄技巧補充:Marp 教程:实现分栏和其他高级排版技巧

HTML tag無法作動時:https://github.com/marp-team/marp-vscode/issues/140

國外blogger的介紹:https://dev.to/rprabhu/marp-a-markdown-presentation-app-that-simplifies-your-tech-talks-37m4

Marp Guide Github: https://github.com/marp-team/marp/tree/main/website/docs/guide

其他技巧補充:https://www.hashbangcode.com/article/seven-tips-getting-most-out-marp


留言
avatar-img
留言分享你的想法!
avatar-img
Life Notes | Guan-Yun Wang
119會員
146內容數
高中時候夢想成為一位「文人」,至今依舊。雜食性熱愛學習,念過中文系、心理所、資訊所。古有六藝:禮樂射御書數。願以文字為核心,建立我的六藝。這是我的沙龍,包含文學、心理學、AI、資訊工程,還有很多雜七雜八。透過書寫持續成長,讓今天的自己比昨天更好,散發正能量。E-mail: gywang.tp@gmail.com
2025/04/13
上個星期結束了期中考週,總算撐完了半個學期的課程。印象中好像在念研究所當TA的時候曾經有幫老師出過考題,不過實在不太記得要怎麼出考題,所以光是出題目也花費了不少時間。 在期中考前考了一次小考,全班平均50分,也讓我有點擔心同學們期中考以及之後學期總成績的表現,考前也有多多提醒同學考點,並且給了同學
Thumbnail
2025/04/13
上個星期結束了期中考週,總算撐完了半個學期的課程。印象中好像在念研究所當TA的時候曾經有幫老師出過考題,不過實在不太記得要怎麼出考題,所以光是出題目也花費了不少時間。 在期中考前考了一次小考,全班平均50分,也讓我有點擔心同學們期中考以及之後學期總成績的表現,考前也有多多提醒同學考點,並且給了同學
Thumbnail
2025/03/09
最近正在進行期中考題的出題,並且在設計大語言模型這門選修課和資料結構這門必修課的作業的時候,我一直在想一個核心的問題:同學們需要什麼樣的能力,讓他們在畢業之後可以用來當作面對如今變化多端的業界的武器?程式設計師會被AI時代淘汰嗎? 可以用ChatGPT寫作業嗎? 由於ChatGPT等強大的基於大
Thumbnail
2025/03/09
最近正在進行期中考題的出題,並且在設計大語言模型這門選修課和資料結構這門必修課的作業的時候,我一直在想一個核心的問題:同學們需要什麼樣的能力,讓他們在畢業之後可以用來當作面對如今變化多端的業界的武器?程式設計師會被AI時代淘汰嗎? 可以用ChatGPT寫作業嗎? 由於ChatGPT等強大的基於大
Thumbnail
2025/02/22
這個星期大學開學,對我來說,就是進入到學術界正式開工的第一個星期。開學前兩個星期的時間忙著熟悉學校的系統、確認辦公室、熟悉去學校的路,以及也花了不少時間備課,思考一整個學期要做些什麼等等。總算是平安度過了第一個星期。 多數時候都是自己一個人的工作 偶爾還是會想起以前工作的同事或主管,看著時間,有
Thumbnail
2025/02/22
這個星期大學開學,對我來說,就是進入到學術界正式開工的第一個星期。開學前兩個星期的時間忙著熟悉學校的系統、確認辦公室、熟悉去學校的路,以及也花了不少時間備課,思考一整個學期要做些什麼等等。總算是平安度過了第一個星期。 多數時候都是自己一個人的工作 偶爾還是會想起以前工作的同事或主管,看著時間,有
Thumbnail
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
最近正在準備開學第一、二週的簡報內容,如果簡報內需要用到數學公式也需要用到程式碼的話,使用powerpoint實在是有點麻煩,於是我決定使用Marp來讓我可以快速的製作簡報,使用VS code的extension的話,也很方便管理程式碼和簡報,這篇文章分享用Marp for VS Code來製作簡報
Thumbnail
最近正在準備開學第一、二週的簡報內容,如果簡報內需要用到數學公式也需要用到程式碼的話,使用powerpoint實在是有點麻煩,於是我決定使用Marp來讓我可以快速的製作簡報,使用VS code的extension的話,也很方便管理程式碼和簡報,這篇文章分享用Marp for VS Code來製作簡報
Thumbnail
有時候我們要在ppt上展現動態的分析圖,像是在ppt上要呈現出樞紐分析圖,其實是不可能的。唯一的作法是自已要弄出一個類似樞紐分析圖的介面,然後用VBA操作ppt內嵌excel的樞紐分析表。
Thumbnail
有時候我們要在ppt上展現動態的分析圖,像是在ppt上要呈現出樞紐分析圖,其實是不可能的。唯一的作法是自已要弄出一個類似樞紐分析圖的介面,然後用VBA操作ppt內嵌excel的樞紐分析表。
Thumbnail
Excel好好玩VBA-菜緒 (https://portaly.cc/ezyvba) VBE輔助工具一個針對Excel VBA撰寫的輔助工具 代碼對齊排版、排序、刪空行、刪註解、簡易VBA收集(可新增、刪除)..
Thumbnail
Excel好好玩VBA-菜緒 (https://portaly.cc/ezyvba) VBE輔助工具一個針對Excel VBA撰寫的輔助工具 代碼對齊排版、排序、刪空行、刪註解、簡易VBA收集(可新增、刪除)..
Thumbnail
本篇主要是設計,當【沒有任何數值】與【原本就有數值】這兩種情況結合在一起時的 VBA 解決方案。分享內容包括張忍大師的函數解決方法。文章中包含影片檔案下載以及參考文獻連結。
Thumbnail
本篇主要是設計,當【沒有任何數值】與【原本就有數值】這兩種情況結合在一起時的 VBA 解決方案。分享內容包括張忍大師的函數解決方法。文章中包含影片檔案下載以及參考文獻連結。
Thumbnail
本篇文章分享從製作數據分析報告到PPT簡報技巧,內容包括數據分析報告的構成要素、主體的清晰邏輯設定,以及製作精準PPT簡報的方法。提供從製作報告的過程到提升製作效率的建議,適合初入職場的數據分析新人們參考喔~
Thumbnail
本篇文章分享從製作數據分析報告到PPT簡報技巧,內容包括數據分析報告的構成要素、主體的清晰邏輯設定,以及製作精準PPT簡報的方法。提供從製作報告的過程到提升製作效率的建議,適合初入職場的數據分析新人們參考喔~
Thumbnail
這篇文章介紹瞭如何使用VBA來控制Powerpoint,以及透過VBA控制Powerpoint的好處,包括動態資料的圖表簡報、改變表格底色、串接API等。文章強調了了解物件和屬性的關係後,就可以開始探索VBA控制Powerpoint的各種可能性。
Thumbnail
這篇文章介紹瞭如何使用VBA來控制Powerpoint,以及透過VBA控制Powerpoint的好處,包括動態資料的圖表簡報、改變表格底色、串接API等。文章強調了了解物件和屬性的關係後,就可以開始探索VBA控制Powerpoint的各種可能性。
Thumbnail
想來想去,可以做很多主題。但我覺得最有熱情做的主題,還是與數學有關的一些主題。比如說,我們可以拍攝影片,講解一些數學證明的推導過程。這個是蠻有意思的。而且,你就可以去累積,應該說有一個輸出的管道,你就可以把那些數學推導的過程,以及一些很不錯的內容推廣出去。
Thumbnail
想來想去,可以做很多主題。但我覺得最有熱情做的主題,還是與數學有關的一些主題。比如說,我們可以拍攝影片,講解一些數學證明的推導過程。這個是蠻有意思的。而且,你就可以去累積,應該說有一個輸出的管道,你就可以把那些數學推導的過程,以及一些很不錯的內容推廣出去。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News