支援markwon寫ppt的工具marp-調研1.需求2.調研3. 安裝與插件4. 支援md文法-常用4. 支援md文法-表格4. 支援md文法-文法高亮4. 支援md文法-公式&圖形

1.需求

• 使用markdown寫ppt
• 支援大部分markdown文法，含高亮、公式及表格等
• 支援轉為html，在浏覽器中展示

2.調研

符合條件的工具：marp

用法參考

• Marp之簡單編寫PPT格式範例
• office-example

3. 安裝與插件

• vscode有插件 md檔案中添加如下注釋，啟動在view的時候轉化為marp

---
marp: true
---
           

• 官方有各平台的ide可以在download裡下載下傳使用

4. 支援md文法-常用

1. 二級标題

• 重點 加粗

引用支援不好

1. 1
2. 2
3. 3

4. 支援md文法-表格

第一格表頭	第二格表頭
内容單元格 第一列第一格	内容單元格第二列第一格
内容單元格 第一列第二格 多加文字	内容單元格第二列第二格
内容單元格 第一列第三格 多加文字	内容單元格第二列第三格
内容單元格 第一列第四格 多加文字	内容單元格第二列第四格

4. 支援md文法-文法高亮

fun main(args: Array<String>) {
   println("Hello World!")

   println("sum = ${sum(34, 67)}")
   println("sum = ${sum(34, 67)}")
   println("sum = ${sum(34, 6, 57, 34)}")

   //雖然經過了裝箱，但是值是相等的，都是10000
   println(boxedA === anotherBoxedA) //  false，值相等，對象位址不一樣
   println(boxedA == anotherBoxedA) // true，值相等
}
           

4. 支援md文法-公式&圖形

沒法支援

4. 支援md文法-圖檔

• 如果圖檔是相對目錄，輸出html時img和html放一塊，目錄結構一緻

• 

5. marp自身要求與指令

# 頁分割
---
# 指令格式
<!-- {directive_name}: {value} -->
# 設定主題: default/gaia
<!-- $theme: gaia -->
# 設定頁面寬度&高度
<!-- $width: 12in -->
<!-- $height: 12in -->
# 設定頁面比例
<!-- $size: 16:9 -->
# 指定顯示頁碼
<!-- page_number: true -->
# 設定頁腳
<!-- footer: This is a footer -->
           

98. 如何将md檔案轉為html

1). 正常做法

安裝marp-cli & 執行編譯腳本，必要條件：node>8

npm install -g @marp-team/marp-cli
marp you.md -o file-name.html
           

2). 基于Dokcer鏡像

• 參考文檔

99. 看法與缺點

• vscode/marp-cli插件對文法支援不完善

  原生ide支援部分html标記如：<center>、<big>、<hr>，但是vscode或轉為html時沒法支援

• 如果有個好模闆，還是能滿足日常需求的
• 功能比較單一，還是沒法和真的ppt比

版權聲明：本文為CSDN部落客「weixin_33939380」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_33939380/article/details/91882444