The latest articles on Forem by Kong Sakchai (@kongsakchai). https://forem.com/kongsakchai https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F962055%2F927aa7ab-b6dd-4a6c-917a-889a2639e26f.jpeg https://forem.com/kongsakchai en Kong Sakchai Wed, 09 Jul 2025 08:29:40 +0000 https://forem.com/kongsakchai/devlog1-slidemd-422f https://forem.com/kongsakchai/devlog1-slidemd-422f <h2> 😄 เกริ่น </h2> <p>ได้ฤกษ์งามยามดีเอาโปรเจกต์ที่ดองไว้มาทำต่อ โดยจุดเริ่มต้นไอเดียของโปรเจคนี้คือ ผมมีปัญหาในการทำ Presentation มาก ๆ เวลาที่ทำสไลด์ไปประมาณ 2-3 หน้า ก็จะเกิดสงสัยว่า หน้าก่อน ๆ เราใช้ font เดิมไหมนะ ขนาดเท่าเดิมไหมนะ สีเดิมหรือเปล่า ก็จะย้อนกลับไปเช็ค จะเป็นแบบนี้ไปทุก ๆ 2-3 หน้าจนท้อ 555+ จนเกิดไอเดียที่ว่าถ้าเราสามารถใช้ css ในการกำหนด style ให้กับสไลด์ได้ก็จะแก้ปัญหาตรงจุดนี้ได้ จนได้มาเรียนคอร์ส Go กับพี่ยอด สักเกตุเห็นว่าสไลด์ที่ใช้สอนนามสกุลไฟล์คือ .md จากสอบถามทำให้รู้ว่าพี่ยอดใช้ Marp ในการทำสไลด์</p> <h2> 🍎 Marp </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flydu94u6692q4sb0n849.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flydu94u6692q4sb0n849.png" alt=" " width="800" height="385"></a></p> <p><a href="https://marp.app/" rel="noopener noreferrer">https://marp.app/</a> เป็น Tools ที่ทำให้เราสามารถเขียน Presentation ด้วยไฟล์ <code>Markdown</code> ได้ หรือก็คือไฟล์ที่เราเขียน <code>readme.md</code> ใน Git Repo ซึ่งตัว Marp มีหลายตัวให้เลือกใช้เช่น </p> <ul> <li>Marp Cli ที่เราสามารถเรียกใช้ผ่าน Command line ได้เลย </li> <li>Marp Core เป็น JS Library </li> <li>Marp For VS Code ที่เป็น VS Code Extension ทำให้สามารถแสดง slide ใน VS Code ได้เลย </li> </ul> <p>ซึ่ง Marp เราสามารถสร้าง Theme ด้วย CSS ได้ ทำให้สามารถกำหนด Style ให้กับสไลด์ของเราได้เลย และเนื่องจากเป็น Markdown ทำให้มันใจว่า Style ในแต่ละหน้าจะเหมือนกันถ้าเราใช้ Element เดียวกัน</p> <p>เนื่องจาก Marp ใช้ตัว Markdown-it ในการแปลงทำให้สามารถใช้ Plugin ของตัว Markdown-it หรือเขียนเพิ่มเองได้ ซึ่งผมก็มีเพิ่ม Plugin ไปอีกหลาย ๆ ตัว เช่น </p> <ul> <li>Mermaid JS สำหรับสร้าง Diagram</li> <li>ShikiJS Highlighter สำหรับ Code Block</li> <li>tailwind แบบ CND ( Official บอกมาเลยว่าไม่เหมาะกับ Prod เพราะไม่ได้ Optimize)</li> </ul> <p>ถ้าสนใจตัวที่ผมทำ ก็ไปดูได้ที่ <a href="https://github.com/kongsakchai/my-marp" rel="noopener noreferrer">https://github.com/kongsakchai/my-marp</a></p> <h2> 🌸 Slidev </h2> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F529i0ih1m44piqta3mly.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F529i0ih1m44piqta3mly.png" alt=" " width="800" height="482"></a></p> <p>แต่หลังจากใช้ไปก็พบว่า Marp มีข้อจำกัดหลายอย่าง (อาจจะด้วยสกิลผมตอนนี้ยังไม่พอ) ทำให้ต้องหา Tool อื่น ๆ ซึ่งก็เจออีกหลายตัวเลย แต่ที่ชอบที่สุดคงจะเป็น <a href="https://sli.dev/" rel="noopener noreferrer">https://sli.dev/</a> เป็น web-based slides ที่เขียนด้วย Vue ซึ่งมีฟีเจอร์หลาย ๆ อย่างที่ผมชอบมาก เช่น Presentation View ที่ฝั่งคน Present จะเป็นอีกหน้าจอหนึ่ง พร้อมแทรก Note ใส่หน้าฝั่งคน Present ได้อีกด้วย ฟีเจอร์การวาดบน Slide เหมาะสำหรับการสอน มี Build-in <a href="https://microsoft.github.io/monaco-editor/" rel="noopener noreferrer">Monaco Editor</a> สำหรับแก้ไข Markdown บนเว็บได้เลย และยังสามารถเรียกใช้ Vue Component ได้อีกด้วย </p> <p>แต่ว่า <strong>ผมไม่เคยเขียน Vue !!!</strong> และตัว Slidev จะรันได้ทีละไฟล์ ต่างจาก Marp จะสามารถรันได้ทั้งโฟเดอร์แสดงออกมาเป็นหน้า Directory ได้เลย นอกจากนี้ผมกลับชอบ Markdown Syntax ของ Marp มากกว่าเนื่องจากผมใช้พวกโปรแกรมอ่าน Markdown เช่น Obsidian ทำให้อยากได้ Syntax ที่ Support โปรแกรมทั่วไปด้วย จากปัญหาทำให้ผมคิดที่จะสร้าง Tool เอง</p> <h2> ❤️ Tech Stack </h2> <p>โดย Stack หลัก ๆ ที่ผมเลือกจะเป็น </p> <ul> <li> <a href="https://svelte.dev/docs/kit/introduction" rel="noopener noreferrer">SvelteKit</a> - สำหรับทำในส่วนของ Frontend </li> <li> <a href="https://github.com/markdown-it/markdown-it" rel="noopener noreferrer">Markdown-it</a> สำหรับในการแปลง markdown เป็น HTML</li> <li> <a href="https://shiki.matsu.io/" rel="noopener noreferrer">Shiki JS</a> - Highlighter สำหรับ Code Block</li> <li> <a href="https://mermaid.js.org/" rel="noopener noreferrer">Mermaid JS</a> - สำหรับวาด Diagramm หรือ Chart</li> </ul> <p>ซึ่งจริง ๆ แล้วตัว SlideMD ผมเริ่มเขียนไว้ตั้งแต่ปี 2024 จนสามารถใช้งานได้แล้ว แต่การมาของยุค Gen AI ที่สามารถ Gen Presentation ได้อย่างง่าย ๆ ทำให้ผมไม่ได้ทำต่อ เพราะคิดว่าทำไปก็อาจจะไม่ได้มีคนใช้ เพราะ Gen AI มันง่ายกว่า แต่พอนึกย้อนไปตอนเริ่มไอเดียนี้ คือผมต้องการ Tool มาใช้เอง ถึงคนอื่นจะไม่ใช้อย่างน้อยคนทำนี่แหละจะใช้เอง 555 ซึ่งพอกลับไปดูแล้วก็มีโค้ดในหลาย ๆ ส่วนยังไม่ค่อยดีเท่าไหร่ บวกกับขี้เกียจไล่โค้ดเลยอยากเขียนใหม่ เริ่มวาง Structure ใหม่ไปเลยดีกว่า เลยถึงโอกาศนี้มาเขียน Devlog ไปด้วยเลย และหวังว่านี่จะไม่ใช่ Devlog เดียวและ Devlog สุดท้ายนะครับ 5555 โพสต์อาจจะยังไม่มีอะไรมากไว้ติดตามต่อในโพสต์ต่อไป (ในสักวันหนึ่ง) นะครับผม หากโพสต์นี้ผิดพลาดสามารถแนะนำติชมได้เลยครับผม </p> devlog svelte markdown