如何自定义画笔类型·PAGENOTE

介绍

PAGENOTE 提供了几种默认的高亮类型：背景高亮、下划线、波浪线几种常见的高亮。如果这几种样式无法满足你的需求，PAGENOTE 提供了可扩展的高亮设置。

使用教程

进入设置页面，添加填写如下信息即可。

类型key: 为画笔取一个英文名字

类型名称：为画笔取一个中文名字

快捷键字母：设置一个高亮快捷键

css 样式：定义此画笔的展示样式。其中 —bg 为背景色变量， —text-color 为文字变量。

例如：


page-note .slot-wrapper {
	background: var(--bg, #ffe534); // 定义高亮内容的背景颜色
	color: var(--text-color,#000000); // 定义高亮内容的文字颜色
}

高级：如果你还想定义高亮内容鼠标聚焦后的样式（如增加动画），还可以继续定义


page-note .slot-wrapper {
	background: var(--bg, #ffe534); // 定义高亮内容的背景颜色 --bg 为颜色变量
	color: var(--text-color,#000000); // 定义高亮内容的文字颜色 --text-color 为文字变量
}

// 下列中的 wave 即对应表单提交的 「类型key」
page-note([data-brush='wave'][data-action="hover"]) .slot-wrapper {
  animation: pagenote-wave-hover 0.9s ease-in-out 2 alternate;
  outline: 0;
}

如果你不懂 css 语法，可以将删除代码块交给AI，阐述你的诉求，让 AI 帮你生成想要的 CSS 样式。或联系作者付费定制。