Markdown 高级技巧

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

任务列表

基本语法

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

效果：

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

任务列表示例

## 学习计划

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

效果：

学习计划

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

嵌套任务列表

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

效果：

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

任务列表的应用

## 项目进度

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

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

脚注

基本语法

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

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

效果：

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

多个脚注

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

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

效果：

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

^1: Markdown 是一种轻量级标记语言 [^2]: 由 John Gruber 于 2004 年创建 [^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 + SCmd + C

复杂快捷键

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

效果：

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

效果：

HTMLCSS

详情和摘要

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:

效果：

😄 ❤️ 👍 🚀

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

正式发布

标签

HTML 标签

<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;">
教程
</span>

效果：

Markdown 教程

内联样式

文字颜色

<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

---

配置

1. 复制配置文件
2. 修改配置项
3. 保存设置

---

功能特性

• [x] 基础功能
• [ ] 高级功能
• [ ] 插件系统

---

API 参考

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

---

常见问题

如何安装？

运行 npm install 命令

```

技术博客

# Markdown 高级技巧

## 📚 内容大纲

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

---

## 💡 技巧一：任务列表

---

## 💡 技巧二：脚注

Markdown 很强大[^1]...

---

## 💡 技巧三：目录

...

---

## 🎯 总结

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

[^1]: Markdown 由 John Gruber 创建

小结

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

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

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

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