slides2pages

將 Marp 部署到 GitHub 頁面

網頁示範：立即！

什麼？

Marp 允許您從 Markdown 建立 HTML 幻燈片（就像這樣！）。

該簡報既是一個網站，也是一個 README.md。

為什麼？

像對待程式碼一樣對待您的簡報。

• 使用 git 追蹤更改
• 拉取請求進行協作
• 自動部署
• 看到問題了嗎？打開一個問題！

設定

想創建自己的嗎？

首先，從範本儲存庫建立一個新儲存庫。

設定 GitHub 頁面

打開您的新儲存庫並設定發布。

您通常會使用gh-pages作為部署分支。

審查建構

點擊“操作”標籤並查看建置是否成功（可能需要一些時間）。

現在您應該在gh-pages分支中看到產生的檔案。

查看網頁

開啟您部署的網頁即可查看內容。

開箱即用後，您應該將README.md視為/index.html和/README.pdf 。 docs/下的投影片也會被轉換。

本地運行

• 無需安裝marp-cli一次性轉換

$ npx @marp-team/marp-cli@latest README.md -o build/README.pdf

---

• 或者，使用npm在目前目錄中安裝marp-cli

$ npm install --save-dev @marp-team/marp-cli

• 執行上面的指令會在目前目錄中建立一個package.json文件，如下所示

{
	"devDependencies" : {
		"@marp-team/marp-cli" : " ^4.0.0 "
	}
}

---

• 現在，當前綴為npx時， marp指令在目前目錄中可用

$ npx marp README.md -o build/README.pdf

• 這是輸出

[  INFO ] Converting 1 markdown...
[  INFO ] README.md = > build/README.pdf

---

• 如果目前目錄中已有package.json文件，只需執行此文件即可安裝它指定的套件。

$ npm install

作為工作流程步驟

工作流程運行等效步驟：

 - name: Marp Build (README.pdf)
  uses: docker://marpteam/marp-cli:v1.7.0
  with:
    args: README.md -o build/README.pdf
  env:
    MARP_USER: root:root

請注意， args與上一張投影片相符。

客製化建構

build/資料夾中的所有內容都將部署到 GitHub Pages。

您可以複製額外的文件或使用其他工具執行進一步的處理步驟。

了解更多關於馬爾普的信息

現在是了解更多有關 Marp 的好時機。這裡有一些資源：

• 通用標記
• 備忘錄
• 主題
• CSS 主題
• 指令
• VS 程式碼插件
• 馬爾普線上編輯器

範例站點

使用此操作的已知網站有：

• 伊利諾大學香檳分校的 CS 199 更多練習（代碼）
• 探索基於代理的模型（程式碼）

發送拉取請求以新增您的網站。

發布您的幻燈片

當您準備好共享簡報時，請提交或合併到main ，GitHub Pages 上的內容將自動更新。

？

萬歲！