[ลองของ] ทำ Presentation Slide จาก Markdown ด้วย Marp

Published in

Siam Chamnankit Family

5 min readMay 3, 2021

ผมเป็นคนนึงที่มีปัญหาต้องทำเอกสารเยอะมาก ๆ (เมื่อไหร่จะได้เขียน Code) ซึ่งหนึ่งในปัญหาของการทำเอกสารของผม ก็คือการจัดการเรื่องการเปลี่ยนแปลงเนื้อหาที่อยู่ข้างใน หลาย ๆ เอกสารที่ผมต้องทำมักจะต้องทำแล้วแก้ แก้แล้วทำ ส่งกันไปส่งมากับคนอื่นอยู่บ่อย ๆ พอต้องแก้แล้วต้องส่งไปมา ปัญหาเรื่อง Version ก็ตามมา ซึ่งส่วนใหญ่ผมก็มานั่งทำ xxx-1.0.doc บ้าง xxx-1.1.doc บ้าง ทำไปทำมาก็มีเอกสารตัวเดียวกัน อยู่หลาย Version มาก ๆ ในเครื่อง แถมไม่สามารถเปรียบเทียบได้ด้วยว่า แต่ละ Version มีการเอาอะไรออก เอาอะไรใส่เพิ่มเข้าไป จะเปิด 2 อันพร้อมกันเพื่อดูเปรียบเทียบ ก็ปวดตาเหลือเกิน ช่วงหลังเวลาผมทำเอกสารจึงพยายามทำให้อยู่ในรูปแบบของ Markdown ซึ่งเป็น Plain-Text เพื่อให้สามารถที่จะเอาเก็บเข้า Version Control อย่างพวก Github แล้วสามารถดูการเปลี่ยนแปลงได้ ซึ่งก็ช่วยแก้ปัญหาหลาย ๆ อย่างไปได้ ดีทีเดียว

นอกจากเอกสารที่ต้องทำ Format แล้ว เอกสารอีกประเภทที่ผมเองต้องทำอยู่บ่อย ๆ ก็คือ Presentation Slide ซึ่งก็ทั้งเพื่อนำเสนองาน ทั้งเอามาใช้ประกอบการแบ่งปันความรู้ ประสบการณ์ ให้กับผู้สนใจ สุดท้ายผมก็กลับมาเจอปัญหาเดิมอยู่ดี แถมเอกสารพวก Slide เนี่ยหนักกว่าเอกสารอื่นเยอะ เพราะรูปจำนวนมากที่ใส่ไปใน Slide เนี่ย ทำให้พอเรา Copy ออกมาหลาย Version ก็ยิ่งเปลืองที่เก็บในเครื่อง ผมเลยลองหาข้อมูลดูว่ามีคนทำ Markdown ให้กลายเป็น Slide ไหมนะ ปรากฎว่ามีคนเจอปัญหาเดียวกันอยู่เยอะพอสมควร และเขาเหล่านั้น ก็พัฒนาของขึ้นมาเพื่อแก้ปัญหาของเขาเอง 1 ในนั้นคือ Marp นั่นเอง (มีอีกหลายตัวนะครับ)

Marp คืออะไร

ด้วยตัวของ Website ของ Marp บอกว่าของที่เขาทำมันเป็น Ecosystem นะ ซึ่งน่าจะหมายถึงระบบของเขามีครบจบกระบวนความ ตั้งแต่ต้นจนจบ ลองมาดูว่าใน Ecosystem ของเขามีอะไรบ้าง

Marp ทำงานบน CommonMark นะ ถ้าเขียน Markdown เป็น ก็ใช้ได้เลย
Marp มี Build-In Theme ของ Slide ไว้ให้ใช้นะ ถ้าไม่คิดอะไร เอาไปใช้ได้เลย
Marp มีเครื่องไม้เครื่องมือให้พร้อมเลยนะ จะใช้ Command หรือจะใช้ VS Code ก็พร้อมนะ
Marp เป็น Opensource 100% เลยนะ อยากได้อะไรก็ Contribute ได้เลย
Marp ไม่ได้มีแค่ Markdown ธรรมดานะ ถ้าจะทำ Slide สวย ๆ ก็ปรับแต่งได้ผ่าน Syntax พิเศษของมันนะ
Marp เนี่ยทำเสร็จแล้ว Export เป็น PDF, HTML หรือ Power Point ได้เลยนะ (ยังไม่รองรับ Keynote T-T)
ถ้าอยากทำอะไรเพิ่มก็ทำผ่าน Plugin ที่ให้มาได้เลยนะ หรือจะทำ Theme เองก็ทำได้เหมือนกัน

