Xem Trước Markdown

Markdown là gì?

Markdown là ngôn ngữ đánh dấu nhẹ do John Gruber tạo ra vào năm 2004. Nó sử dụng các ký hiệu định dạng văn bản thuần như dấu hoa thị, dấu thăng và dấu gạch ngang để biểu thị cấu trúc: tiêu đề, in đậm, in nghiêng, danh sách, liên kết và khối mã. Công cụ xem trước Markdown hiển thị văn bản thuần đó thành HTML được định dạng để bạn có thể thấy chính xác tài liệu cuối cùng trông như thế nào trước khi xuất bản. Đặc tả Markdown gốc được mô tả trong tài liệu Daring Fireball của Gruber, và định dạng này đã được chuẩn hóa thành CommonMark.

Markdown đã trở thành định dạng viết mặc định cho tài liệu kỹ thuật, tệp README, các trình tạo trang tĩnh (Jekyll, Hugo, Astro), wiki và cơ sở tri thức. GitHub, GitLab, Bitbucket, Stack Overflow, Reddit và Notion đều hỗ trợ Markdown nguyên gốc. Vì nguồn là văn bản thuần, các tệp Markdown rất dễ quản lý phiên bản với Git, so sánh sự khác biệt giữa các nhánh và hợp nhất mà không xung đột ở các phần không trùng nhau của tệp.

Công cụ xem trước Markdown phân tích cú pháp đầu vào của bạn và chuyển đổi sang HTML theo thời gian thực. Điều này giúp bạn phát hiện lỗi định dạng, liên kết bị hỏng và cấu trúc lồng nhau không mong muốn trước khi commit tệp hoặc xuất bản trang. Công cụ xem trước này chạy hoàn toàn trong trình duyệt của bạn mà không cần gửi yêu cầu đến máy chủ, vì vậy bạn có thể làm việc với tài liệu riêng tư hoặc nhạy cảm mà không cần truyền nội dung qua mạng.

Tại sao dùng công cụ xem trước Markdown online?

Viết Markdown trong trình soạn thảo thuần không có tính năng xem trước đồng nghĩa với việc bạn đang đoán kết quả đầu ra. Công cụ xem trước trực tiếp đóng vòng phản hồi đó ngay lập tức.

Các trường hợp sử dụng công cụ xem trước Markdown

Tài liệu tham khảo cú pháp Markdown

Bảng dưới đây ánh xạ cú pháp Markdown phổ biến với kết quả hiển thị và phần tử HTML tương ứng. Bảng này bao gồm nền tảng CommonMark mà hầu hết mọi trình phân tích cú pháp Markdown đều hỗ trợ.

So sánh các biến thể Markdown

Các nền tảng khác nhau mở rộng đặc tả Markdown gốc với các tính năng bổ sung. Biết được bạn đang nhắm mục tiêu biến thể nào giúp bạn tránh cú pháp bị thất bại lặng lẽ trong một trình hiển thị khác.

Ví dụ mã: Hiển thị Markdown theo chương trình

Khi bạn cần hiển thị Markdown trong ứng dụng thay vì công cụ trình duyệt, hãy sử dụng một trong các thư viện sau. Mỗi ví dụ chuyển đổi chuỗi Markdown thành chuỗi HTML.

import { marked } from 'marked'

const md = '# Hello\n\nThis is **Markdown**.'
const html = marked(md)
// → "<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>\n"

// With options
marked.setOptions({ gfm: true, breaks: true })
const gfmHtml = marked('Line one\nLine two')
// → "<p>Line one<br>Line two</p>\n"

import markdown

md = '# Hello\n\nThis is **Markdown**.'
html = markdown.markdown(md)
# → '<h1>Hello</h1>\n<p>This is <strong>Markdown</strong>.</p>'

# With extensions
html = markdown.markdown(md, extensions=['fenced_code', 'tables'])

# Convert a file
with open('README.md') as f:
    html = markdown.markdown(f.read(), extensions=['extra'])

package main

import (
	"bytes"
	"fmt"
	"github.com/yuin/goldmark"
)

func main() {
	source := []byte("# Hello\n\nThis is **Markdown**.")
	var buf bytes.Buffer
	if err := goldmark.Convert(source, &buf); err != nil {
		panic(err)
	}
	fmt.Println(buf.String())
	// → <h1>Hello</h1>
	// → <p>This is <strong>Markdown</strong>.</p>
}

# Convert Markdown file to HTML
pandoc README.md -f markdown -t html -o output.html

# Convert with GitHub Flavored Markdown
pandoc README.md -f gfm -t html --standalone -o output.html

# Pipe from stdin
echo '# Hello **world**' | pandoc -f markdown -t html
# → <h1>Hello <strong>world</strong></h1>

Câu hỏi thường gặp