การแสดงผล Markdown เป็น HTML เป็นสิ่งที่ developer หลายคนต้องเจอในการพัฒนาเว็บแอพพลิเคชัน ไม่ว่าจะเป็นการสร้าง blog, documentation, หรือ comment system วันนี้เราจะมาแนะนำ 6 JavaScript libraries ที่ได้รับความนิยมและครบครันสำหรับการ render Markdown พร้อมวิธีใช้งานแต่ละตัว ## 1. Marked - The Popular Choice **Marked** เป็นหนึ่งใน Markdown parser ที่ได้รับความนิยมมากที่สุด มีจุดเด่นคือความเร็วและน้ำหนักเบา รองรับ GitHub Flavored Markdown (GFM) และสามารถขยายฟีเจอร์ได้ ### การติดตั้ง ```bash npm install marked ``` ### วิธีใช้งาน ```html

``` **ข้อควรระวัง**: Marked ไม่มี CSS ในตัว และต้องใช้ DOMPurify เพื่อป้องกัน XSS ## 2. markdown-it - The Flexible One **markdown-it** เป็นตัวเลือกที่ยืดหยุ่นมาก รองรับ CommonMark 100% และมีระบบปลั๊กอินที่ช่วยให้ปรับแต่งได้หลากหลาย ### การติดตั้ง ```bash npm install markdown-it highlight.js ``` ### วิธีใช้งาน ```javascript import markdownit from 'markdown-it'; import hljs from 'highlight.js'; const md = markdownit({ highlight: function (str, lang) { if (lang && hljs.getLanguage(lang)) { return hljs.highlight(str, { language: lang }).value; } return ''; } }); const result = md.render('# Hello World\n```javascript\nconsole.log("Hello!");\n```'); ``` **CSS สำหรับ Syntax Highlighting**: ```html ``` ## 3. react-markdown - The React Way สำหรับผู้ที่ใช้ React **react-markdown** เป็นตัวเลือกที่ดีมาก เพราะปลอดภัยจาก XSS โดย default และ render เป็น React components ### การติดตั้ง ```bash npm install react-markdown remark-gfm github-markdown-css ``` ### วิธีใช้งาน ```javascript import React from 'react'; import Markdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; import 'github-markdown-css/github-markdown.css'; function App() { const markdown = `# Hello, *world*! - List item 1 - List item 2 \`\`\`javascript console.log("Hello!"); \`\`\``; return (

{markdown}

); } ``` ## 4. Showdown - The Bidirectional One **Showdown** มีจุดเด่นคือสามารถแปลงได้ทั้งสองทาง (Markdown ↔ HTML) น้ำหนักเบาและใช้งานง่าย ### การติดตั้ง ```bash npm install showdown ``` ### วิธีใช้งาน ```javascript import showdown from 'showdown'; const converter = new showdown.Converter(); const markdownText = '# Hello, world!\n**Bold** text'; const html = converter.makeHtml(markdownText); // แปลงกลับเป็น Markdown const backToMarkdown = converter.makeMarkdown(html); ``` ## 5. SimpleMDE - The Editor Solution **SimpleMDE** เป็น Markdown editor ที่มาพร้อมกับ live preview เหมาะสำหรับผู้ใช้ที่ไม่คุ้นเคยกับ Markdown syntax ### การติดตั้ง ```bash npm install simplemde ``` ### วิธีใช้งาน ```html ``` ## 6. Editor.md - The Feature-Rich One **Editor.md** เป็น Markdown editor ที่ครบเครื่องที่สุด รองรับ LaTeX, flowchart, และ sequence diagram ### การติดตั้ง ```bash npm install editormd ``` ### วิธีใช้งาน ```html

``` ## เพิ่มความสวยงามด้วย CSS ### GitHub-style CSS ```html ``` ### Custom CSS สำหรับ Markdown ```css .markdown-body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; } .markdown-body h1 { border-bottom: 2px solid #eee; padding-bottom: 0.3em; margin-bottom: 1em; } .markdown-body code { background: #f8f8f8; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', monospace; } .markdown-body pre { background: #f8f8f8; padding: 16px; border-radius: 8px; overflow-x: auto; } ``` ## ความปลอดภัย - อย่าลืม XSS Protection ยกเว้น react-markdown ที่ปลอดภัยอยู่แล้ว libraries อื่นๆ ควรใช้ DOMPurify เพื่อป้องกัน XSS: ```javascript import DOMPurify from 'dompurify'; import { marked } from 'marked'; const markdownText = '# Hello World'; const html = marked.parse(markdownText); const cleanHtml = DOMPurify.sanitize(html); document.getElementById('content').innerHTML = cleanHtml; ``` ## เปรียบเทียบและเลือกใช้ | Library | เหมาะสำหรับ | ความยืดหยุ่น | CSS ในตัว | ความปลอดภัย | | **Marked** | ใช้งานทั่วไป | สูง | ❌ | ต้องใช้ DOMPurify | | **markdown-it** | ปรับแต่งมาก | สูงมาก | ❌ | ต้องใช้ DOMPurify | | **react-markdown** | React projects | สูง | ❌ | ✅ ปลอดภัยโดย default | | **Showdown** | แปลง 2 ทาง | ปานกลาง | ❌ | ต้องใช้ DOMPurify | | **SimpleMDE** | WYSIWYG editor | ปานกลาง | ✅ | ต้องใช้ DOMPurify | | **Editor.md** | Editor ครบครัน | สูง | ✅ | ต้องใช้ DOMPurify | ## คำแนะนำการเลือกใช้ ### สำหรับ Parser เท่านั้น: - **ความยืดหยุ่นสูง**: markdown-it + Highlight.js - **ใช้งานง่าย**: Marked + github-markdown-css - **React project**: react-markdown ### สำหรับ Editor: - **ง่ายและเบา**: SimpleMDE - **ครบครันที่สุด**: Editor.md ## สรุป การเลือก Markdown library ขึ้นอยู่กับความต้องการของโปรเจกต์ หากต้องการแค่ parsing ธรรมดา Marked หรือ markdown-it ก็เพียงพอแล้ว แต่หากต้องการ editor ที่ครบครัน SimpleMDE หรือ Editor.md จะเป็นตัวเลือกที่ดี อย่าลืมเรื่องความปลอดภัยและการ styling ด้วย CSS เพื่อให้ได้ผลลัพธ์ที่สวยงามและใช้งานได้จริง! ---

SECURE_ACCESS

Markdown (Markdown Rendering)

CONFIRM_DELETE