Markdown 高级技巧

掌握了 Markdown 的基本语法后，你可能会发现还需要一些高级功能来满足更复杂的需求。本章将介绍 Markdown 的各种高级技巧，让你能够创建更专业、更丰富的文档。

任务列表

基本语法

- [ ] 未完成任务
- [x] 已完成任务

效果：

未完成任务
已完成任务

任务列表示例

## 学习计划

- [x] 学习 Markdown 基础语法
- [x] 掌握标题和文本格式
- [ ] 学习表格用法
- [ ] 学习高级技巧
- [ ] 完成实战项目

效果：

学习计划

嵌套任务列表

- [ ] 主任务
  - [x] 子任务 1
  - [ ] 子任务 2
    - [x] 子子任务 1
    - [ ] 子子任务 2

效果：

任务列表的应用

## 项目进度

### 后端开发
- [x] 数据库设计
- [x] API 接口开发
- [ ] 单元测试
- [ ] 文档编写

### 前端开发
- [ ] 页面设计
- [ ] 功能实现
- [ ] 样式优化
- [ ] 兼容性测试

脚注

基本语法

这是一段需要脚注的文本[^1]。

[^1]: 这是脚注内容。

效果：

这是一段需要脚注的文本¹。

多个脚注

Markdown 很强大[^1]，它简单易学[^2]，应用广泛[^3]。

[^1]: Markdown 是一种轻量级标记语言
[^2]: 由 John Gruber 于 2004 年创建
[^3]: 在技术文档、博客等领域广泛应用

效果：

Markdown 很强大¹，它简单易学²，应用广泛[^3]。

脚注的最佳实践

## 技术规格

处理器：Intel Core i7[^cpu]  
内存：16GB DDR4[^memory]  
存储：512GB SSD[^storage]

[^cpu]: 第11代，主频 2.3GHz
[^memory]: 双通道，支持超频
[^storage]: NVMe 协议，读写速度 3500MB/s

目录（TOC）

自动生成目录

一些编辑器支持自动生成目录：

[TOC]

手动创建目录

## 目录

