Created in 2004 by John Gruber and Aaron Swartz, Markdown was designed with one simple mission: allow writers to produce formatted text using a clean, human-readable plain-text syntax that converts seamlessly into valid HTML.
Today, Markdown has triumphed across modern computing. It is the language of GitHub READMEs, Notion workspaces, Reddit comments, technical documentation (Docusaurus, VitePress), Obsidian notes, and ChatGPT responses.
Whether you are a developer authoring project documentation or a writer drafting an eBook, here is the complete guide to mastering standard Markdown, GitHub Flavored Markdown (GFM), mathematical equations with KaTeX, and exporting clean PDFs.
Core Markdown Syntax: The Foundations
The beauty of basic Markdown is that the raw source code remains instantly readable even without a preview parser:
1. Headings
Headings use hash symbols (#) at the beginning of a line. The number of hashes corresponds to HTML heading levels <h1> through <h6>:
# Heading 1 (Document Title)
## Heading 2 (Major Section)
### Heading 3 (Subsection)
#### Heading 4
2. Text Emphasis
- Bold: Wrap text in double asterisks:
**bold text** - Italics: Wrap text in single asterisks or underscores:
*italic text* - Bold and Italic: Wrap in triple asterisks:
***important*** Strikethrough:Wrap in double tildes:~~deprecated feature~~
3. Lists
Unordered lists use hyphens, asterisks, or plus signs:
- Apple
- Banana
- Sub-item (indent with 2 or 4 spaces)
- Another sub-item
- Orange
Ordered lists use numbers followed by periods. The numbers do not even need to be in order; Markdown renumbers them automatically:
1. First step
2. Second step
3. Third step
4. Hyperlinks and Images
- Links:
[Anchor text](https://www.kitwharf.com/) - Images: Add an exclamation mark before the brackets:
5. Blockquotes and Dividers
Quote text by prefixing lines with a greater-than symbol (>):
> "Simplicity is prerequisite for reliability." - Edsger W. Dijkstra
Create a clean horizontal rule divider using three hyphens on a line by itself:
---
6. Inline Code and Fenced Code Blocks
Wrap short code tokens in single backticks: const total = 42;.
For multiline code snippets, use triple backticks with an optional language identifier for syntax highlighting:
```typescript
interface User {
id: string;
name: string;
active: boolean;
}
## GitHub Flavored Markdown (GFM): Advanced Tables & Checklists
Standard Markdown lacked support for tables and interactive tasks. GitHub introduced **GFM (GitHub Flavored Markdown)**, which is now the industry standard:
### 1. Markdown Tables
Tables use pipes (`|`) to separate columns and hyphens to define the header row. You can control column alignment using colons (`:`):
```markdown
| Feature | Basic Plan | Pro Plan | Alignment |
|:---|:---:|---:|
| Left-aligned | Center-aligned | Right-aligned | Text |
| Storage | 5 GB | 50 GB | Numbers |
| Price | Free | $19/mo | Currency |
:---aligns the column to the left (default for text).:---:centers the column (great for status badges and dates).---:aligns the column to the right (ideal for numbers and prices).
2. Task Checklists
Create interactive to-do lists in GitHub issues, pull requests, and notes:
- [x] Implement user authentication
- [x] Configure SSL certificate
- [ ] Add payment gateway integration
- [ ] Run automated end-to-end tests
Mathematical Typesetting with KaTeX and LaTeX
For students, scientists, and engineers, writing mathematical formulas in plain text is notoriously difficult. Modern Markdown previewers integrate KaTeX (a lightning-fast math rendering engine developed by Khan Academy):
1. Inline Math
Wrap mathematical notation between single dollar signs ($):
Einstein's famous mass-energy equivalence is $E = mc^2$.
2. Display Block Equations
Wrap complex multi-line formulas between double dollar signs ($$):
$$
rac{-b pm sqrt{b^2 - 4ac}}{2a}
$$
Common KaTeX expressions you can use:
- Fractions:
rac{numerator}{denominator} - Square roots:
sqrt{x} - Subscripts and superscripts:
x_i^2 - Greek letters:
alpha, eta, gamma, pi, heta - Summations and Integrals:
sum_{i=1}^{n} iandint_{a}^{b} f(x) dx
Structuring Markdown for Flawless PDF and HTML Export
Exporting Markdown directly to PDF often results in ugly page breaks: table rows getting chopped in half, headings stranded at the bottom of a page (widows/orphans), and code blocks spilling off margins.
To generate publication-ready PDFs from Markdown:
- Avoid deeply nested tables: Wide tables with 8+ columns will overflow standard A4 or US Letter portrait pages. Keep tables concise.
- Use explicit headings hierarchy: Never jump from
# Heading 1directly to#### Heading 4. Consistent hierarchy preserves clean table-of-contents generation. - Keep code blocks reasonable in length: Extremely wide code lines force PDF generators to either wrap awkwardly or clip text off the right margin.
Real-Time Split-Screen Markdown Editing with Zero Uploads
Writing Markdown without a live preview means constantly switching tabs to check how your tables, math formulas, and images render.
The KitWharf Markdown Live Editor & Exporter delivers a friction-free writing environment:
- Split-Screen Synchronized Scrolling: Type in the editor on the left and see the pixel-perfect rendered document update in real time on the right.
- Full GFM & KaTeX Support: Complete support for tables, checklists, strikethrough, syntax highlighting, and LaTeX mathematical equations.
- One-Click Export: Download clean, standalone HTML files or export print-ready PDFs without server watermarks.
- 100% Private: Your articles, documentation, and notes are processed locally in your browser; nothing is uploaded or stored on any server.
Frequently asked questions
Can I mix raw HTML inside a Markdown document?
Yes. Markdown was designed as a superset of HTML. If you need a specific styling feature not supported by Markdown (such as centering an image with <div style="text-align: center;">, or creating an expand/collapse accordion with <details><summary>Click to view</summary>Content</details>), you can write raw HTML directly in the document.
How do I create a line break in Markdown without starting a new paragraph?
In standard Markdown, pressing Enter once does not create a line break; it gets collapsed into a single line. To create a hard line break without starting a new paragraph (the equivalent of an HTML <br>), end the line with two trailing spaces before pressing Enter, or insert an explicit <br> tag.
What is the difference between CommonMark and standard Markdown? Gruber's original 2004 Markdown specification left many edge cases ambiguous (e.g., what happens when lists are nested under blockquotes). Different software created conflicting implementations. CommonMark is a formalized, unambiguous specification published in 2014 by a working group of engineers from GitHub, Stack Overflow, and Reddit to standardize Markdown parsing across all platforms.