ติดตั้งผ่าน Command ดูสักหน่อย

วิธีการ Install ก็ไม่ได้ยากอะไรครับ โดยตอนที่ผมลอง ผมลองใช้ผ่าน Marp-Cli ซึ่งขั้นตอนก็ไม่ได้ยุ่งยากอะไร ยิ่งถ้าในเครื่องมี Node มี npm อยู่แล้วก็สามารถ ติดตั้งผ่าน Command

npm install -g @marp-team/marp-cli

ซึ่งเมื่อติดตั้งเสร็จ ก็สามารถใช้ Commandmarp เพื่อตรวจสอบได้เลย โดยที่ถ้าพิมพ์ marp เฉย ๆ ก็จะขึ้น Help มาเพียบแบบภาพข้างล่างเลย

เอาเป็นว่าถ้าขึ้นแบบนี้ ก็ถือว่าใช้ได้แล้วแหละนะ

ลองทำ Slide แบบง่าย ๆ

แน่นอนว่าเนื่องจาก Marp เป็นเครื่องมือแปลงจาก Markdown ให้เป็น Presentation เพราะฉะนั้นเราจะมาลองสร้าง Slide แบบง่าย ๆ เพื่อดูว่า Marp จะสร้างออกมาเป็นยังไงนะ

สร้าง File ที่ชื่อ sample.md ให้มีสัก 3 หน้า หน้า Title มีข้อความใหญ่ ๆ หน้าแรกเป็น List และ หน้าที่สองเป็นรูปแล้วกัน ก็จะได้ Markdown ประมาณนี้

# Title Slide---## Page 1- topic 1
- topic 2
- topic 3---## Page 2![image](https://picsum.photos/id/237/200/300)

รันคำสั่ง marp sample.mdเพื่อให้ Marp สร้าง Slide ขึ้นมาให้เรา ซึ่งเมื่อรันเสร็จมันจะขึ้นข้อความ ตามข้างล่างพร้อมกับสร้าง File ที่ชื่อว่า sample.html ขึ้นมา

[  INFO ] Converting 1 markdown...
[  INFO ] sample.md => sample.html

เสร็จแล้วเราก็เปิด html ไฟล์นั้นขึ้นมา ก็จะเห็นหน้า Title Slide ตามภาพแรก ซึ่งเมื่อกดลูกศรซ้ายขวา ก็จะสามารถเลื่อนดู แต่ละหน้าได้เลย นั่นแปลว่า เราก็จะได้ Slide พร้อมใช้งานง่าย ๆ แล้ว ดังภาพ

ในกรณีที่ผมต้องการ Export เป็น PDF หรือ PPT ไฟล์ ก็สามารถทำได้ง่าย ๆ ด้วยคำสั่ง

# สำหรับ PDF ใช้ marp --pdf sample.md# หรือ ถ้าต้องการ PowerPoint ก็ใช้marp --pptx sample.md# หรือ ถ้าต้องการไฟล์รูปนามสกุล png ก็ใช้marp --images png sample.md

แค่นี้ผมก็สามารถทำ Slide ง่าย ๆ ได้ แถมยังสามารถเอา Markdown ไฟล์ไปเก็บไว้ใน Version Control เพื่อดูการเปลี่ยนแปลงที่เกิดขึ้นได้ง่าย ๆ แล้ว

Previews ดูเลยได้ไหมเวลาแก้ไข

จากข้างบน ก็สามารถตอบโจทย์ในเรื่องการจัดเก็บที่สามารถเปรียบเทียบความแตกต่างของ Content แต่ละ Version ได้แล้ว แต่มันก็ลำบากในการใช้งานอยู่ เพราะถ้าผมอยากจะ Preview Slide ผมก็ต้องมารันคำสั่ง marp เพื่อสร้าง File แล้วเปิดดู ทำไปทำมาชักจะไม่ Work ทำ Slide โดยไม่เห็นของแบบทันทีชักจะไม่ดี

เพื่อแก้ปัญหานี้ Marp มีเครื่องมือช่วยที่สามารถแก้ปัญหาของผมได้ 2 วิธีคือ

รัน Marp แบบ Server ให้ดูการเปลี่ยนแปลง Markdown File ของผมแล้ว Refresh Page ให้อัตโนมัติ โดยใช้ Command marp --server . แล้วไปเปิดที่ http://localhost:8080
ดู Previews ผ่าน Editor ที่ผมใช้อยู่ ซึ่งก็คือ VS Code

