Cheatsheets

Markdown

Markdown

Markdown is a lightweight markup language designed for creating formatted text using a simple, readable syntax. It's widely used for documentation, READMEs, blogs, and content creation across the web.

6 Categories 18 Sections 53 Examples
Markdown Formatting Text Syntax Headers Lists Links Images Code Blocks

Getting Started

Fundamental Markdown concepts and basic syntax for beginners.

Basic Syntax

Introduction to Markdown file format and basic structure.

Simple Markdown file

Demonstrates a basic Markdown file with headings, paragraphs, and inline formatting.

Code 
# My First Markdown File


This is a paragraph of plain text that will be rendered as normal text.


You can use **bold** and *italic* text easily.
  • Markdown files typically use .md or .mdx extensions.
  • Plain text is rendered as-is, with newlines creating paragraphs.

Markdown file with structure

Shows hierarchical document structure using different heading levels.

Code 
# Main Title
## Chapter One
### Section 1.1


This section introduces the topic.


Key points:
- First point
- Second point
  • Use consistent heading levels for better document organization.
  • Markdown is ideal for documentation and content-first writing.

Headers

Create document headers and section titles using H1 through H6.

Hash-style headers

Hash symbols create heading levels from H1 to H6.

Code 
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
  • More hashes = smaller heading.
  • Space after hash is required in most Markdown parsers.

Underline-style headers

Underlines with equals or dashes create H1 and H2 headers.

Code 
Heading 1
=========


Heading 2
---------
  • Underline method only supports H1 and H2.
  • Less commonly used than hash syntax.

Headers with special characters

Headers can include special characters like &, ?, and numbers.

Code 
# Getting Started with APIs
## Installation & Configuration
### FAQ: Common Questions
  • Special characters are preserved in headers.
  • Headers are often converted to URL-friendly slugs for links.

Emphasis and Formatting

Apply bold, italic, strikethrough, and inline code formatting.

Bold and italic text

Different ways to apply bold and italic emphasis to text.

Code 
This is **bold text**.
This is *italic text*.
This is ***bold and italic text***.
This is __underscored bold__.
This is _underscored italic_.
  • Asterisks (*) and underscores (_) both work for emphasis.
  • **bold** and __bold__ are equivalent.

Strikethrough and inline code

Strikethrough and backticks for inline code formatting.

Code 
This is ~~strikethrough text~~.
Use `inline code` for functions and variables.
The `console.log()` function outputs to the terminal.
  • Strikethrough uses double tildes (~~).
  • Backticks (``) preserve text formatting exactly.

Combined emphasis

Combining multiple emphasis styles in the same text.

Code 
**Bold text with `code` inside**
***Italic and bold with `code`***
**This is ~~important~~ no longer important**
  • Nesting emphasis works well for describing code and features.
  • Keep combined emphasis readable and meaningful.

Lists and Nesting

Create ordered and unordered lists with proper nesting and indentation.

Unordered Lists

Create bullet-point lists using -, *, or + symbols.

Simple unordered list

Basic unordered lists with three different bullet styles.

Code 
- First item
- Second item
- Third item


* Alternative bullet style
* Another item
+ Yet another style
  • All three symbols (-, *, +) are equivalent.
  • Consistency within a document is recommended.

Nested unordered list

Multi-level nested list demonstrating indentation structure.

Code 
- Parent item 1
  - Child item 1.1
  - Child item 1.2
    - Grandchild item 1.2.1
- Parent item 2
  - Child item 2.1
  • Indent with 2-4 spaces for each nesting level.
  • Most parsers accept 2-space indentation.

List with multiple items

Categorized nested list structure with multiple levels.

Code 
- JavaScript
  - Frameworks: React, Vue, Angular
  - Libraries: D3, Three.js
- Python
  - Frameworks: Django, Flask
  - Libraries: NumPy, Pandas
  • Well-structured lists are easier to read and understand.

Ordered Lists

Create numbered lists with 1., 2., 3. syntax.

Simple numbered list

Basic ordered list with numeric sequence.

Code 
1. First step
2. Second step
3. Third step
4. Fourth step
  • Numbers don't need to be sequential in source (1, 1, 1 renders as 1, 2, 3).
  • Using correct numbers helps readability in the source.

Nested numbered and mixed lists

Nested ordered list with mixed bullet points and numbers.

Code 
1. Installation
   1. Download the package
   2. Extract the archive
   3. Run setup
2. Configuration
   - Set environment variables
   - Update config file
   - Verify settings
3. Verification
   1. Run tests
   2. Check output
  • Mix ordered and unordered lists at different nesting levels.
  • Indentation determines the nesting relationship.

Ordered list with code and formatted text

Numbered list items with inline code and bold formatting.

Code 
1. **Install** the package: `npm install markdown-parser`
2. **Import** in your file: `const md = require('markdown-parser')`
3. **Parse** your content with `md.parse(content)`
  • Lists items can contain inline formatting.

