在现代网页设计中，文本注释和高亮是提升内容可读性和视觉吸引力的重要手段。传统的文本高亮通常是规整的矩形色块，而 **Rough Notation** 库为我们带来了一种全新的手绘风格注释方式。 ## 什么是 Rough Notation？ Rough Notation 是一个轻量级的 JavaScript 库，它可以在网页上创建手绘风格的文本注释。与传统的精确几何图形不同，Rough Notation 使用不规则的线条和形状，模拟真实手绘的效果，让你的网页内容更加生动有趣。 ## 支持的注释类型 Rough Notation 提供了多种注释样式，可以满足不同场景的需求： ### Underline（下划线）在文本下方绘制一条不规则的下划线，适合强调关键词。示例：这段文字带有下划线 ### Box（方框）用方框包围文本，适合突出重要内容或引用。示例：这段文字被方框包围 ### Circle（圆圈）用圆圈包围文本，适合标记重点或需要特别注意的内容。示例：这段文字被圆圈标记 ### Highlight（高亮）类似于荧光笔的效果，在文本下方添加高亮背景。示例：这段文字被高亮显示 ### Strike-through（删除线）在文本中间绘制一条穿过线，表示删除或不再适用的内容。示例：这段文字已删除 ### Crossed-off（划掉）用 X 形标记划掉文本，比删除线更加醒目。示例：这段文字被划掉 ### Bracket（括号）在文本两侧添加括号，适合注释或补充说明。示例：这段文字带有括号注释 ## 在 Astro 项目中使用为了方便在 Astro 项目中使用 Rough Notation，我创建了一个封装好的 `Notation` 组件。 ### 基本用法 ```astro --- import Notation from '../components/Notation.astro'; --- 这段文本会被高亮显示 ``` ### 自定义参数组件支持丰富的自定义参数： ```astro 带自定义参数的方框注释 ``` ### 参数说明 | 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | type | string | 必填 | 注释类型 | | color | string | #000000 | 注释颜色 | | animate | boolean | true | 是否启用动画 | | animationDuration | number | 800 | 动画持续时间（毫秒） | | animationDelay | number | 0 | 动画延迟时间（毫秒） | | animationIteration | number | 1 | 动画重复次数 | | padding | number/array | 5 | 内边距 | | strokeWidth | number | 2 | 线条宽度 | | multiline | boolean | false | 是否支持多行文本 | | iterations | number | 2 | 绘制迭代次数 | | show | boolean | true | 是否自动显示 | | brackets | string[] | ['right'] | bracket 类型专用，指定括号位置，可选值：left, right, top, bottom | ## 实际应用示例 ### 示例一：高亮关键词在文章中高亮重要的关键词，让读者更容易抓住重点。 ### 示例二：注释说明使用括号注释对专业术语进行解释说明：这是一个专业术语。 ### 示例三：强调重点使用圆圈或方框强调需要特别注意的内容：重要提示。 ### 示例四：动态演示通过动画效果逐步展示内容，增强用户体验。可以看到上面的示例都有不同的动画延迟，形成了依次展示的效果。 ## 总结 Rough Notation 是一个非常有趣的前端库，它为网页内容增添了独特的手绘风格。无论是在博客文章、演示文稿还是产品介绍中，使用手绘注释都能让内容更加生动、更具吸引力。在 Astro 项目中，通过封装的 `Notation` 组件，可以轻松地在任何页面中使用这些手绘注释效果，无需复杂的配置和代码编写。如果你想在自己的项目中尝试这种有趣的效果，可以参考官方文档 [https://roughnotation.com/](https://roughnotation.com/) 获取更多信息。