- [简介](#简介)
- [安装](#安装)
- [配置](#配置)
- [使用](#使用)
- [常见问题](#常见问题)

## 简介

...

## 安装

...

GitHub 的目录

GitHub 会自动为 README 文件生成目录，但需要至少三个标题。

定义列表

基本语法（Markdown Extra）

术语
: 定义内容

另一个术语
: 定义内容

HTML 方式

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
  
  <dt>CSS</dt>
  <dd>层叠样式表</dd>
  
  <dt>JavaScript</dt>
  <dd>脚本语言</dd>
</dl>

效果：

HTML: 超文本标记语言
CSS: 层叠样式表
JavaScript: 脚本语言

删除线

基本语法

~~删除的文本~~

效果：

~~删除的文本~~

应用场景

## 版本更新

- [x] ~~添加新功能~~
- [ ] ~~修复 bug~~（已完成）
- [ ] 性能优化
- [ ] 文档更新

## 价格调整

原价：~~199元~~  
现价：99元

下标和上标

HTML 标签

H<sub>2</sub>O 是水。
E = mc<sup>2</sup>

效果：

H₂O 是水。 E = mc²

化学公式

## 化学方程式

2H<sub>2</sub>O → 2H<sub>2</sub> + O<sub>2</sub>

Na<sup>+</sup> + Cl<sup>-</sup> = NaCl

键盘快捷键

基本语法

<kbd>Ctrl</kbd> + <kbd>S</kbd>
<kbd>Cmd</kbd> + <kbd>C</kbd>

效果：

Ctrl + S Cmd + C

复杂快捷键

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

效果：

Ctrl + Shift + N Alt + F4

应用示例

## 快捷键指南

- 保存：<kbd>Ctrl</kbd> + <kbd>S</kbd>
- 复制：<kbd>Ctrl</kbd> + <kbd>C</kbd>
- 粘贴：<kbd>Ctrl</kbd> + <kbd>V</kbd>
- 撤销：<kbd>Ctrl</kbd> + <kbd>Z</kbd>

标记文本

高亮文本（部分编辑器）

==高亮文本==

HTML 高亮

<mark>高亮文本</mark>

效果：

高亮文本

缩写

HTML 方式

<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>

效果：

HTML CSS

详情和摘要

HTML 标签

<details>
<summary>点击查看详情</summary>

这里是详细内容。
</details>

效果：

点击查看详情

这里是详细内容。

代码折叠

<details>
<summary>点击展开代码</summary>

```python

def hello():
    print("Hello, World!")
```
</details>

引用属性

ID 属性（部分编辑器）

## 标题 \{#custom-id}

引用：[跳转到自定义ID](#custom-id)

HTML 方式

<h2 id="custom-id">标题</h2>

<a href="#custom-id">跳转到标题</a>

Emoji 表情

Unicode 表情

😀 😃 😄 😁 😆
👍 👎 👏 👋 👐

效果：

😀 😃 😄 😁 😆 👍 👎 👏 👋 👐

简写方式（部分编辑器）

:smile: :heart: :thumbsup: :rocket:

效果：

:smile: :heart: :thumbsup: :rocket:

Emoji 应用

## 状态更新

✅ 已完成
⏳ 进行中
❌ 失败
⚠️ 警告
ℹ️ 信息

元数据

YAML 头部

---
title: 文章标题
date: 2024-01-15
tags: [Markdown, 教程]
author: 张三
---

正文内容...

TOML 格式

+++
title = "文章标题"
date = 2024-01-15
tags = ["Markdown", "教程"]
+++

正文内容...

自动链接增强

@提及（GitHub）

@octocat

#问题引用（GitHub）

#123

仓库引用（GitHub）

octocat/Hello-World

特殊容器

提示框（特定编辑器）

> [!NOTE]
> 这是一个提示信息。

> [!TIP]
> 这是一个小技巧。

> [!WARNING]
> 这是一个警告。

> [!CAUTION]
> 这是一个注意事项。

HTML 提示框

<div style="background: #e3f2fd; padding: 15px; border-left: 4px solid #2196F3;">
<strong>提示：</strong>这是一个提示信息
</div>

效果：

提示：这是一个提示信息

进度条

HTML 方式

<div style="background: #eee; border-radius: 5px; overflow: hidden;">
  <div style="background: #4CAF50; height: 20px; width: 70%;">
    70%
  </div>
</div>

效果：

70%

时间线

HTML 方式

<div style="border-left: 2px solid #ccc; padding-left: 20px; margin: 20px 0;">
  <div style="margin-bottom: 20px;">
    <strong>2024-01</strong>
    <p>项目启动</p>
  </div>
  <div style="margin-bottom: 20px;">
    <strong>2024-02</strong>
    <p>完成开发</p>
  </div>
  <div>
    <strong>2024-03</strong>
    <p>正式发布</p>
  </div>
</div>

效果：

2024-01

项目启动

2024-02

完成开发

2024-03

正式发布

内联样式

文字颜色

<span style="color: red;">红色文字</span>
<span style="color: #007bff;">蓝色文字</span>

效果：

红色文字蓝色文字

文字大小

<span style="font-size: 20px;">大字体</span>
<span style="font-size: 12px;">小字体</span>

效果：

大字体小字体

实战示例

项目文档

# 项目文档

[TOC]

## 简介

本项目是一个...

---

## 快速开始

### 安装

```bash

npm install my-project

配置

复制配置文件
修改配置项
保存设置

功能特性

基础功能
高级功能
插件系统

API 参考

参数	类型	说明
id	string	ID
name	string	名称

常见问题

如何安装？

运行 npm install 命令

```

技术博客

# Markdown 高级技巧

## 📚 内容大纲

- [x] 任务列表
- [x] 脚注
- [x] 目录
- [ ] 图表
- [ ] 数学公式

---

## 💡 技巧一：任务列表

---

## 💡 技巧二：脚注

Markdown 很强大[^1]...

---

## 💡 技巧三：目录

...

---

## 🎯 总结

掌握了这些高级技巧...

[^1]: Markdown 由 John Gruber 创建

小结

本章介绍了 Markdown 的各种高级技巧：

任务列表：创建可交互的待办事项
脚注：添加文档注释和引用
目录：自动生成文章导航
特殊格式：下标、上标、删除线
HTML 增强：使用 HTML 标签扩展功能
自定义样式：添加颜色、大小等样式
结构化内容：时间线、进度条等

掌握这些高级技巧，可以让你的 Markdown 文档更加专业和功能丰富。

下一步： 学习 Markdown 数学公式的编写方法。

Markdown 是一种轻量级标记语言 ↩ ↩²
由 John Gruber 于 2004 年创建 ↩

#Markdown 高级技巧

#任务列表

#基本语法

#任务列表示例

#学习计划

#嵌套任务列表

#任务列表的应用

#脚注

#基本语法

#多个脚注

#脚注的最佳实践

#目录（TOC）

#自动生成目录

#手动创建目录

#GitHub 的目录

#定义列表

#基本语法（Markdown Extra）

#HTML 方式

#删除线

#基本语法

#应用场景

#下标和上标

#HTML 标签

#化学公式

#键盘快捷键

#基本语法

#复杂快捷键

#应用示例

#标记文本

#高亮文本（部分编辑器）

#HTML 高亮

#缩写

#HTML 方式

#详情和摘要

#HTML 标签

#代码折叠

#引用属性

#ID 属性（部分编辑器）

#HTML 方式

#Emoji 表情

#Unicode 表情

#简写方式（部分编辑器）

#Emoji 应用

#元数据

#YAML 头部

#TOML 格式

#自动链接增强

#@提及（GitHub）

##问题引用（GitHub）

#仓库引用（GitHub）

#特殊容器

#提示框（特定编辑器）

#HTML 提示框

#进度条

#HTML 方式

#时间线

#HTML 方式

#标签

#HTML 标签

#内联样式

#文字颜色

#文字大小

#实战示例

#项目文档

#配置

#功能特性

#API 参考

#常见问题

#技术博客

#小结

#Footnotes

Markdown 高级技巧

任务列表

基本语法

任务列表示例

学习计划

嵌套任务列表

任务列表的应用

脚注

基本语法

多个脚注

脚注的最佳实践

目录（TOC）

自动生成目录

手动创建目录

GitHub 的目录

定义列表

基本语法（Markdown Extra）

HTML 方式

删除线

基本语法

应用场景

下标和上标

HTML 标签

化学公式

键盘快捷键

基本语法

复杂快捷键

应用示例

标记文本

高亮文本（部分编辑器）

HTML 高亮

缩写

HTML 方式

详情和摘要

HTML 标签

代码折叠

引用属性

ID 属性（部分编辑器）

HTML 方式

Emoji 表情

Unicode 表情

简写方式（部分编辑器）

Emoji 应用

元数据

YAML 头部

TOML 格式

自动链接增强

@提及（GitHub）

#问题引用（GitHub）

仓库引用（GitHub）

特殊容器

提示框（特定编辑器）

HTML 提示框

进度条

HTML 方式

时间线

HTML 方式

标签

HTML 标签

内联样式

文字颜色

文字大小

实战示例

项目文档

配置

功能特性

API 参考

常见问题

技术博客

小结

Footnotes