Task Lists

Create checkbox lists with [ ] and [x] for task tracking.

Simple task list

Task list with unchecked and checked items.

Code 
- [ ] Learn Markdown basics
- [ ] Create first document
- [x] Review formatting options
  • Space between brackets is required: `[ ]` not `[]`.
  • Checked items use lowercase 'x': `[x]`.

Nested task list with sub-tasks

Hierarchical task list with parent and sub-tasks.

Code 
- [ ] Project setup
  - [x] Create repository
  - [ ] Initialize package.json
  - [ ] Install dependencies
- [ ] Development
  - [ ] Write functions
  - [ ] Write tests
- [x] Documentation complete
  • Task lists are supported by GitHub, GitLab, and many Markdown renderers.
  • They're useful for project planning and issue tracking.

Task list with descriptions

Task list with formatted descriptions and inline code.

Code 
- [x] **Setup** - Install all required packages
- [ ] **Development** - Write core functionality
  - [ ] `auth.js` - User authentication
  - [ ] `database.js` - Database operations
- [ ] **Testing** - Write and run test suite
- [ ] **Documentation** - Update README files
  • Combine task lists with formatting for clarity.

Code and Quotes

Format code blocks and blockquotes for documentation and references.

Inline Code

Wrap code references in backticks for inline formatting.

Basic inline code

Inline code snippets for functions and method names.

Code 
Use the `console.log()` function to print output.
The `Array.map()` method transforms arrays.
Call `myFunction()` to execute your code.
  • Backticks must match (one on each side).
  • Code within backticks is rendered as-is.

Inline code with special characters

Inline code with operators and special characters.

Code 
The spread operator `...args` unpacks iterables.
Access object properties with `obj.key` or `obj['key']`.
Use the `${}` template literal syntax.
  • Special characters are preserved exactly in backticks.

Inline code in lists and emphasis

Inline code combined with lists and emphasis.

Code 
- Use `const` instead of `var` for better scoping
- The **`Array.prototype.filter()`** method is efficient
- Store result in `const result = data.map(x => x * 2)`
  • Code can be emphasized or nested in other structures.

Code Blocks

Create multi-line code blocks using indentation or fences.

Fenced code block with language

Fenced code block with JavaScript syntax highlighting.

Code 
```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}


greet('World');
```
  • Language identifier enables syntax highlighting.
  • Triple backticks (```) fence the code block.

Python code block

Fenced code block with Python syntax highlighting.

Code 
```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)


