Markdown (Lightweight Markup Language)

Markdown is a lightweight plain-text markup language created in 2004 by John Gruber and Aaron Swartz. Engineered to be easily readable and writable in raw form without specialized editing software, Markdown uses unobtrusive punctuation characters to define structural formatting that converts cleanly into valid HTML. Today, Markdown and its dialect GitHub Flavored Markdown (GFM) are the universal standard for technical documentation, README files, static site generators, and developer messaging platforms.

Live preview and format your documentation in real-time with our interactive Markdown Preview tool or convert web pages with HTML to Markdown.

---

Technical Specifications at a Glance

Specification	Details
Original Specification	John Gruber's Markdown 1.0.1 (2004)
Standardized Specification	CommonMark (Strict unambiguous specification)
Popular Flavors	GitHub Flavored Markdown (GFM), MultiMarkdown, MDX
MIME Media Type	text/markdown, text/x-markdown
Standard File Extensions	.md, .markdown, .mdx
Target Output	HTML5 / XHTML

---

Essential Markdown Syntax Quick Reference

Headings

# Heading 1 (<h1>)
## Heading 2 (<h2>)
### Heading 3 (<h3>)

Emphasis & Styling

*Italic text* or _Italic text_
**Bold text** or __Bold text__
***Bold and italic text***
~~Strikethrough~~ (GFM extension)

Lists: Ordered & Unordered

- Unordered item A
  - Sub-item A.1
- Unordered item B

1. First sequential step
2. Second sequential step

Code Blocks: Inline vs Fenced

Use single backticks for inline code, and triple backticks with optional language identifiers for syntax highlighting:

Run `npm install` to install dependencies.

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```

Links & Images

[DevFlow Developer Tools](https://wtool.dev)
![DevFlow Logo](https://wtool.dev/icon96.png "Logo")

GFM Tables

| Method | Endpoint | Description |
| :--- | :--- | :--- |
| `GET` | `/api/tools` | Fetch all active utilities |
| `POST` | `/api/validate` | Validate input payload |

---

CommonMark vs GitHub Flavored Markdown (GFM) vs MDX

Feature	CommonMark	GitHub Flavored Markdown (GFM)	MDX (Markdown + JSX)
Standardization	Rigorous mathematical spec	Extends CommonMark	Extends CommonMark for React/Next.js
Tables	Not supported natively	Supported (| - |)	Supported
Task Lists	Not supported	Supported (- [x] Done)	Supported
Autolinks	Requires <url> syntax	Auto-links raw URLs	Auto-links raw URLs
Interactive Components	No	No	Yes (Embeds React components)

---

Code Examples: Rendering Markdown to HTML

Modern JavaScript (using unified + remark + rehype)

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

export async function renderMarkdown(markdown: string): Promise<string> {
  const file = await unified()
    .use(remarkParse)
    .use(remarkGfm)       // Enables tables, task lists, and strikethrough
    .use(remarkRehype)    // Transforms Markdown AST to HTML AST
    .use(rehypeStringify) // Serializes HTML string
    .process(markdown);

  return String(file);
}

Python 3 (using markdown package)

import markdown

raw_md = """
# Getting Started with DevFlow
Explore our free [browser tools](https://wtool.dev/tools).
"""

# Convert to HTML with extensions
html_output = markdown.markdown(raw_md, extensions=['extra', 'codehilite'])
print(html_output)

---

Frequently Asked Questions

What is MDX?

MDX is an executable extension of Markdown that allows authors to import and embed interactive JSX and React components directly within Markdown content files. Modern documentation engines and frameworks (like Next.js) use MDX to combine readable documentation copy with live interactive widgets.

How do I prevent raw HTML tags from executing when rendering Markdown?

When rendering Markdown submitted by external users, unescaped HTML tags (such as <script> or <iframe onerror="...">) can cause Cross-Site Scripting (XSS). Always run generated HTML through a strict DOM sanitizer like DOMPurify or use a secure HTML escaping pipeline before displaying it in web browsers.

Why doesn't a single line break create a new line in standard Markdown?

Standard Markdown requires either two trailing spaces at the end of a line or a blank line to trigger a line break (<br> or <p>). This design ensures that text editors wrapping paragraphs at 80 columns do not disrupt formatted paragraphs on web pages.