Markdown Cheatsheet Cheatsheet

📝

Markdown Basics

FUNDAMENTALS

Headings

Markdown	Rendered
# Heading 1	H1 (largest)
## Heading 2	H2
### Heading 3	H3
#### Heading 4	H4
##### Heading 5	H5
###### Heading 6	H6 (smallest)

Paragraphs & Line Breaks

Markdown	Result
Two spaces at end\n	Line break (br)
Blank line between text	New paragraph
Backslash \\	Escapes special characters
--- or ***	Horizontal rule

README.md

# Project Title

A brief description of what this project does.

## Installation

```bash
npm install my-project
```

## Usage

```js
import { something } from 'my-project';
something();
```

---

## License

MIT © 2024

💡

Headings best practice: Only use one H1 per document (the title). Skip heading levels for better hierarchy — use H1, H2, H3 rather than H1, H2, H3, H4, H5, H6. This improves table of contents readability.

✨

Text Formatting

STYLE

Emphasis & Style

Markdown	Rendered
italic or _italic_	Italic text
bold or __bold__	Bold text
*bold italic*	Bold and italic
~~strikethrough~~	Strikethrough (GFM)
`inline code`	Monospace inline code
Normal text	Plain text paragraph
[link text](url)	Hyperlink
![alt](image.png)	Image

Blockquotes

Markdown	Rendered
> quoted text	Blockquote
>> nested quote	Nested blockquote
> ### Heading in quote	Heading inside quote
> 1. list in quote	List inside quote
> \`code\` in quote	Code inside quote

Links

Type	Syntax
Inline	[text](https://example.com)
With title	[text](url "title")
Reference	[text][ref]\n\n[ref]: url
Auto-link	<https://example.com>
Email link	<user@example.com>
Relative	[About](/about)
Anchor link	[Jump](#section-id)
Fragment + title	[Go](#top "Go to top")

Images

Type	Syntax
Basic	![alt text](image.png)
With title	![alt](img.png "title")
With link	[![alt](img.png)](url)
Sized (HTML)	<img src="img.png" width="200">
GitHub hosted	![](https://raw.github.com/...)
Relative	![logo](./assets/logo.png)
Badge (shields.io)	![](https://img.shields.io/badge/...)

⚠️

Image sizing in Markdown: Standard Markdown doesn't support image sizing. Use HTML: <img src="image.png" width="400"/>. Some renderers support: ![alt](image.png =400x300) or ![alt](image.png){width=400}.

📋

Lists

STRUCTURE

Unordered Lists

Markdown	Notes
- Item 1	Hyphen (most common)
* Item 2	Asterisk also works
+ Item 3	Plus sign also works
- Nested item	2-space indent for nesting
- Deep nested	4-space indent for 3rd level
- Mixed content	Paragraphs, code, etc. in list

Ordered Lists

Markdown	Notes
1. First item	Auto-numbering (use 1. for all)
1. Second item	Renders as 2.
1. Third item	Renders as 3.
1. Nested	Nested ordered list
a. Lower alpha	Lowercase letter list
A. Upper alpha	Uppercase letter list
i. Lower roman	Lowercase roman numerals
I. Upper roman	Uppercase roman numerals

Task Lists (GFM)

Markdown	Rendered
- [x] Completed task	Checked checkbox
- [ ] Incomplete task	Unchecked checkbox
- [ ] Task with bold	Formatted text in tasks
- [ ] Subtask	Nested task (2-space indent)

Mixed / Nested Lists

Pattern	Description
- List item\n > Quote	Blockquote inside list
- Item\n \`code\`	Code inside list item
- Item\n ```\n code\n ```	Code block in list
- Item\n 1. Nested ordered	Ordered in unordered
1. Item\n - Nested unord	Unordered in ordered
- Item\n ---\n (HR after)	Horizontal rule after item

lists-example.md

## Shopping List (Task List)

- [x] Buy groceries
  - [x] Milk
  - [x] Eggs
  - [ ] Bread
- [ ] Clean house
  1. Kitchen
  2. Bathroom
  3. Living room
- [ ] Read documentation
  > Important: Read the [official guide](https://example.com)

### Mixed List

1. First
   - Sub-item A
   - Sub-item B
2. Second
   - Another sub-item

💻

Code Blocks

CODE

Inline Code

Markdown	Rendered
Use \`console.log()\`	Use console.log()
\`var x = 1;\`	Monospace text
Double backtick \`\`x\`\`	Contains backticks
Var: \`$HOME\`	Shell variables

Fenced Code Block Languages

Language Tag	Language
javascript / js	JavaScript
typescript / ts	TypeScript
python / py	Python
bash / sh	Bash / Shell
html	HTML
css	CSS
json	JSON
yaml / yml	YAML
sql	SQL
rust	Rust
go	Go
java	Java
c / cpp	C / C++
ruby / rb	Ruby
php	PHP
swift	Swift
kotlin	Kotlin
dockerfile	Dockerfile
text / plaintext	No highlighting

fenced-code.md

# Fenced Code Blocks

## Basic (no highlighting)
```
plain text code block
```

## With language identifier
```javascript
const greeting = "Hello, World!";
console.log(greeting);
```

## With filename (some renderers)
```python title="main.py"
def hello():
    print("Hello, World!")
