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:

• [ ] Uncompleted task
• [x] Completed task

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

• [x] Learn Markdown basic syntax
• [x] Master headings and text formatting
• [ ] Learn table usage
• [ ] Learn advanced tips
• [ ] Complete practical projects

Nested Task Lists

- [ ] Main task
  - [x] Subtask 1
  - [ ] Subtask 2
    - [x] Sub-subtask 1
    - [ ] Sub-subtask 2

Effect:

• [ ] Main task
  • [x] Subtask 1
  • [ ] Subtask 2
    • [x] Sub-subtask 1
    • [ ] Sub-subtask 2

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

Footnotes

Basic Syntax

This is text that needs a footnote[^1].

[^1]: This is the footnote content.

Effect:

This is text that needs a footnote[^1].

[^1]: This is the footnote content.

Multiple Footnotes

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 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.

Footnote Best Practices

## 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:

[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

Basic Syntax (Markdown Extra)

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

~~Deleted text~~

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

HTML Tags

H<sub>2</sub>O is water.
E = mc<sup>2</sup>

Effect:

H₂O is water. E = mc²

Chemical Formulas

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 + SCmd + C

Complex Shortcuts

<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>N</kbd>
<kbd>Alt</kbd> + <kbd>F4</kbd>

Effect:

Ctrl + Shift + NAlt + 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)

==highlighted text==

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:

HTMLCSS

Details and Summary

HTML Tags

<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:

😄 ❤️ 👍 🚀

Emoji Applications

## Status Updates

✅ Completed
⏳ In Progress
❌ Failed
⚠️ Warning
ℹ️ Information

Metadata

YAML Front Matter

---
title: Article Title
date: 2024-01-15
tags: [Markdown, Tutorial]
author: Zhang San
---

Content...

TOML Format

+++
title = "Article Title"
date = 2024-01-15
tags = ["Markdown", "Tutorial"]
+++

Content...

Auto-link Enhancement

@Mentions (GitHub)

@octocat

#Issue References (GitHub)

#123

Repository References (GitHub)

octocat/Hello-World

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:

70%

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-01

Project started

2024-02

Development completed

2024-03

Official release

Tags

HTML Tags

<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 textBlue text

Text Size

<span style="font-size: 20px;">Large font</span>
<span style="font-size: 12px;">Small font</span>

Effect:

Large fontSmall font

Practical Examples

Project Documentation

# Project Documentation

[TOC]

## Introduction

This project is a...

---

## Quick Start

### Installation

```bash
npm install my-project

---

Configuration

1. Copy configuration file
2. Modify configuration items
3. Save settings

---

Features

• [x] Basic features
• [ ] Advanced features
• [ ] Plugin system

---

API Reference

Parameter	Type	Description
id	string	ID
name	string	Name

---

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.