Markdown | Advanced Cheat Sheet

An English guide to advanced Markdown features. For those who understand the basics and want to learn more sophisticated techniques.

📖 Basics Guide ← - Headings, Lists, Links, Images, and fundamentals

Blockquotes

> Single-level blockquote
>> Two-level blockquote
>>> Three-level blockquote

> You can use **bold** and `code` inside blockquotes
>
> Multi-paragraph blockquotes are also possible

Practical Examples

> "Programs should be written for people to read,
> and only incidentally for machines to execute."
> - Harold Abelson

> ⚠️ **Warning**
> This operation cannot be undone.

Task Lists (Checkboxes)

- [ ] Incomplete task
- [x] Completed task
- [ ] Nested task
  - [x] Subtask 1
  - [ ] Subtask 2

Practical Example

## Project Progress

- [x] Requirements
- [x] Design
- [ ] Implementation
  - [x] Frontend
  - [ ] Backend
- [ ] Deployment

📝 Platform Support: GitHub, GitLab, Notion, Obsidian, etc.

Tables and Alignment

Basic Table

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

Alignment Specification

| Left     | Center   | Right    |
|:---------|:--------:|----------:|
| Left     | Center   | Right    |
| Data     | Data     | Data     |

Practical Example

| Feature      | Free Plan | Pro Plan |
|:-------------|:---------:|:--------:|
| Users        | 5         | Unlimited|
| Storage      | 1GB       | 100GB    |
| Support      | ❌        | ✅       |

💡 Tip: Use <br> for line breaks within cells

Text Color Changes

Markdown doesn’t have a standard text color feature, but you can achieve it with HTML.

Basic Format

<span style="color: red;">Red text</span>
<span style="color: #0066cc;">Blue text</span>
<span style="color: green;">Green text</span>

Combining with Background Color

<span style="color: white; background-color: red; padding: 2px 6px;">Error</span>
<span style="color: white; background-color: green; padding: 2px 6px;">Success</span>
<span style="color: black; background-color: yellow; padding: 2px 6px;">Warning</span>

Footnotes

Text with a footnote[^1] or multiple footnotes[^note].

[^1]: This is the footnote content.
[^note]: Another footnote. You can use **bold** and [links](https://example.com) here.

📝 Platform Support: GitHub, GitLab, many static site generators

Definition Lists

Term 1
: Definition of term 1. Can span multiple lines.

HTML
: HyperText Markup Language
: A markup language for creating web pages

CSS
: Cascading Style Sheets

Collapsible Content (details/summary)

<details>
  <summary>Click to show details</summary>

  This is the collapsible content. - Lists work - **Bold text** works - `Code` works
</details>

Practical Examples

<details>
  <summary>📚 Table of Contents</summary>

  1. [Introduction](#introduction) 2. [How to Use](#how-to-use) 3. [FAQ](#faq)
</details>

<details>
  <summary>⚠️ Important Notes</summary>

  Before executing this operation, verify: - Backup is taken - Permissions are confirmed
</details>

HTML Integration

Basic Principles

1. Minimal use: Only when Markdown can’t do it
2. Valid HTML: No unclosed tags
3. Security: Avoid dangerous attributes
4. Blank lines: Required before and after HTML blocks

Commonly Used HTML Tags

<!-- Formatting -->
<u>underline</u>
<del>deleted</del>
<sub>subscript</sub>
<sup>superscript</sup>

<!-- Layout -->
<div align="center">Centered text</div>

<!-- Media -->
<video controls width="600">
  <source src="movie.mp4" type="video/mp4" />
</video>

⚠️ Tags to Avoid

• JavaScript: onclick, onload, etc.
• Dangerous CSS: position: fixed, etc.
• External script loading

Accessibility Best Practices

Heading Structure

✅ Good example:
# Main Title (H1)
## Section 1 (H2)
### Subsection (H3)
## Section 2 (H2)

❌ Bad example:
# Main Title
### Jump directly to H3 (skipping H2)

Image Alt Text

✅ Good example:
![Chart showing 2024 revenue growth from $1M in January to $1.8M in December](./sales.png)

❌ Bad example:
![Chart](./sales.png)
![](./sales.png)

Link Text

✅ Good example:
[Official Markdown Guide website](https://markdownguide.org)

❌ Bad example:
[Click here](https://markdownguide.org)
[Link](https://markdownguide.org)

SEO Best Practices

1. Heading hierarchy: Maintain logical structure
2. Internal links: Link to related pages appropriately
3. Image optimization: Optimize file size and use descriptive alt text
4. Readability: Use proper paragraph breaks and whitespace

References

📚 Official & Specifications

• CommonMark Spec - Markdown standard specification
• GitHub Flavored Markdown Spec - GitHub extended specification
• Markdown Guide - Comprehensive guide

🛠️ Tools

• Dillinger - Online editor
• StackEdit - Browser editor
• Typora - Desktop editor
• markdownlint - Linter

🎨 Extensions & Plugins

• Mermaid - Diagram creation
• KaTeX - Math formula display
• Prism.js - Syntax highlighting

🌐 Platform-Specific

• GitHub Markdown
• GitLab Markdown
• Notion Help

💡 Final Thoughts

Using advanced Markdown features enables richer expression and better documentation.

Key Points:

• Prioritize basics: Favor readability over complex formatting
• Know your platform: Understand what features your platform supports
• Always preview: Don’t skip the preview step

📖 Back to Basics Guide

Last updated: October 1, 2025