What Is Markdown?
Markdown is a lightweight markup language created by John Gruber in 2004, designed to be easy to read and write as plain text while converting cleanly to HTML. It's used throughout the web for documentation, README files, blog posts, forum posts (Reddit, Stack Overflow), and content management systems.
The key insight behind Markdown: the plain-text source should look like natural text formatting conventions people already use in emails and text documents.
Core Markdown Syntax
Headings
# H1 Heading
## H2 Heading
### H3 Heading
#### H4 Heading
Emphasis and Inline Code
*italic* or _italic_
**bold** or __bold__
***bold italic***
~~strikethrough~~
`inline code`
Links and Images
[Link text](https://example.com "Optional title")
[Reference link][reference-id]
[reference-id]: https://example.com
Lists
- Unordered item
- Another item
- Nested item
1. Ordered item
2. Second item
1. Nested ordered
Code Blocks
Fenced code blocks with optional syntax highlighting:
```javascript
function hello() {
console.log("Hello, World!");
}
```
Blockquotes
> This is a blockquote.
> It can span multiple lines.
>
> And multiple paragraphs.
Tables (Extended Markdown)
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell A | Cell B | Cell C |
| Cell D | Cell E | Cell F |
CommonMark: The Standard
Original Markdown had ambiguous specifications. CommonMark (commonmark.org) is a strict, unambiguous specification adopted by GitHub, GitLab, Stack Overflow, and many other platforms. GitHub Flavored Markdown (GFM) extends CommonMark with task lists, tables, and autolinked URLs.
Markdown Processing Libraries
JavaScript
- marked: Fast, compact, widely used
- markdown-it: Fully featured with plugin ecosystem
- remark: Unified ecosystem, AST-based processing
- micromark: Smallest CommonMark-compliant parser
Python
- Python-Markdown: The standard library
- mistune: Fast with extensible rendering
- marko: CommonMark-compliant
Server-Side vs. Client-Side Rendering
For performance and SEO, prefer server-side Markdown rendering. Client-side rendering requires shipping the parser to the browser and delays first meaningful paint.
Security: XSS in Markdown-to-HTML
Markdown can contain raw HTML, which is rendered as-is by default. This creates XSS vulnerabilities when processing user-generated Markdown:
Malicious input:
[Click me](javascript:alert('xss'))
<script>steal(document.cookie)</script>
<img src="x" onerror="maliciousCode()">
Always sanitize HTML output from Markdown converters when displaying user content. Use DOMPurify (browser) or sanitize-html (Node.js) after converting Markdown to HTML.
Markdown in Different Contexts
README Files (GitHub/GitLab)
Project documentation uses extensive Markdown features: badges, collapsible sections, mermaid diagrams, and code syntax highlighting.
Static Site Generators
Jekyll, Hugo, Gatsby, Next.js, Astro, and others process Markdown files into HTML pages. Frontmatter YAML at the top of files provides metadata: ```markdown
title: My Blog Post date: 2024-01-15 tags: [webdev, javascript]
Post Content Here
### Documentation Tools
Docusaurus, MkDocs, GitBook, and Notion all use Markdown as their primary authoring format.
## Using the Markdown-to-HTML Converter
Our tool:
1. **Write or paste Markdown** in the input panel
2. **See live HTML output** with real-time preview rendering
3. **View rendered HTML** — see how it looks in a browser
4. **Copy HTML source** — get the raw HTML for use in your application
5. **GitHub Flavored Markdown** — supports tables, task lists, and auto-links
Use it for previewing Markdown formatting, generating HTML from documentation, and testing how your Markdown source will render on different platforms.