📝
Trình Soạn Thảo Markdown miễn phí
Viết và xem trước Markdown theo thời gian thực. Hỗ trợ tiêu đề, in đậm, in nghiêng, khối mã, bảng và danh sách.
Hoạt động ngoại tuyến sau khi tải
118 từ · 582 ký tự
Markdown
Xem trước
<h2 class="text-2xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Chào mừng đến Trình soạn thảo Markdown</h2>
<p class="my-3 text-slate-700 dark:text-slate-300 leading-relaxed">Viết <strong>Markdown</strong> ở bên trái, xem bản xem trước trực tiếp ở bên phải.</p>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Tính năng</h3>
<ul class="list-disc list-inside my-3 space-y-0.5 text-slate-700 dark:text-slate-300"><li class="my-0.5"><strong>In đậm</strong>, <em>in nghiêng</em>, và <del>gạch ngang</del></li><li class="my-0.5">Mã <code class="bg-slate-100 dark:bg-slate-800 text-pink-600 dark:text-pink-400 rounded px-1 py-0.5 text-[0.85em] font-mono">nội tuyến</code> và khối mã được bao quanh</li><li class="my-0.5"><a href="https://libratool.com" target="_blank" rel="noopener noreferrer" class="text-teal-600 dark:text-teal-400 underline underline-offset-2">Liên kết</a></li><li class="my-0.5">Danh sách, trích dẫn, bảng, và nhiều hơn nữa</li></ul>
<h3 class="text-xl font-bold text-slate-900 dark:text-slate-50 mt-6 mb-2">Ví dụ mã</h3>
<pre class="bg-slate-900 dark:bg-slate-950 text-slate-100 rounded-lg p-4 overflow-x-auto text-sm font-mono my-4"><code class="language-javascript">function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<blockquote class="border-l-4 border-teal-400 dark:border-teal-600 pl-4 my-3 text-slate-600 dark:text-slate-400 italic">Markdown được tạo bởi John Gruber vào năm 2004 để giúp viết cho web dễ dàng hơn.</blockquote>
<table class="my-4 w-full text-sm border-collapse"><thead><tr><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Tính năng</th><th class="border border-slate-300 dark:border-slate-600 bg-slate-100 dark:bg-slate-800 px-3 py-2 text-left font-semibold">Được hỗ trợ</th></tr></thead><tbody><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Tiêu đề</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Danh sách</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Bảng</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr><tr><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">Mã</td><td class="border border-slate-200 dark:border-slate-700 px-3 py-2 text-left">✓</td></tr></tbody></table>
Bảng tóm tắt Markdown
# Heading 1H1
**bold**Đậm
*italic*Nghiêng
`code`Code nội tuyến
- itemDanh sách dấu đầu dòng
1. itemDanh sách đánh số
> quoteTrích dẫn khối
[text](url)Liên kết
Hình ảnh
---Đường phân cách
Công dụng phổ biến
- Viết Tài Liệu API Trong MarkdownDự thảo mô tả điểm cuối, ví dụ yêu cầu/phản hồi và bảng tham số trong Markdown.
- Ghi Chú Trong MarkdownViết ghi chú có cấu trúc trong Markdown có thể được dán vào Notion, Obsidian, Bear hoặc bất kỳ ứng dụng Markdown nào.
- Viết README GitHub bằng MarkdownSoạn thảo và xem trước README kho lưu trữ GitHub của bạn với hiển thị Markdown trực tiếp.
- Viết Tài Liệu Kỹ ThuậtViết và xem trước tài liệu API, wiki và hướng dẫn kỹ thuật bằng Markdown trước khi xuất bản.
- Viết Bài Blog bằng MarkdownSoạn thảo các bài blog bằng Markdown cho Ghost, Jekyll, Hugo, Hashnode và các nền tảng xuất bản dựa trên Markdown khác.
Cách hoạt động
Bản xem trước được hiển thị bởi bộ phân tích Markdown tự viết tích hợp trực tiếp trong công cụ — không marked, không remark, không thư viện bên ngoài. Nó tách token nguồn từng dòng trong trình duyệt, chuyển cú pháp thành HTML rồi đưa qua bộ làm sạch trước khi hiển thị.
- 1Tách token từng dòngHàm renderMarkdown tùy chỉnh tách nguồn theo dòng và duyệt qua trong một lượt, khớp khối mã có rào, tiêu đề (H1–H6), trích dẫn, danh sách có thứ tự và không thứ tự, bảng GFM (có căn chỉnh cột), đường kẻ ngang và đoạn văn theo thứ tự ưu tiên.
- 2Mở rộng cú pháp nội tuyếnMỗi dòng hoặc ô thu được sau đó được xử lý bởi inlineMarkdown, một chuỗi thay thế regex xử lý in đậm (** và __), in nghiêng (* và _), đậm nghiêng (***), gạch ngang (~~), mã nội tuyến (), ảnh () và liên kết ([text](url)) — ảnh được xử lý trước liên kết để tiền tố ! không bị dùng sai.
- 3Làm sạch và chặn tài nguyên từ xaHTML thô do bộ hiển thị tạo ra được đưa qua bộ làm sạch (sanitize-html) để loại bỏ thẻ và thuộc tính không an toàn như <script>, trình xử lý onerror và href javascript:. Lượt thứ hai (neutralizeRemote) mặc định thay giá trị src ảnh từ xa bằng dấu giữ chỗ, ngăn bản xem trước âm thầm kết nối đến máy chủ bên ngoài trước khi bạn đồng ý.
- 4Xuất dạng .md hoặc .html độc lậpSao chép hoặc tải Markdown sẽ ghi văn bản nguồn thô. Tải HTML sẽ bọc đầu ra đã làm sạch trong một tài liệu độc lập có stylesheet nội tuyến riêng — lớp Tailwind chỉ hoạt động trong trang web, nên bản xuất đóng gói các quy tắc CSS thường thay thế, giúp tệp đọc được ở bất kỳ đâu.
Công cụ liên quan
Chuyển Đổi HTML sang Markdown
Chuyển đổi HTML thành Markdown sạch. Xử lý tiêu đề, danh sách, liên kết, ảnh, khối mã, bảng và blockquote. Hoàn hảo để di chuyển nội dung ra khỏi CMS.
Thử ngay
Chuyển Đổi Markdown sang HTML
Chuyển đổi Markdown thành HTML sạch với xem trước trực tiếp. Dùng chế độ xem nguồn để sao chép HTML sẵn sàng dán cho blog, CMS hoặc mẫu email.
Thử ngay
Trình Soạn Thảo Sơ Đồ Mermaid
Viết lưu đồ, sơ đồ trình tự, biểu đồ Gantt và nhiều hơn nữa bằng cú pháp Mermaid với xem trước trực tiếp. Xuất dưới dạng SVG hoặc PNG. Chạy hoàn toàn trên trình duyệt.
Thử ngay