📄
← Quay lại hướng dẫn

Cách chuyển đổi Markdown sang HTML: Hướng dẫn đầy đủ

· Thẻ: markdown-to-html, markdown-converter, static-site-generator, jekyll-markdown, markdown-processing

Cách chuyển đổi Markdown sang HTML

Markdown được thiết kế để viết, nhưng web chạy trên HTML. Mọi tài liệu Markdown cần được chuyển đổi sang HTML trước khi trình duyệt có thể hiển thị nó. Hướng dẫn này bao gồm các phương pháp chính để chuyển đổi Markdown sang HTML.

Phương pháp 1: Công cụ dòng lệnh

Pandoc

Pandoc là trình chuyển đổi tài liệu phổ quát hỗ trợ hàng chục định dạng.

# Chuyển đổi cơ bản
pandoc input.md -o output.html

# HTML độc lập với thẻ <html> và <body>
pandoc input.md -o output.html -s

# Với mục lục
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);

Phương pháp 2: Trình tạo trang tĩnh

Jekyll

Jekyll cung cấp năng lượng cho GitHub Pages. Nó chuyển đổi các tệp Markdown từ _posts hoặc các bộ sưu tập thành HTML.

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

Sử dụng bộ xử lý Kramdown với các mẫu Liquid cho nội dung động.

Hugo

Hugo là trình tạo trang tĩnh dựa trên Go nổi tiếng với tốc độ build tính bằng mili giây.

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

Sử dụng Goldmark làm trình kết xuất Markdown mặc định với hỗ trợ bảng, khối mã có rào và chú thích cuối trang.

Next.js (MDX)

Next.js hỗ trợ MDX, nhúng các thành phần React vào trong Markdown.

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

MDX cho phép bạn đưa các ví dụ mã trực tiếp, biểu đồ và biểu mẫu vào tài liệu.

Phương pháp 3: Trình chuyển đổi trực tuyến

Đối với chuyển đổi một lần mà không cần cài đặt công cụ, các trình chuyển đổi trên trình duyệt cung cấp kết quả tức thì:

  1. Dán hoặc nhập Markdown vào bảng soạn thảo.
  2. Đầu ra HTML xuất hiện theo thời gian thực.
  3. Sao chép HTML đã tạo để sử dụng trong bất kỳ trang web hoặc CMS nào.

Công cụ xem trước Markdown xử lý GitHub Flavored Markdown — bảng, khối mã, danh sách nhiệm vụ và gạch ngang — hoàn toàn trong trình duyệt của bạn.

Phương pháp 4: Plugin trình soạn thảo

| Trình soạn thảo | Tính năng | Lệnh | |--------|---------|---------| | VS Code | Xem trước tích hợp | Ctrl+Shift+V | | Sublime Text | MarkdownPreview | Alt+M | | IntelliJ IDEA | Hỗ trợ tích hợp | Quick Documentation | | Vim | vim-markdown | :MarkdownPreview |

Quy trình xử lý

Khi một trình tạo trang tĩnh chuyển đổi Markdown sang HTML, nó tuân theo quy trình sau:

Markdown → Phân tích thành AST → Áp dụng tiện ích mở rộng → Kết xuất thành HTML → Áp dụng mẫu → Trang đầu ra

Nếu một tính năng không được kết xuất như mong đợi, vấn đề thường nằm ở trình phân tích cú pháp (không hỗ trợ cú pháp đó) hoặc trình kết xuất (nó xuất ra HTML không mong muốn).

Chuyển đổi Markdown sang HTML trực tuyến

Sử dụng công cụ xem trước Markdown để chuyển đổi Markdown sang HTML ngay lập tức. Nhập hoặc dán Markdown vào trình soạn thảo, và bản xem trước đã kết xuất sẽ cập nhật theo thời gian thực.

Cách chuyển đổi Markdown sang HTML: Hướng dẫn đầy đủ - CoolTool