高亮规则样式

什么时候看这页

如果你只是想创建关键词高亮，先看 高亮与高亮规则。

这页用于调整高亮规则的显示效果。你可以在高亮规则的 CSS 输入框中填写样式。暂不支持的属性会被忽略。

基本示例

color: {primaryColor};
background-color: #FFF3C4;
font-weight: 700;
reeden-font-bold: 6;
border-left: 4px solid {primaryColor};
padding: 4px 10px;

文字样式

常用属性：

• color：文字颜色，例如 #FFB800、rgba(255,184,0,.8)、{textColor}、{primaryColor}
• font-weight：字重，例如 normal、400、700、bold
• reeden-font-bold：Reeden 阅读页面描边加粗等级，支持 1 到 9
• font-style：字体样式，例如 normal、italic
• font-size：字号，例如 14px、1em、1.1rem
• font-family：字体名列表
• line-height：行高，例如 1.5、24px
• text-align：对齐方式，例如 left、center、right、justify

下划线相关属性：

• text-decoration
• text-decoration-line
• text-decoration-style
• text-decoration-color

示例：

text-decoration: underline wavy {primaryColor};

背景和图片

常用属性：

• background-color：背景色，例如 #FFF3C4、{primaryColor}
• background-image：背景图，例如 url("reeden://bg/xxx")
• background-position：背景位置，例如 left top、center、right bottom
• background-repeat：重复方式，例如 no-repeat、repeat
• background-size：尺寸，例如 cover、contain、auto
• reeden-background-height：高亮背景高度，支持 half、50%、full、100%
• reeden-background-nine-slice：背景图 9-Slice 拉伸区域，例如 10 20 30 40

阅读正文中建议使用较浅的背景色，避免影响识别。

半高荧光笔示例：

background-color: rgba(254, 240, 138, 0.8);
reeden-background-height: half;

背景图 9-Slice 示例：

background-image: url("assets/bg.png");
background-size: 100% 100%;
reeden-background-nine-slice: 10 20 30 40;

边框和圆角

常用属性：

• border
• border-left
• border-right
• border-top
• border-bottom
• border-radius

示例：

border-left: 4px solid #94A3B8;
border-radius: 8px;

边框适合标记整段或标题，不一定适合每一个短词。

间距和展示

常用属性：

• padding
• padding-left
• padding-right
• padding-top
• padding-bottom
• margin
• margin-left
• margin-right
• margin-top
• margin-bottom
• display
• opacity
• float

display: block 更适合整段、连续整段或标题命中。

首字下沉这类效果可以使用 float：

float: left;
font-size: 2em;
line-height: 0.9;
margin-right: 0.12em;

动态颜色占位符

可以使用这些占位符适配当前主题：

• {textColor}：当前主题文字色
• {primaryColor}：当前主题强调色
• {roleColor}：当前匹配角色的颜色；没有角色颜色时会回退到文字色或强调色

示例：

color: {primaryColor};
border-left: 4px solid {primaryColor};

角色高亮示例：

color: {roleColor};
text-shadow: 0 0 4px {roleColor};

注意事项

• 不支持的 CSS 属性会被忽略
• reeden-background-height、reeden-font-bold 主要用于高亮规则，不是通用网页 CSS
• 规则样式太复杂可能影响阅读舒适度
• margin-top 和 margin-bottom 更适合块级命中
• 背景图和深色背景要确认亮色、暗色主题下都能看清正文