ลองใช้ VS Code Previews Slide ดู

Marp เตรียมเครื่องมือไว้ให้เราอีก 1 ตัวเป็น Plugin ของ VS Code ที่มีชื่อว่า Marp for VS Code ซึ่งสามารถเข้าไปดูวิธีการติดตั้งตาม Link นี้ได้เลย เมื่อเราติดตั้ง Marp for VS Code เสร็จแล้ว ก็ลองใช้ ปุ่ม Open Previews ของ VS Code ดูเลย

พอลองใช้แล้วหน้าจอจะแสดง Markdown Previews ปกติให้เราเห็นก่อน ดังภาพ

สิ่งที่เราต้องทำเพื่อบอก VS Code ให้ Previews Markdown File นี้ เป็นแบบ Slide ก็คือการใส่ Directive marp: trueซึ่งเป็นคำสั่งเพิ่มเติมให้กับ File sample.md ของเรา ซึ่งจะได้เป็นหน้าตาดังนี้

---marp: true---# Title Slide---## Page 1- topic 1
- topic 2
- topic 3---## Page 2![image](https://picsum.photos/id/237/200/300)

หลังจากเราใส่ Directive พิเศษเข้าไปใน sample.md แล้ว ตัว VS Code ก็จะ Previews ไฟล์ sample.md มาในรูปแบบของ Slide Show ดังภาพ

ตัวอย่างของ Slide ที่สร้างด้วย Marp

ลองทำตัวหนา ตัวเอียง

ใส่รูป Background

Blur Background

เอารูปหลาย ๆ รูปมาต่อกันเป็น Background โดยไม่ต้องตัดต่อรูปให้เสียเวลา

Split Slide ให้รูปอยู่ซ้าย ข้อความอยู่ขวา

เวลาใส่ตัวอย่าง Code มันจะทำ Auto Scale ให้ด้วย

นี่คือตัวอย่างคร่าว ๆ นะครับ สามารถดู Code ตัวอย่าง และผลลัพท์เพิ่มเติมได้จาก Github Repo นี้เลยครับ

bomb0069/simple-slide-by-marp-app

Start server listened at http://localhost:8080/ ... marp --pdf -o simple-slide.pdf --allow-local-files simple-slide.md…

sck.pub

ลองดู Build-In Theme ของ Marp

นอกจาก Default Theme ที่ทาง Marp เตรียมมาให้เราใช้แบบง่าย ๆ แล้ว ทาง Marp ยังเตรียม Build-In Theme มาให้อีก 2 อัน เพื่อให้เราสามารถสร้าง Slide ที่สวยงามเพิ่มเติมได้ดังนี้

Classic Theme สี Pastel (มั้ง) ที่ชื่อว่า gaia
Modern with simple and minimal Theme ที่ชื่อว่า UnCover

ซึ่งเราสามารถใช้ Directive ที่ชื่อว่า theme: theme-name ใส่เข้าไปใน Markdown ไฟล์ของเราเพื่อให้ VS Code สามารถ Previews ให้เราเห็นแบบ Realtime หรือจะใช้ Command

marp --theme gaia sample.md

ซึ่งก็จะได้ Slide ที่เกิดจาก Theme Gaia ดังภาพ

หรือจะเปลี่ยนเป็น UnCover ก็สามารถใช้ คำสั่ง

marp --theme uncover sample.md

ซึ่งก็จะได้ Slide บน Theme UnCover ดังภาพ

สรุป

ส่วนตัวผมได้ลองทำ Slide เล็ก ๆ ง่าย ๆ เพื่อส่งลูกค้ามาแล้ว 2–3 งาน ส่วนตัวรู้สึกประทับใน Marp พอสมควร อาจจะยังมีติดปัญหาบ้างเล็กน้อย (เช่น Animation, 2 Column) แต่ก็ไม่ใช้ปัญหาอะไรที่ใหญ่มากเมื่อเทียบกับสิ่งที่ผมได้กลับมา สิ่งที่ผมกำลังจะลองทำต่อไปคือการใช้กับ Slide สอนที่ถือว่าซับซ้อนพอสมควร รวมถึงการพยายามทำ Theme ขึ้นมาใช้เองเพื่อให้ทุก ๆ Slide ของผมสามารถใช้ Theme เดียวกันได้ทั้งหมด และหวังว่าหลังจากนนี้ปัญหาที่ผมเจออยู่ในการจัดการเกี่ยวกับ Slide จะค่อย ๆ หายไป ถ้ายังไงผมมีอะไรอัพเดทจะมาเล่าให้ฟังอีกทีนะครับ