วิธีแปลง Markdown เป็น HTML: คู่มือฉบับสมบูรณ์

2026-07-25· แท็ก: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

วิธีแปลง Markdown เป็น HTML

Markdown ถูกออกแบบมาสำหรับการเขียน แต่เว็บทำงานบน HTML เอกสาร Markdown ทุกฉบับต้องแปลงเป็น HTML ก่อนที่เบราว์เซอร์จะแสดงผลได้ คู่มือนี้ครอบคลุมวิธีการหลักในการแปลง Markdown เป็น HTML

วิธีที่ 1: เครื่องมือบรรทัดคำสั่ง

Pandoc

Pandoc เป็นตัวแปลงเอกสารสากลที่รองรับรูปแบบมากมาย

# การแปลงพื้นฐาน
pandoc input.md -o output.html

# HTML แบบสแตนด์อโลนพร้อมแท็ก <html> และ <body>
pandoc input.md -o output.html -s

# พร้อมสารบัญ
pandoc input.md -o output.html -s --toc

Python-Markdown

pip install markdown
python -m markdown input.md > output.html

import markdown
with open("input.md", "r") as f:
    text = f.read()
html = markdown.markdown(text, extensions=["fenced_code", "tables"])

CommonMark (JavaScript)

npm install commonmark

const commonmark = require("commonmark");
const reader = new commonmark.Parser();
const writer = new commonmark.HtmlRenderer();
const parsed = reader.parse("# Hello\nThis is **bold**.");
const html = writer.render(parsed);

วิธีที่ 2: เครื่องมือสร้างเว็บไซต์แบบ Static

Jekyll

Jekyll ขับเคลื่อน GitHub Pages มันแปลงไฟล์ Markdown จาก _posts หรือ collections เป็น HTML

gem install jekyll bundler
jekyll new my-site
jekyll build
jekyll serve

ใช้ตัวประมวลผล Kramdown พร้อมเทมเพลต Liquid สำหรับเนื้อหาแบบไดนามิก

Hugo

Hugo เป็นเครื่องมือสร้างเว็บไซต์แบบ static ที่ใช้ Go ซึ่งเป็นที่รู้จักในเรื่องความเร็วในการสร้างระดับมิลลิวินาที

hugo new site my-site
hugo new posts/my-first-post.md
hugo server -D

ใช้ Goldmark เป็นตัวเรนเดอร์ Markdown เริ่มต้น พร้อมรองรับตาราง บล็อกโค้ดแบบมีรั้ว และเชิงอรรถ

Next.js (MDX)

Next.js รองรับ MDX ฝัง React components ภายใน Markdown

npm install next @next/mdx @mdx-js/loader

MDX ให้คุณใส่ตัวอย่างโค้ดสด แผนภูมิ และฟอร์มในเอกสารประกอบ

วิธีที่ 3: ตัวแปลงออนไลน์

สำหรับการแปลงครั้งเดียวโดยไม่ต้องติดตั้งเครื่องมือ ตัวแปลงในเบราว์เซอร์ให้ผลลัพธ์ทันที:

วางหรือพิมพ์ Markdown ลงในแผงตัวแก้ไข
ผลลัพธ์ HTML ปรากฏแบบเรียลไทม์
คัดลอก HTML ที่สร้างขึ้นเพื่อใช้ในหน้าเว็บหรือ CMS ใดๆ

เครื่องมือแสดงตัวอย่าง Markdown ประมวลผล GitHub Flavored Markdown — ตาราง บล็อกโค้ด รายการงาน และขีดทับ — ทั้งหมดในเบราว์เซอร์ของคุณ

วิธีที่ 4: ปลั๊กอินเอดิเตอร์

| เอดิเตอร์ | คุณสมบัติ | คำสั่ง | |--------|---------|---------| | VS Code | ตัวอย่างในตัว | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | รองรับในตัว | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

ไปป์ไลน์การประมวลผล

เมื่อเครื่องมือสร้างเว็บไซต์แบบ static แปลง Markdown เป็น HTML มันทำตามไปป์ไลน์นี้:

Markdown → แยกเป็น AST → ใช้ส่วนขยาย → เรนเดอร์เป็น HTML → ใช้เทมเพลต → หน้าเอาต์พุต

หากคุณสมบัติไม่แสดงผลตามที่คาดหวัง ปัญหามักอยู่ที่ตัวแยกวิเคราะห์ (ไม่รองรับไวยากรณ์นั้น) หรือตัวเรนเดอร์ (ส่งออก HTML ที่ไม่คาดคิด)

แปลง Markdown เป็น HTML ออนไลน์

ใช้เครื่องมือแสดงตัวอย่าง Markdown เพื่อแปลง Markdown เป็น HTML ทันที พิมพ์หรือวาง Markdown ในเอดิเตอร์ แล้วตัวอย่างที่เรนเดอร์แล้วจะอัปเดตแบบเรียลไทม์