Docsify文档助手：Markdown扩展语法详解

Docsify文档助手：Markdown扩展语法详解

docsify 🃏 A magical documentation site generator. 项目地址: https://gitcode.com/gh_mirrors/do/docsify

Docsify作为一个轻量级的文档生成工具，提供了许多实用的Markdown扩展语法，让文档编写更加高效和美观。本文将详细介绍这些扩展功能，帮助开发者更好地组织文档内容。

1. 提示框功能

Docsify提供了两种风格的提示框，可以显著提升文档的可读性。

1.1 重要提示框

使用!>语法可以创建醒目的重要提示框，适合用于强调关键信息：

!> **重要提示**：系统升级期间服务将不可用，请提前做好安排！

效果如下： !> 重要提示：系统升级期间服务将不可用，请提前做好安排！

1.2 普通提示框

使用?>语法创建普通提示框，适合用于补充说明或待办事项：

?> _建议_：在生产环境部署前，请先进行充分的测试。

效果如下： ?> 建议：在生产环境部署前，请先进行充分的测试。

2. 链接属性控制

Docsify提供了多种链接属性控制方式，满足不同场景需求。

2.1 禁用链接

[禁用示例](/demo ':disabled')

2.2 忽略处理

当需要保留原始链接格式时：

[原始链接](/api/index.html ':ignore')

2.3 链接目标控制

[新窗口打开](/demo ':target=_blank')
[当前窗口打开](/demo ':target=_self')

3. 任务列表

创建交互式任务列表：

- [x] 完成需求分析
- [ ] 编写单元测试
- [ ] 进行集成测试
  - [ ] 测试模块A
  - [ ] 测试模块B

效果如下：

• [x] 完成需求分析
• [ ] 编写单元测试
• [ ] 进行集成测试
  • [ ] 测试模块A
  • [ ] 测试模块B

4. 图片高级控制

4.1 添加CSS类

![公司Logo](/assets/logo.png ':class=logo-style')

4.2 设置ID

![产品示意图](/assets/product.png ':id=product-image')

4.3 尺寸控制

支持多种尺寸设置方式：

![小图标](/assets/icon.png ':size=50x50')
![中等图标](/assets/icon.png ':size=100')
![响应式图标](/assets/icon.png ':size=15%')

5. 标题ID设置

为标题添加自定义ID，便于锚点定位：

### 安装指南 :id=installation-guide

6. Markdown与HTML混合使用

6.1 可折叠内容块

<details>
<summary>常见问题解答(点击展开)</summary>

1. 如何重置密码？
2. 系统要求是什么？
3. 支持哪些浏览器？

</details>

效果如下：

常见问题解答(点击展开)

1. 如何重置密码？
2. 系统要求是什么？
3. 支持哪些浏览器？

6.2 带样式的Markdown内容

<div style='background: #f5f5f5; padding: 15px; border-radius: 5px'>

* 注意事项一
* 注意事项二
* 注意事项三

</div>

最佳实践建议

1. 对于特殊代码语法，建议使用反引号包裹，避免与配置或表情符号冲突
2. 混合HTML和Markdown时，确保两者之间有适当的空格
3. 使用提示框功能时，保持内容简洁明了
4. 为重要图片添加适当的CSS类，便于统一管理样式

通过合理运用这些扩展语法，你可以创建出结构清晰、交互性强的专业文档，大大提升读者的阅读体验。

docsify 🃏 A magical documentation site generator. 项目地址: https://gitcode.com/gh_mirrors/do/docsify