Markdown ↔ HTML

Runs in browser

Convert between Markdown and HTML formats

How to Use

Enter Markdown or HTML. Switch mode to reverse direction.

You will see:

  • Converted Source Code
  • Live Preview (MD → HTML)
  • Raw Output
  • Copy-ready Code
HTML Output

No output yet

Enter content and click Convert

About Markdown

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. It uses simple syntax to format text without requiring HTML knowledge, making it perfect for documentation, README files, blog posts, and more.

Markdown Syntax

Headings

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Text Formatting

**bold text**
*italic text*
***bold and italic***
~~strikethrough~~
`inline code`

Lists

- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Another item

Links and Images

[Link text](https://example.com)
![Alt text](image.jpg)

Code Blocks

```javascript
function hello() {
  console.log("Hello!");
}
```

Tables

| Header 1 | Header 2 |
|----------|----------|
| Cell 1   | Cell 2   |

GitHub Flavored Markdown (GFM)

GitHub extends standard Markdown with additional features:

  • Autolinks: URLs are automatically linked
  • Syntax highlighting: Specify language after code fence (e.g., ```javascript)
  • Task lists: Interactive checkboxes using - [x] syntax
  • @mentions: Reference users and teams
  • Strikethrough: Use ~~text~~ for strikethrough

Common Use Cases

README Files

Document your projects on GitHub, GitLab, and other platforms with formatted README files.

Documentation

Write technical documentation with code examples, formatted text, and clear structure.

Blog Posts

Many static site generators (Jekyll, Hugo, Next.js) use Markdown for blog content.

Chat and Notes

Slack, Discord, and other platforms support Markdown for formatted messages and notes.

Markdown to HTML Conversion

Converting Markdown to HTML enables:

  • Publishing Markdown content on websites
  • Email formatting (many email clients support HTML)
  • Integration with web applications
  • Custom styling with CSS

Escaping Characters

Use backslash to escape special characters when you want them to appear literally:

\* Not italic \*
\# Not a heading
\[Not a link\]

💡 Pro Tips

  • Use consistent heading levels for better document structure
  • Add blank lines between different elements for better readability
  • Use fenced code blocks with language identifiers for syntax highlighting
  • Tables can be aligned using colons: :---: for center, :--- for left, ---: for right
  • Many Markdown processors support HTML tags directly for advanced formatting

Further Reading