😄 เกริ่น
ได้ฤกษ์งามยามดีเอาโปรเจกต์ที่ดองไว้มาทำต่อ โดยจุดเริ่มต้นไอเดียของโปรเจคนี้คือ ผมมีปัญหาในการทำ Presentation มาก ๆ เวลาที่ทำสไลด์ไปประมาณ 2-3 หน้า ก็จะเกิดสงสัยว่า หน้าก่อน ๆ เราใช้ font เดิมไหมนะ ขนาดเท่าเดิมไหมนะ สีเดิมหรือเปล่า ก็จะย้อนกลับไปเช็ค จะเป็นแบบนี้ไปทุก ๆ 2-3 หน้าจนท้อ 555+ จนเกิดไอเดียที่ว่าถ้าเราสามารถใช้ css ในการกำหนด style ให้กับสไลด์ได้ก็จะแก้ปัญหาตรงจุดนี้ได้ จนได้มาเรียนคอร์ส Go กับพี่ยอด สักเกตุเห็นว่าสไลด์ที่ใช้สอนนามสกุลไฟล์คือ .md จากสอบถามทำให้รู้ว่าพี่ยอดใช้ Marp ในการทำสไลด์
🍎 Marp
https://marp.app/ เป็น Tools ที่ทำให้เราสามารถเขียน Presentation ด้วยไฟล์ Markdown ได้ หรือก็คือไฟล์ที่เราเขียน readme.md ใน Git Repo ซึ่งตัว Marp มีหลายตัวให้เลือกใช้เช่น
- Marp Cli ที่เราสามารถเรียกใช้ผ่าน Command line ได้เลย
- Marp Core เป็น JS Library
- Marp For VS Code ที่เป็น VS Code Extension ทำให้สามารถแสดง slide ใน VS Code ได้เลย
ซึ่ง Marp เราสามารถสร้าง Theme ด้วย CSS ได้ ทำให้สามารถกำหนด Style ให้กับสไลด์ของเราได้เลย และเนื่องจากเป็น Markdown ทำให้มันใจว่า Style ในแต่ละหน้าจะเหมือนกันถ้าเราใช้ Element เดียวกัน
เนื่องจาก Marp ใช้ตัว Markdown-it ในการแปลงทำให้สามารถใช้ Plugin ของตัว Markdown-it หรือเขียนเพิ่มเองได้ ซึ่งผมก็มีเพิ่ม Plugin ไปอีกหลาย ๆ ตัว เช่น
- Mermaid JS สำหรับสร้าง Diagram
- ShikiJS Highlighter สำหรับ Code Block
- tailwind แบบ CND ( Official บอกมาเลยว่าไม่เหมาะกับ Prod เพราะไม่ได้ Optimize)
ถ้าสนใจตัวที่ผมทำ ก็ไปดูได้ที่ https://github.com/kongsakchai/my-marp
🌸 Slidev
แต่หลังจากใช้ไปก็พบว่า Marp มีข้อจำกัดหลายอย่าง (อาจจะด้วยสกิลผมตอนนี้ยังไม่พอ) ทำให้ต้องหา Tool อื่น ๆ ซึ่งก็เจออีกหลายตัวเลย แต่ที่ชอบที่สุดคงจะเป็น https://sli.dev/ เป็น web-based slides ที่เขียนด้วย Vue ซึ่งมีฟีเจอร์หลาย ๆ อย่างที่ผมชอบมาก เช่น Presentation View ที่ฝั่งคน Present จะเป็นอีกหน้าจอหนึ่ง พร้อมแทรก Note ใส่หน้าฝั่งคน Present ได้อีกด้วย ฟีเจอร์การวาดบน Slide เหมาะสำหรับการสอน มี Build-in Monaco Editor สำหรับแก้ไข Markdown บนเว็บได้เลย และยังสามารถเรียกใช้ Vue Component ได้อีกด้วย
แต่ว่า ผมไม่เคยเขียน Vue !!! และตัว Slidev จะรันได้ทีละไฟล์ ต่างจาก Marp จะสามารถรันได้ทั้งโฟเดอร์แสดงออกมาเป็นหน้า Directory ได้เลย นอกจากนี้ผมกลับชอบ Markdown Syntax ของ Marp มากกว่าเนื่องจากผมมีการใช้พวกโปรแกรมอ่าน Markdown เช่น Obsidian ทำให้อยากได้ Syntax ที่ Support โปรแกรมทั่วไปด้วย จากปัญหาทำให้ผมเกิดไอเดียพัฒนา Tool เองโดยรวมฟีเจอร์ที่จาก Marp และ Slidev ซึ่งผมเลือก Frontend Framework ที่ผมชอบก็คือ Svelte มาใช้ในการพัฒนา
❤️ Tech Stack
โดย Stack หลัก ๆ ที่ผมเลือกจะเป็น
- SvelteKit - สำหรับทำในส่วนของ Frontend
- Markdown-it สำหรับในการแปลง markdown เป็น HTML
- Shiki JS - Highlighter สำหรับ Code Block
- Mermaid JS - สำหรับวาด Diagramm หรือ Chart
ซึ่งจริง ๆ แล้วตัว SlideMD ผมเริ่มเขียนไว้ตั้งแต่ปี 2024 จนสามารถใช้งานได้แล้ว แต่การมาของยุค Gen AI ที่สามารถ Gen Presentation ได้อย่างง่าย ๆ ทำให้ผมไม่ได้ทำต่อ เพราะคิดว่าทำไปก็อาจจะไม่ได้มีคนใช้ เพราะ Gen AI มันง่ายกว่า แต่พอนึกย้อนไปตอนเริ่มไอเดียนี้ คือผมต้องการ Tool มาใช้เอง ถึงคนอื่นจะไม่ใช้อย่างน้อยคนทำนี่แหละจะใช้เอง 555 ซึ่งพอกลับไปดูแล้วก็มีโค้ดในหลาย ๆ ส่วนยังไม่ค่อยดีเท่าไหร่ บวกกับขี้เกียจไล่โค้ดเลยอยากเขียนใหม่ เริ่มวาง Structure ใหม่ไปเลยดีกว่า เลยถึงโอกาศนี้มาเขียน Devlog ไปด้วยเลย และหวังว่านี่จะไม่ใช่ Devlog เดียวและ Devlog สุดท้ายนะครับ 5555 โพสต์อาจจะยังไม่มีอะไรมากไว้ติดตามต่อในโพสต์ต่อไป (ในสักวันหนึ่ง) นะครับผม หากโพสต์นี้ผิดพลาดสามารถแนะนำติชมได้เลยครับผม
Top comments (0)