Markdown and Hypertext: The Evolution of Plaintext Authoring
Created in 2004 by John Gruber in collaboration with Aaron Swartz, Markdown was designed to enable writers to produce formatted hypertext using human-readable, lightweight plaintext syntax. The core design philosophy dictated that a Markdown-formatted document should be publishable as-is, as plain text, without looking like it has been marked up with tags or formatting instructions.
From Original Markdown to CommonMark and GFM
While original Markdown gained viral adoption, its lack of an unambiguous formal specification led to inconsistent rendering across different parsing engines. This motivated the development of the CommonMark standard and subsequent GitHub-Flavored Markdown (GFM) specifications:
| Markdown Feature | Syntax Example | Rendered HTML Element | Standard Association |
|---|---|---|---|
| Headers (Levels 1-6) | # Heading 1 ## Heading 2 | <h1>, <h2> | Standard Markdown / CommonMark |
| Fenced Code Blocks | ```javascript const x = 10; ``` | <pre><code class="language-*"> | GitHub-Flavored Markdown (GFM) |
| Pipe Tables | | Item | Price | |---|---| | <table><thead><tbody> | GFM Extension |
| Task Checklists | - [x] Completed - [ ] Pending | <input type="checkbox" disabled> | GFM Extension |
| Strikethrough | ~~Deprecated text~~ | <del> | GFM Extension |
Bidirectional AST Mapping and Transformation
Converting between Markdown and HTML in both directions requires parsing the source into an Abstract Syntax Tree (AST) representation:
- Markdown to HTML: Tokens for headers, lists, code fences, blockquotes, and tables are converted into corresponding semantic HTML5 elements. Special characters (<, >, &) are properly escaped to prevent rendering anomalies.
- HTML to Markdown: DOM node traversal inspects the structural hierarchy, stripping presentation wrappers while retaining typographic emphasis, inline links, images, and structural table grids.
XSS Sanitization in In-Browser Workflows
When rendering arbitrary HTML in a web browser, strict sanitization is imperative. Unchecked HTML injection exposes users to stored Cross-Site Scripting (XSS) vectors through malicious <script> payloads or broken image event handlers (e.g. <img src="x" onerror="...">). This converter strips unsafe tags and attributes before mounting content into the live preview DOM.