```

## Diff highlighting
```diff
- old line removed
+ new line added
  unchanged context line
```

## With line highlighting (some renderers)
```javascript {2}
const x = 1;    // highlighted
const y = 2;    // not highlighted
```

📊

Tables

DATA

tables-example.md

## Basic Table

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

## Aligned Table

| Left     | Center   | Right    |
|:---------|:--------:|---------:|
| L1       | C1       | R1       |
| L2       | C2       | R2       |

## Table with Formatting

| Feature    | Status     | Notes                |
|------------|------------|----------------------|
| **Bold**   | `code`    | *Italic in table*    |
| ~~Old~~    | ~~Gone~~   | Strikethrough works  |
| [Link](#)  | Checkbox   | - [ ] Task in table  |

Table Syntax Reference

Element	Syntax	Notes
Table header	\| H1 \| H2 \|	Separated by pipes
Separator	\|---\|---\|	Required after header
Left align	\|:---\|	Colon on left
Center align	\|:---:\|	Colons on both sides
Right align	\|---:\|	Colon on right
Inline code	\| `code` \|	Backticks in cells
Bold	\| bold \|	Double asterisks
Links	\| [text](url) \|	Link syntax works
Images	\| ![alt](url) \|	Image syntax works
HTML inside	\| <br> \|	HTML allowed in some renderers

🚫

Table limitations:Markdown tables don't support: row/column spans, merged cells, multi-line content (use <br>), or cell background colors. For complex tables, use HTML <table> elements directly within your Markdown.

🚀

GitHub Flavored Markdown

GFM

GFM Features

Feature	Syntax
Strikethrough	~~text~~
Task lists	- [x] done, - [ ] todo
Tables	Pipe syntax with alignment
Emoji (shortcodes)	:smile: → 😊
Mentions	@username
Auto-links	URLs auto-linked
Footnotes	[^1] and [^1]: definition
Alerts	> [!NOTE], > [!WARNING]
Math	$$E=mc^2$$ (some platforms)
Mermaid	```mermaid (diagrams)
Definition lists	Term\n: Definition
Abbreviations	*[HTML]: HyperText Markup Language

GitHub Alerts (Admonitions)

Type	Syntax
Note	> [!NOTE]\n> Information
Tip	> [!TIP]\n> Helpful advice
Important	> [!IMPORTANT]\n> Key info
Warning	> [!WARNING]\n> Caution
Caution	> [!CAUTION]\n> Potential damage

Mermaid Diagrams (GitHub)

Type	Block Tag
Flowchart	```mermaid\nflowchart LR
Sequence	```mermaid\nsequenceDiagram
Class Diagram	```mermaid\nclassDiagram
State Diagram	```mermaid\nstateDiagram
ER Diagram	```mermaid\nerDiagram
Gantt	```mermaid\ngantt
Pie Chart	```mermaid\npie
Git Graph	```mermaid\ngitgraph
Journey	```mermaid\njourney

Front Matter (YAML)

Field	Example
title	My Page Title
date	2024-01-15
tags	[markdown, writing]
author	John Doe
layout	post
description	Page description for SEO
draft	true
category	tutorials
image	/img/cover.png

mermaid-example.md

## Mermaid Flowchart Example

```mermaid
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Ship it!]
    B -->|No| D[Debug]
    D --> E[Fix bug]
    E --> B
    C --> F[End]