print(fibonacci(10))
```
  • Language identifiers vary by parser but common ones include python, javascript, etc.

Code block without syntax highlighting

Fenced code block without language specification.

Code 
```
Plain text output
No syntax highlighting
Just displayed as-is
```
  • Useful for output, logs, or plain text.

Blockquotes

Create blockquotes using > prefix for quotes and references.

Simple blockquote

Basic blockquote with multiple lines.

Code 
> Markdown is a simple way to format text.
> It supports various text styles and structures.
  • Use > for each line or once at the beginning of a paragraph.

Blockquote with formatting

Blockquote with bold text, code, and multiple paragraphs.

Code 
> **Important:** Always validate user input before processing.
>
> Use `input.trim()` and check length requirements.
  • Blockquotes can contain formatted text and code.

Nested blockquotes

Multi-level nested blockquotes.

Code 
> This is the first level quote.
>
> > This is a nested quote.
> > It's indented further.
>
> Back to the first level.
  • Nesting is created by adding additional > symbols.

Tables and Horizontal Rules

Create data tables and visual separators using Markdown syntax.

Tables

Format tabular data using pipes and dashes.

Basic table

Simple table with three columns and header row.

Code 
| Name   | Age | City      |
|--------|-----|-----------|
| Alice  | 28  | New York  |
| Bob    | 32  | San Diego |
| Carol  | 25  | Boston    |
  • Pipes (|) separate columns.
  • Dashes (---) create the separator row.

Table with alignment

Table with left, center, and right alignment.

Code 
| Left    | Center  | Right   |
|:--------|:-------:|--------:|
| Aligned | Center  | Aligned |
| Left    | Centered| Right   |
  • Left colon (:---) aligns left.
  • Both colons (:---:) centers.
  • Right colon (---:) aligns right.

Table with formatted content

Table with code and formatted text in cells.

Code 
| Function | Description | Example |
|----------|-------------|---------|
| `map()` | Transforms arrays | `[1,2,3].map(x => x*2)` |
| `filter()` | **Filters** items | `arr.filter(x => x > 5)` |
| `reduce()` | Combines *all* items | `arr.reduce((a,b) => a+b)` |
  • Tables can contain inline formatting like code and emphasis.

Table Formatting

Apply formatting options within table cells.

Table with emphasis and code

Table with bold, code, italic, and symbols.

Code 
| Feature | Status | Notes |
|---------|--------|-------|
| **Login** | ✓ | Uses `OAuth2` |
| Single Sign-On | In Progress | *Coming soon* |
| Multi-Factor Auth | ✗ | Planned for Q2 |
  • Mix formatting styles within cells as needed.

Table with links and images alt text

Table with hyperlinks in cells.

Code 
| Technology | Link | Active |
|------------|------|--------|
| [React](https://react.dev) | Official Docs | Yes |
| [Vue](https://vuejs.org) | Vue.js Site | Yes |
| Angular | [Docs](https://angular.io) | In Maintenance |
  • Links work within table cells.

Complex table layout

Complex API documentation table.

Code 
| API Endpoint | Method | Required Parameters | Response |
|--------------|--------|---------------------|----------|
| `/api/users` | GET | `None` | `User[]` |
| `/api/users` | POST | `name`, `email` | `User` |
| `/api/users/:id` | PUT | `id`, `updates` | `User` |
| `/api/users/:id` | DELETE | `id` | `{ success: boolean }` |
  • Tables work well for API documentation.

Horizontal Rules

Create visual separators using horizontal line syntax.

Different horizontal rule styles

Three different styles of horizontal rules.

Code 
First section content.


---


Second section with dashes.


***


Third section with asterisks.


___


Fourth section with underscores.
  • All three (---, ***, ___) produce the same visual separators.

Horizontal rules in document structure

Horizontal rules separating document sections.

Code 
# Main Document


Introduction paragraph.


---


## Section 1


Content for section 1.


---


## Section 2


Content for section 2.
  • Rules provide visual breaks between content areas.

Minimal horizontal rule syntax

Simple horizontal rule separator.

Code 
Content above.


---


Content below.
  • Requires at least three characters and blank lines above/below.

Advanced Features

Learn escaping, HTML integration, and Markdown best practices.

Escaping

Escape special characters to display them literally.

Escaping special characters

Backslash escapes prevent Markdown interpretation.

Code 
\# Not a heading
\* Not italic \*
\[Not a link\](https://example.com)
\`Not inline code\`
  • Backslash (\\) escapes the following character.
  • Common escaped characters: #, *, {, }, [, ], |, \

Escaping symbols in text

Escaped dollar signs, operators, and symbols.

Code 
This costs \$50, not $50.
Use \+ to concatenate, not +.
The \& symbol is ampersand.
C\+\+ is a programming language.
  • Most symbols need escaping only in specific Markdown contexts.

Escaping in code and tables

Escaping characters in table cells.

Code 
| Character | Escaped | Purpose |
|-----------|---------|---------|
| \* | \\\* | Asterisk |
| \[ | \\\[ | Bracket |
| \\ | \\\\ | Backslash |
  • Escaping in code blocks and tables follows Markdown rules.

HTML and Raw Content

Embed HTML and raw content within Markdown documents.

Inline HTML tags

Inline HTML elements mixed with Markdown text.

Code 
This is <mark>highlighted text</mark> using HTML.
Use <small>small text</small> for footnotes.
Create <span style="color:red">colored text</span> with HTML.
  • Most Markdown renderers support basic HTML tags.
  • Use HTML for formatting Markdown doesn't support.

HTML entities and special characters

HTML entities for special symbols.

Code 
Copyright &copy; 2024
Registered &reg; Trademark
Em dash &mdash; separates thoughts
Left arrow &larr; navigate back
  • Entities are useful for symbols not on keyboard.

HTML block elements

Block-level HTML with embedded Markdown.

Code 
<div style="border: 1px solid #ccc; padding: 10px;">
This is a custom box with HTML.
Markdown formatting still works **inside**.
</div>
  • Most renderers support Markdown inside block HTML.

Best Practices

Write clean, readable, and accessible Markdown documents.

Well-structured Markdown document

Consistent document structure with clear hierarchy.

Code 
# Project Documentation


## Overview
A brief description of the project.


## Installation
Steps to install and setup.


## Usage
Examples of how to use the project.


## Contributing
Guidelines for contributing.
  • Use consistent heading levels throughout.
  • Organize logically with clear sections.

Accessible Markdown with proper alt text

Markdown with accessibility considerations.

Code 
# User Guide


![Application Dashboard](./images/dashboard.png "User interface of the application")


**Bold** for important terms, not just styling.
Code examples use backticks: `const x = 5`.


- Use lists for multiple items
- Each item is clear and concise
- Organized logically
  • Always include alt text for images.
  • Use semantic formatting (bold, italic for meaning).

CommonMark compliant Markdown

CommonMark compliant Markdown document.

Code 
# Introduction


This document follows CommonMark standards.


```python
# Code blocks use language identifiers
def hello():
    print("Hello, World!")
```


[Links](https://example.com) are explicit


---


**Final thoughts** on Markdown compliance.
  • CommonMark is the standard for portable Markdown.