注解系统使用演示

这篇文章演示了新的注解功能，允许你在正文中添加详细的解释、翻译或观点。

基本用法

在正文中，你可以这样标记需要注解的内容：这是一个基本的注解示例。注解会显示在右侧栏中。

注解内容定义说明：
注解内容的定义格式如下：

[note:id]: 注解内容 [.note]

• 必须在冒号后面有一个空格，否则无法正确识别注解内容。
• 如果你不希望正文中出现多余空格，可以只在 [.note] 前加空格，例如：

  [note:basic]: 这是一个最基本的注解示例，用来展示注解系统的工作原理。 [.note]

  这样注解内容会包含 [.note] 前的所有内容，但不会在正文中插入多余空格。

多个注解示例

在同一段落中可以有多个注解。比如：机器学习是人工智能的一个子集，而深度学习又是机器学习的一个子集。

技术术语解释

当我们讨论API接口时，通常指的是应用程序编程接口。在现代web开发中，REST API是最常见的设计模式之一。

翻译示例

英文技术文档中经常出现这样的表述：asynchronous programming是现代JavaScript开发的核心概念。

观点和解释

关于技术选择，选择合适的前端框架对项目的成功至关重要。

数字引用型注解测试

有时你只需要在正文某个位置插入一个注解引用，而不是标记一段原文。此时可以使用数字型注解，格式如下：

正文示例：在现代前端开发中，很多工具和库都在不断演进¹，开发者需要持续学习²。

你会看到上面两个位置分别出现了数字编号，点击或悬停数字可查看注解内容。

数字型注解定义方式与普通注解一致，只是引用时使用 [#note:id]，定义时依然用 [note:id]: 内容 [.note]。

---

范围型与数字型注解混用

你可以在同一段落中同时使用范围型和数字型注解：

例如：注解系统是提升文档可读性的重要工具³。

---

其它说明

• 范围型注解用 [!note:id]内容[/note:id] 标记原文范围，注解栏标题为原文内容。
• 数字型注解用 [#note:id] 标记位置，注解栏标题为自动编号（如 1、2、3…）。
• 注解内容定义方式一致，结尾用 [.note]。

---

总结

这个注解系统的优势：

1. 清晰的语法：使用 [!note:id] 和 [/note:id] 标记需要注解的内容范围
2. 灵活的内容：注解可以包含解释、翻译、观点等任何补充信息
3. 不干扰正文：注解显示在侧栏，不会影响正文的阅读流畅性
4. 交互体验：鼠标悬停时会高亮对应的注解和正文
5. 响应式设计：在移动设备上注解会显示在正文下方

试试将鼠标悬停在有注解的文本上，你会看到对应的高亮效果！