Chuyển đổi Markdown sang HTML

Dán mã đánh dấu và thu hồi lại đoạn HTML có ý nghĩa rõ ràng: từ <h1> đến <h6>, <ul>, <ol>, <table>, <pre><code> với cú pháp được tô đậm, <blockquote> cùng các URL được liên kết tự động. Hãy chọn toàn bộ tài liệu (bao gồm <html>, <head> và một bảng kiểu tối giản) hoặc chỉ phần nội dung chính, tùy thuộc vào việc bạn đang tích hợp nó vào trang hiện có hay tạo một tệp độc lập.

Cách chuyển đổi Markdown thành HTML

  1. 1

    Dán Markdown

    Toàn bộ tài liệu hoặc đoạn trích. Phần mở đầu dạng YAML sẽ được loại bỏ tự động nếu có mặt.

  2. 2

    Chọn tập mở rộng

    Chỉ CommonMark, GFM (bảng, danh sách nhiệm vụ, liên kết tự động), hoặc GFM + toán học.

  3. 3

    Chọn chế độ xuất

    Đoạn mã dùng để nhúng, hoặc tài liệu HTML đầy đủ kèm phần tiêu đề và tối thiểu các lệnh CSS.

  4. 4

    Sao chép hoặc tải xuống HTML

    Lấy nội dung HTML dưới dạng văn bản hoặc lưu nó dưới dạng tệp `.html`.

Bảng ánh xạ

Markdown HTML
# Heading 1 <h1>Heading 1</h1>
**bold** <strong>bold</strong>
*italic* <em>italic</em>
`code` <code>code</code>
Mã được bao bởi hàng rào kèm chỉ định ngôn ngữ <pre><code class="language-js">
- item <ul><li>item</li></ul>
1. item <ol><li>item</li></ol>
> quote <blockquote><p>quote</p></blockquote>
[text](url) <a href="url">text</a>
![alt](src) <img src="src" alt="alt">
--- <hr>
Bảng GFM <table><thead>...</thead>...
- [x] done <input type="checkbox" checked disabled>

Nhấn mạnh cú pháp

Các khối mã được bao quanh bởi hàng rào kèm gợi ý ngôn ngữ sẽ nhận thuộc tính class="language-xxx" trên phần tử <code>. Bộ chuyển đổi cũng tự động lồng trực tiếp kết quả đầu ra đã được phân tích ký hiệu từ highlight.js khi bạn bật tùy chọn “pre-highlighted” – điều này rất hữu ích nếu trang đích không có trình hiển thị điểm nổi bật được cung cấp trong môi trường chạy chương trình.

Tài liệu đầy đủ so với đoạn văn

  • Fragment chỉ chứa phần nội dung HTML bên trong, hãy bắt đầu từ <h1> hoặc bất kỳ phần tử đầu tiên nào khác. Dán vào khối CMS hiện có, thân email hoặc thành phần giao diện phía trước.
  • Tài liệu đầy đủ sẽ bao quanh các đoạn văn bản trong <!DOCTYPE html>, <html><head> bằng một bảng kiểu mặc định nhỏ (gồm kiểu chữ, khối mã và bảng tính). Hãy lưu tài liệu dưới tên .html; nó sẽ mở được trên mọi trình duyệt mà không cần bất kỳ tệp bổ sung nào.

CSS nội bộ so với CSS bên ngoài

  • Phong cách nội tuyến (thao tác bật/tắt): áp dụng toàn bộ mã CSS trực tiếp lên các phần tử. Dù trông không đẹp nhưng cực kỳ ổn định khi sử dụng trong các mẫu email.
  • Lớp (giá trị mặc định) giúp giữ mã HTML gọn gàng và mong bảng kiểu của trang web bạn đảm nhận việc thiết kế giao diện.

Các ghi chú về khả năng truy cập

  • Các tiêu đề được hiển thị dưới dạng ngữ nghĩa <h1><h6>, đồng thời giữ nguyên cấu trúc phân cấp của bạn. Không nên bỏ qua các cấp độ trong mã nguồn.
  • Các hình ảnh không có văn bản alt sẽ hiển thị mã <img alt=""> (một giá trị alt trống được thiết kế cố ý dành cho hình ảnh trang trí); tuy nhiên, hãy thêm văn bản alt nếu hình ảnh thực sự mang tính trang trí.
  • Các bảng được trang bị mã <thead> cho hàng tiêu đề, giúp cải thiện khả năng điều hướng trên trình đọc màn hình.

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

Đúng vậy. Mã HTML thô trong nguồn sẽ được truyền nguyên vẹn, với các thẻ script và thuộc tính sự kiện bị loại bỏ. Nếu bạn cần kết quả đầu ra chưa qua xử lý (vì bạn tin tưởng vào dữ liệu đầu vào), có một tùy chọn bật/tắt; tuy nhiên, không nên sử dụng nó đối với nội dung do người dùng cung cấp.

Các danh sách nhiệm vụ GFM (- [x], - [ ]) trở thành các phần tử <input type="checkbox" disabled>. thuộc tính disabled ngăn chặn các thay đổi trạng thái ngẫu nhiên trong giao diện hiển thị.

Vâng – hãy bật chức năng áp dụng kiểu trực tiếp. Bộ chuyển đổi sẽ tự động áp dụng thuộc tính kiểu tối thiểu vào mỗi khối nội dung; đây chính là điều cần thiết đối với các ứng dụng email (Outlook, Gmail), vì chúng thường loại bỏ các khối <style>.

Hãy bật tiện ích mở rộng toán học và cho phép các khối $x^2$ hoặc $$...$$ được hiển thị thông qua KaTeX. Bộ chuyển đổi sẽ tạo ra định dạng SVG hoặc HTML tĩnh, không cần sử dụng MathJax trong quá trình chạy.

Không. Việc phân tích mã và tạo nội dung HTML được thực hiện trực tiếp trong trình duyệt của bạn; cả dữ liệu nguồn lẫn kết quả đầu ra đều không bao giờ rời khỏi thiết bị của bạn.

Công cụ liên quan

Công cụ này có phiên bản bằng các ngôn ngữ khác