```

## GitHub Alert Example

> [!NOTE]
> This is a note alert. It highlights useful information.

> [!WARNING]
> This is a warning. Be careful here!

🛠️

Tools & Platforms

ECOSYSTEM

Markdown in Different Contexts

Platform	Flavor	Extensions
GitHub	GFM	Tasks, tables, alerts, mermaid, math
GitLab	GFM+	PlantUML, math, admonitions
Jupyter	CommonMark	Code cells, LaTeX math
Hugo	Goldmark	Shortcodes, front matter
Obsidian	GFM+	Wikilinks [[page]], callouts
Notion	Custom	Toggle lists, databases, embeds
Discord	GFM-	Limited (no tables)
Slack	GFM-	Basic formatting only
Reddit	Minimal	Bold, italic, links, code
Confluence	Custom	Wiki markup (not Markdown)
VS Code	GFM	Preview, TOC, extensions
Pandoc	Extended	Citations, variables, filters

VS Code Markdown Extensions

Extension	Purpose
Markdown All in One	TOC, shortcuts, preview
Markdown Preview Enhanced	Math, mermaid, diagrams
Markdownlint	Linting and style checking
Paste Image	Paste clipboard image directly
Markdown Footnotes	Footnote support
Markdown Header Formatter	Auto-format headers
markdown-link-check	Validate links in docs
Auto Markdown TOC	Auto-generate table of contents

front-matter-example.md

---
title: "Getting Started with Markdown"
date: 2024-01-15
tags: [markdown, tutorial, writing]
author: Jane Doe
description: "A comprehensive guide to Markdown"
draft: false
layout: post
image: /images/markdown-cover.png
---

# Getting Started with Markdown

This is a **comprehensive** guide to Markdown...

## Table of Contents

- [Basics](#basics)
- [Formatting](#formatting)
- [Lists](#lists)
- [Code Blocks](#code-blocks)

<!-- Footnote example -->

This uses a footnote[^1].

[^1]: Footnote content goes here.

💡

Best tool for writing Markdown:VS Code with the "Markdown All in One" extension provides shortcuts, TOC generation, preview, and PDF export. For live preview with math/diagrams, use "Markdown Preview Enhanced". For publishing, consider Hugo, Docusaurus, or VitePress.

🎯

Interview Q&A

PREP

Q: What is Markdown and why is it important?Markdown is a lightweight markup language created by John Gruber in 2004. It converts plain text with simple syntax to HTML. It's important because: 1) Readable as plain text, 2) Universal across platforms, 3) Version control friendly, 4) Easy to learn, 5) Supported by most documentation tools. Used in READMEs, wikis, blogs, documentation sites.

Q: What is the difference between Markdown and GFM?Standard Markdown (CommonMark) defines the base spec: headings, bold/italic, links, images, code, lists, blockquotes, horizontal rules. GitHub Flavored Markdown (GFM) extends it with: task lists, tables, strikethrough, auto-links, emoji shortcodes, alerts/admonitions, and Mermaid diagrams.

Q: How do you create tables in Markdown?Pipe syntax: | Header 1 | Header 2 | then |---|---| separator, then rows. Alignment: |:---| for left, |:---:| for center, |---:| for right. Tables don't support spans, multi-line cells, or background colors — use HTML for those cases.

Q: What are task lists and where are they supported?Task lists use - [x] for completed and - [ ] for incomplete. They are supported on GitHub, GitLab, and most project management tools. On GitHub, checking/unchecking tasks in issues and PRs automatically creates commits tracking the changes.

Q: How does front matter work in Markdown files?Front matter is YAML metadata at the top of a file, enclosed in --- delimiters. It's used by static site generators (Hugo, Jekyll, Docusaurus) to set title, date, tags, layout, and other page metadata. Example: ---\\ntitle: "My Page"\\ndate: 2024-01-15\\n---

Q: What is the difference between HTML and Markdown?Markdown is a superset of plain text designed for readability. HTML is a full markup language with semantic tags. Markdown converts to HTML but cannot do everything HTML can (forms, scripts, complex tables). Most Markdown renderers allow inline HTML for advanced cases.

💡

Key Markdown interview topics: CommonMark spec vs GFM extensions, tables and alignment syntax, fenced code blocks with language tags, front matter / YAML, task lists, Mermaid diagrams, differences across platforms (GitHub vs GitLab vs Jupyter), and when to use HTML within Markdown.

⏳

Loading cheatsheet...