Loading...
Markdown Editor
How do I preview Markdown as HTML?
Edit and preview Markdown in real time.
Hello World
Start typing markdown here...
console.log("Hello Code!");
| Feature | Status |
|---|---|
| Tables | Works |
| GFM | Yes |
Recommended Next Steps
Continue your journey with these related tools
The Lingua Franca of the Web: Mastering Markdown
Key Insights & Concepts
Markdown is more than just a formatting syntax; it is the dominant standard for technical communication. From README files on GitHub to tickets in Jira, and from blog posts on Dev.to to documentation on Notion—Markdown is arguably the most valuable non-programming language a developer can master.
The Origin Story
Created in 2004 by John Gruber (with significant contributions from Aaron Swartz), Markdown had a singular goal: "To write using an easy-to-read, easy-to-write plain text format, and optionally convert it to structurally valid XHTML (or HTML)."
Before Markdown, we had Textile, BBCode, and raw HTML. They were clunky. Markdown won because it looks like a document even before it's rendered.
The Fragmentation Problem (and the Solution)
Because the original Perl script was ambiguous in edge cases, many "flavors" emerged.
- StandardCommonMarkA strictly specified version of Markdown. It removed ambiguities. If you write CommonMark, it is guaranteed to render the exact same way in Python, JavaScript, and Go parsers.
- GitHubGFM (GitHub Flavored Markdown)Built on top of CommonMark. This is what most developers use today. It adds critical features for software development: Tables, Task Lists, Strikethrough, and Autolinking. This editor supports GFM.
- ModernMDXThe evolution. MDX allows you to import and use React components inside your Markdown files. It powers modern documentation sites like Docusaurus and Nextra.
Security: The Dark Side of Markdown
Markdown parses to HTML. This means it inherits HTML's security models (and flaws).
XSS via HTML
<script>alert('pwnd')</script>Since raw HTML is valid Markdown, a malicious user can inject scripts. Always sanitize markdown output if it comes from user input.
XSS via Links
[Click me](javascript:stealCookies())Standard parsers often allow `javascript:` URIs. Ensure your sanitizer blocks these protocols.
Advanced Syntax Cheat Sheet
Beyond bold and italic, here are the power-user features supported by GFM.
1. Task Lists
- [ ] Write tests
- [ ] Deploy
2. Tables
| :--- | :--- |
| GET | Fetch resource |
| POST | Create resource |
3. Code Blocks with Syntax Highlighting
const hero = "Batman";
console.log(hero);
```
Specifying the language (e.g., `javascript`) allows the parser (PrismJS or HighlightJS) to tokenize keywords and apply colors.
Pro Tip: Semantic Line Breaks
Don't write your entire paragraph on one line in your source file. Use "Semantic Line Breaks"—start a new line for each sentence.
Markdown ignores single line breaks, so the output paragraph flows normally. But in Git diffs, this makes changes much easier to read because you only change the sentence you edited, not the whole block.