Markdown Advanced Tips
After mastering Markdown's basic syntax, you may find yourself needing more advanced features to meet more complex requirements. This chapter will introduce various advanced Markdown techniques to help you create more professional and feature-rich documents.
Task Lists
Basic Syntax
- [ ] Uncompleted task
- [x] Completed task
Effect:
Task List Examples
## Learning Plan
- [x] Learn Markdown basic syntax
- [x] Master headings and text formatting
- [ ] Learn table usage
- [ ] Learn advanced tips
- [ ] Complete practical projects
Effect:
Learning Plan
Nested Task Lists
- [ ] Main task
- [x] Subtask 1
- [ ] Subtask 2
- [x] Sub-subtask 1
- [ ] Sub-subtask 2
Effect:
Task List Applications
## Project Progress
### Backend Development
- [x] Database design
- [x] API interface development
- [ ] Unit testing
- [ ] Documentation writing
### Frontend Development
- [ ] Page design
- [ ] Feature implementation
- [ ] Style optimization
- [ ] Compatibility testing
Basic Syntax
This is text that needs a footnote[^1].
[^1]: This is the footnote content.
Effect:
This is text that needs a footnote1.
Markdown is powerful[^1], it's easy to learn[^2], widely used[^3].
[^1]: Markdown is a lightweight markup language
[^2]: Created by John Gruber in 2004
[^3]: Widely used in technical docs, blogs, etc.
Effect:
Markdown is powerful1, it's easy to learn2, widely used3.
## Technical Specifications
Processor: Intel Core i7[^cpu]
Memory: 16GB DDR4[^memory]
Storage: 512GB SSD[^storage]
[^cpu]: 11th generation, 2.3GHz base frequency
[^memory]: Dual channel, supports overclocking
[^storage]: NVMe protocol, 3500MB/s read/write speed
Table of Contents (TOC)
Auto-generated TOC
Some editors support auto-generated TOC:
Manual TOC Creation
## Table of Contents
- [Introduction](#Introduction)
- [Installation](#Installation)
- [Configuration](#Configuration)
- [Usage](#Usage)
- [FAQ](#FAQ)
## Introduction
...
## Installation
...
GitHub's TOC
GitHub automatically generates TOC for README files, but requires at least three headings.
Definition Lists
Term
: Definition content
Another term
: Definition content
HTML Method
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Scripting language</dd>
</dl>
Effect:
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- JavaScript
- Scripting language
Strikethrough
Basic Syntax
Effect:
Deleted text
Application Scenarios
## Version Updates
- [x] ~~Add new features~~
- [ ] ~~Fix bugs~~ (completed)
- [ ] Performance optimization
- [ ] Documentation update
## Price Adjustment
Original price: ~~¥199~~
Current price: ¥99
Subscript and Superscript
H<sub>2</sub>O is water.
E = mc<sup>2</sup>
Effect:
H2O is water.
E = mc2
Chemical Equations as below:
## Chemical Equations
2H<sub>2</sub>O → 2H<sub>2</sub> + O<sub>2</sub>
Na<sup>+</sup> + Cl<sup>-</sup> = NaCl
Keyboard Shortcuts
Basic Syntax
<kbd>Ctrl</kbd> + <kbd>S</kbd>
<kbd>Cmd</kbd> + <kbd>C</kbd>
Effect:
Ctrl + S
Cmd + C
Complex Shortcuts
<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd>
<kbd>Alt</kbd> + <kbd>F4</kbd>
Effect:
Ctrl + Shift + N
Alt + F4
Application Examples
## Shortcut Guide
- Save: <kbd>Ctrl</kbd> + <kbd>S</kbd>
- Copy: <kbd>Ctrl</kbd> + <kbd>C</kbd>
- Paste: <kbd>Ctrl</kbd> + <kbd>V</kbd>
- Undo: <kbd>Ctrl</kbd> + <kbd>Z</kbd>
Marked Text
Highlighted Text (some editors)
HTML Highlight
<mark>highlighted text</mark>
Effect:
highlighted text
Abbreviations
HTML Method
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>
Effect:
HTML
CSS
Details and Summary
<details>
<summary>Click to view details</summary>
Here is detailed content.
</details>
Effect:
Click to view details
Here is detailed content.
Code Folding
<details>
<summary>Click to expand code</summary>
```python
def hello():
print("Hello, World!")
```
</details>
Reference Attributes
ID Attribute (some editors)
## Heading \{#custom-id}
Reference: [Jump to custom ID](#custom-id)
HTML Method
<h2 id="custom-id">Heading</h2>
<a href="#custom-id">Jump to heading</a>
Emoji
Unicode Emojis
Effect:
😀 😃 😄 😁 😆
👍 👎 👏 👋 👐
Shorthand Method (some editors)
:smile: :heart: :thumbsup: :rocket:
Effect:
:smile: :heart: :thumbsup: :rocket:
Emoji Applications
## Status Updates
✅ Completed
⏳ In Progress
❌ Failed
⚠️ Warning
ℹ️ Information
YAML Front Matter
---
title: Article Title
date: 2024-01-15
tags: [Markdown, Tutorial]
author: Zhang San
---
Content...
+++
title = "Article Title"
date = 2024-01-15
tags = ["Markdown", "Tutorial"]
+++
Content...
Auto-link Enhancement
@Mentions (GitHub)
#Issue References (GitHub)
Repository References (GitHub)
Special Containers
Alert Boxes (specific editors)
> [!NOTE]
> This is a note.
> [!TIP]
> This is a tip.
> [!WARNING]
> This is a warning.
> [!CAUTION]
> This requires caution.
HTML Alert Boxes
<div style="background: #e3f2fd; padding: 15px; border-left: 4px solid #2196F3;">
<strong>Tip:</strong> This is a tip message
</div>
Effect:
Tip: This is a tip message
Progress Bar
HTML Method
<div style="background: #eee; border-radius: 5px; overflow: hidden;">
<div style="background: #4CAF50; height: 20px; width: 70%;">
70%
</div>
</div>
Effect:
Timeline
HTML Method
<div style="border-left: 2px solid #ccc; padding-left: 20px; margin: 20px 0;">
<div style="margin-bottom: 20px;">
<strong>2024-01</strong>
<p>Project started</p>
</div>
<div style="margin-bottom: 20px;">
<strong>2024-02</strong>
<p>Development completed</p>
</div>
<div>
<strong>2024-03</strong>
<p>Official release</p>
</div>
</div>
Effect:
2024-02
Development completed
<span style="background: #e0e0e0; padding: 2px 8px; border-radius: 4px; font-size: 12px;">
Markdown
</span>
<span style="background: #e0e0e0; padding: 2px 8px; border-radius: 4px; font-size: 12px;">
Tutorial
</span>
Effect:
Markdown
Tutorial
Inline Styles
Text Color
<span style="color: red;">Red text</span>
<span style="color: #007bff;">Blue text</span>
Effect:
Red text
Blue text
Text Size
<span style="font-size: 20px;">Large font</span>
<span style="font-size: 12px;">Small font</span>
Effect:
Large font
Small font
Practical Examples
Project Documentation
# Project Documentation
[TOC]
## Introduction
This project is a...
---
## Quick Start
### Installation
```bash
npm install my-project
Configuration
- Copy configuration file
- Modify configuration items
- Save settings
Features
API Reference
FAQ
How to install?
Run npm install command
```
Technical Blog
# Markdown Advanced Tips
## 📚 Content Outline
- [x] Task lists
- [x] Footnotes
- [x] TOC
- [ ] Diagrams
- [ ] Math formulas
---
## 💡 Tip 1: Task Lists
---
## 💡 Tip 2: Footnotes
Markdown is powerful[^1]...
---
## 💡 Tip 3: TOC
...
---
## 🎯 Summary
Mastering these advanced tips...
[^1]: Markdown created by John Gruber
Summary
This chapter introduced various advanced Markdown techniques:
- Task lists: Create interactive todo items
- Footnotes: Add document comments and references
- TOC: Auto-generate article navigation
- Special formatting: Subscripts, superscripts, strikethrough
- HTML enhancements: Use HTML tags to extend functionality
- Custom styles: Add colors, sizes, etc.
- Structured content: Timelines, progress bars, etc.
Mastering these advanced techniques will make your Markdown documents more professional and feature-rich.
Next: Learn how to write Markdown Math Formulas.