M2N - แปลงบล็อก Hugo/Markdown เป็นบล็อก Naver ได้อย่างง่ายดาย

พื้นหลัง

ระหว่างที่ดูแลบล็อกเทคนิคด้วย Hugo ผมก็อยากแชร์คอนเทนต์ไปยังบล็อก Naver ด้วย
ผมลองใช้เครื่องมือแปลง Markdown เป็น HTML ที่มีอยู่แล้วหลายตัว แต่กลับทำงานได้ไม่สมบูรณ์ในสภาพแวดล้อมเอดิเตอร์เฉพาะของบล็อก Naver

บล็อกโค้ดเพี้ยน
เลย์เอาต์รูปภาพพัง
มีสไตล์ที่ไม่จำเป็นถูกแทรกเข้ามา

สุดท้ายจึงจำเป็นต้องมีเครื่องมือแปลงที่ปรับให้เหมาะกับบล็อก Naver โดยเฉพาะ และผมก็ทำมันขึ้นมาเอง

ฟีเจอร์หลัก

ปรับแต่งสำหรับบล็อก Naver: สร้าง HTML ที่พร้อมใช้งานได้ทันที เพียงวางลงในเอดิเตอร์ของ Naver
รองรับ Markdown ของ Hugo/Jekyll: ลบ Front Matter อัตโนมัติ และแปลงบล็อกโค้ดได้อย่างแม่นยำ
ไฮไลต์ไวยากรณ์โค้ด: เรนเดอร์บล็อกโค้ดอย่างเรียบร้อยด้วย highlight.js
แปลงได้รวดเร็ว: ประมวลผลได้ทันทีบนฝั่งไคลเอนต์
UI เรียบง่าย: วางข้อความ → แปลง → คัดลอก โดยไม่ต้องตั้งค่าซับซ้อน

เทคโนโลยีที่ใช้

ฟรอนต์เอนด์

React 18.3.1 + TypeScript 5.6.2
Vite 6.0.5

การจัดสไตล์

Tailwind CSS 3.4.17
PostCSS + Autoprefixer

การประมวลผล Markdown

marked 16.3.0 (พาร์ส)
DOMPurify 3.2.7 (ทำความสะอาด HTML)
highlight.js 11.11.1 (ไฮไลต์ไวยากรณ์โค้ด)

การดีพลอย

Cloudflare Pages

เว็บไซต์: https://m2n.coderred.com
หวังว่าจะเป็นประโยชน์สำหรับผู้ที่กำลังเจอปัญหาเดียวกัน
ติดต่อ: https://coderred.com หรือ Telegram @coderredlab