slides2pages

ปรับใช้ Marp ไปยังหน้า GitHub

การนำเสนอไปยังหน้าเว็บ: ทันที!

อะไร

Marp ช่วยให้คุณสร้างสไลด์ HTML จากมาร์กดาวน์ (เช่นนี้!)

การนำเสนอนี้เป็นทั้งเว็บไซต์และ README.md

ทำไม

ปฏิบัติต่อการนำเสนอของคุณในลักษณะเดียวกับที่คุณปฏิบัติต่อโค้ด

• ใช้ git เพื่อติดตามการเปลี่ยนแปลง
• ดึงคำขอเพื่อทำงานร่วมกัน
• ปรับใช้โดยอัตโนมัติ
• พบปัญหาใช่ไหม? เปิดประเด็น!

ตั้งค่า

ต้องการสร้างของคุณเองหรือ?

ขั้นแรก สร้าง repo ใหม่จาก repo เทมเพลต

กำหนดค่าหน้า GitHub

เปิด repo ใหม่ของคุณและตั้งค่าการเผยแพร่

โดยทั่วไปคุณจะใช้ gh-pages เป็นสาขาการปรับใช้

ตรวจสอบการสร้าง

คลิกที่แท็บการดำเนินการและดูว่าการสร้างสำเร็จหรือไม่ (อาจใช้เวลาสักครู่)

ตอนนี้คุณควรเห็นไฟล์ที่สร้างขึ้นในสาขา gh-pages

ดูหน้าเว็บ

เปิดหน้าเว็บที่ใช้งานของคุณเพื่อดูเนื้อหา

นอกกรอบคุณควรเห็น README.md เป็น /index.html และ /README.pdf สไลด์ภายใต้ docs/ จะถูกแปลงด้วย

ดำเนินการในพื้นที่

• การแปลงแบบ One-shot โดยไม่ต้องติดตั้ง marp-cli

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

---

• หรือติดตั้ง marp-cli ในไดเร็กทอรีปัจจุบันด้วย npm

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

• การรันคำสั่งด้านบนจะสร้างไฟล์ package.json ในไดเร็กทอรีปัจจุบัน เช่นนี้

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

---

• ตอนนี้คำสั่ง marp มีอยู่ในไดเร็กทอรีปัจจุบันเมื่อนำหน้าด้วย npx

$ 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
• บรรณาธิการออนไลน์ของ Marp

เว็บไซต์ตัวอย่าง

ไซต์ที่รู้จักที่ใช้การกระทำนี้คือ:

• CS 199 ของ University of Illinois at Urbana-Champaign ยิ่งฝึกฝนมากขึ้น (รหัส)
• การสำรวจแบบจำลองตามตัวแทน (รหัส)

ส่งคำขอดึงเพื่อเพิ่มเว็บไซต์ของคุณ

เผยแพร่สไลด์ของคุณ

เมื่อคุณพร้อมที่จะแชร์การนำเสนอของคุณ ให้คอมมิตหรือรวมไปที่ main แล้วเนื้อหาของคุณบนเพจ GitHub จะอัปเดตโดยอัตโนมัติ

-

ไชโย!