Chuyển đổi hai chiều giữa Markdown và HTML. Hỗ trợ headers, bold, italic, links, lists, code blocks, blockquotes, images, strikethrough, horizontal rules.
1. Chọn chế độ chuyển đổi: Markdown → HTML hoặc HTML → Markdown.
2. Nhập nội dung vào ô textarea.
3. Nhấn Chuyển đổi hoặc Ctrl+Enter để xem kết quả.
4. Nhấn Sao chép để copy kết quả vào clipboard.
• Headers: # H1, ## H2, ### H3, #### H4, ##### H5, ###### H6
• Bold: **text** hoặc __text__
• Italic: *text* hoặc _text_
• Links: [text](url) hoặc [text](url "title")
• Images:  hoặc 
• Code inline: `code`
• Code blocks: ```language\ncode\n```
• Lists: - item hoặc * item hoặc 1. item
• Blockquotes: > quote
• Horizontal rule: --- hoặc ***
• Strikethrough: ~~text~~
Markdown là ngôn ngữ đánh dấu văn bản nhẹ được tạo bởi John Gruber năm 2004. Nó cho phép viết văn bản định dạng dễ đọc và dễ viết, sau đó chuyển đổi sang HTML.
Dễ đọc: Markdown source code dễ đọc ngay cả khi chưa render
Dễ viết: Cú pháp đơn giản hơn HTML, tiết kiệm thời gian
Phổ biến: Được dùng trên GitHub, Reddit, Stack Overflow, Discord, Slack, Notion
Portable: Chỉ là plain text, mở được ở mọi editor
Version control: Dễ dàng track changes với Git
Khi nào dùng Markdown → HTML:
Hiển thị Markdown trên website không hỗ trợ Markdown
Embed nội dung vào CMS như WordPress, Drupal
Render Markdown trong email HTML
Tạo documentation tĩnh
Khi nào dùng HTML → Markdown:
Chuyển content từ WYSIWYG editor sang Markdown
Lưu documentation vào Git với format đơn giản
Chia sẻ content trên platforms hỗ trợ Markdown
Chỉnh sửa content dễ dàng hơn trong text editor
Markdown:
# H1 Tiêu đề
## H2 Tiêu đề
### H3 Tiêu đề
HTML:
<h1>H1 Tiêu đề</h1>
<h2>H2 Tiêu đề</h2>
<h3>H3 Tiêu đề</h3>
Markdown:
**Chữ đậm** hoặc __Chữ đậm__
*Chữ nghiêng* hoặc _Chữ nghiêng_
***Đậm và nghiêng*** hoặc ___Đậm và nghiêng___
HTML:
<strong>Chữ đậm</strong>
<em>Chữ nghiêng</em>
<strong><em>Đậm và nghiêng</em></strong>
Markdown:
[Google](https://google.com)
[Link với title](https://example.com "Hover text")
HTML:
<a href="https://google.com">Google</a>
<a href="https://example.com" title="Hover text">Link với title</a>
<img src="https://example.com/logo.png" alt="Logo">
<img src="image.jpg" alt="Alt text" title="Image title">
Markdown (Unordered):
- Item 1
- Item 2
- Sub item
Markdown (Ordered):
1. First
2. Second
HTML:
<ul><li>Item 1</li><li>Item 2</li></ul>
<ol><li>First</li><li>Second</li></ol>
Markdown (inline):
Use `console.log()` to debug
Markdown (block):
```javascript
function hello() {
console.log("Hi");
}
```
HTML:
<code>console.log()</code>
<pre><code class="language-javascript">...</code></pre>
