rough-notation 用于在网页上创建注释并设置注释动画的小型 JavaScript 库。它还可以应用在一些常见前端框架中，比如 Vue、React、 Svelte、Angular 甚至 Web Component。我把它应用在我创建的博客园皮肤中，比如你可以看见头部导航条中的博客昵称有一个下划线。下面是它可以实现的基本效果，点击按钮试一试吧。
使用 npm install --save rough-notation通过将元素传递到 annotation 来创建对象，以及通过配置来描述样式。拥有 annotation 对象后，可以调用annotation.show()显示。
import { annotate } from 'rough-notation'; const e = document.querySelector('#myElement'); const annotation = annotate(e, { type: 'underline' }); annotation.show();通过 Group 创建多个动画注释：
import { annotate, annotationGroup } from 'rough-notation'; const a1 = annotate(document.querySelector('#e1'), { type: 'underline' }); const a2 = annotate(document.querySelector('#e3'), { type: 'box' }); const a3 = annotate(document.querySelector('#e3'), { type: 'circle' }); const ag = annotationGroup([a3, a1, a2]); ag.show(); 参数创建 annotation 时，将传递一个配置。配置只有一个必填字段，即注释的字段。但是，您可以通过多种方式配置。type
类型
这是一个必填字段，设置注释样式。
underline：此样式在元素下方创建粗略下划线。
box：此样式在元素周围绘制一个框。
corcle：此样式在元素周围绘制一个圆圈。
highlight：此样式创建高光效果，就像用荧光笔标记一样。
strike-through：此样式通过元素绘制水平线。
crossed-off：此样式在元素上绘制一个"X"。
bracket：此样式围绕元素（通常是文本段落）绘制一个括号。默认情况下，在右侧，但可以配置为任何或全部的左，右，上，下。
animate
在注释时打开/关闭动画的布尔属性。默认值为 true。
animationDuration
动画的持续时间（以毫秒为单位）默认值为 800ms。
color
表示注释草图颜色的字符串值，默认值为 currentColor。
strokeWidth
注释描边宽度。默认值为 1。
padding
在元素和绘制注释的大致地点之间填充。可以将值设置为类似于 CSS 样式填充或只是数组。5 top left right bottom``[top, right, bottom, left] [top & bottom, left & right]。
multiline
仅适用于内联文本。若要注释多行文本，请将此属性设置为 true。
iterations
配置迭代次数。默认情况下，注释在两次迭代中绘制，例如，下划线时，从左到右绘制，然后从右到左绘制。
brackets
配置元素的哪一侧为支架。值可以是字符串或字符串数组，每个字符串都是这些值之一：top left right bottom。绘制支架时，默认值为 right。
它还提供一些事件，供您灵活调用，这里不展开描述，可以去 Github 看一看。
我的使用notation/index.js
import { annotate, annotationGroup } from 'rough-notation' import { pageName as currentPage } from '@tools' import './index.scss' const pageName = currentPage() const group = [] const annotateList = [ { page: 'all', selector: '#Header1_HeaderTitle', config: { type: 'underline', color: '#2196F3', }, }, { page: 'post', selector: '#cb_post_title_url', config: { type: 'highlight', color: '#FFF176', }, }, { page: 'post', selector: 'mark', config: { type: 'highlight', color: '#FFD54F', }, }, { page: 'post', selector: 's', config: { type: 'strike-through', color: '#FF0000', }, }, { page: 'post', selector: 'u', config: { type: 'underline', color: '#2196F3', }, }, { page: 'post', selector: 'strong', config: { type: 'circle', color: '#F44336', }, }, ] const buildGroup = items => { for (let { selector, page, config } of items) { if (page === 'all' || pageName === page) { const element = document.querySelectorAll(selector) if (!element.length) return if (element.length === 1) group.push(annotate(document.querySelector(selector), config)) if (element.length > 1) { element.forEach(function(item) { group.push(annotate(item, config)) }) } } } } const notation = (customList = annotateList) => { buildGroup(customList) const ag = annotationGroup(group) setTimeout(() => { ag.show() }, 1000) } export default notation在创建的博客园皮肤使用时，只需要 import notation，可以传入一些元素列表或者使用默认的列表。