正文高亮使用说明

Leo’s Desk 的正文高亮基于 mark 标签实现，适合在 MDX 文章中标记重点内容、关键结论、行动路径和概念解释。

使用时只需要在文章中写：

<mark className="样式类名 颜色类名">需要高亮的文字</mark>

注意：在 MDX 中要写 className，不要写 class。

一、最常用写法

<mark className="highlightr-realistic hltr-yellow">这是重点内容</mark>

显示效果：

这是重点内容

二、四种高亮样式

目前支持四种 Highlightr 风格样式：

样式	类名	适合用途
Lowlight	`highlightr-lowlight`	轻微提醒，不打断阅读
Floating	`highlightr-floating`	普通重点，适合短句
Realistic	`highlightr-realistic`	核心结论，最像真实荧光笔
Rounded	`highlightr-rounded`	关键词、路径、公式、标签

三、四种样式示例

<mark className="highlightr-lowlight hltr-pink">Lowlight 高亮</mark>

<mark className="highlightr-floating hltr-blue">Floating 高亮</mark>

<mark className="highlightr-realistic hltr-green">Realistic 高亮</mark>

<mark className="highlightr-rounded hltr-purple">Rounded 高亮</mark>

实际显示效果：

Lowlight 高亮 Floating 高亮 Realistic 高亮 Rounded 高亮

四、可用颜色

目前支持以下颜色：

颜色	类名	示例
粉色	`hltr-pink`	粉色高亮
红色	`hltr-red`	红色高亮
橙色	`hltr-orange`	橙色高亮
黄色	`hltr-yellow`	黄色高亮
绿色	`hltr-green`	绿色高亮
青色	`hltr-cyan`	青色高亮
蓝色	`hltr-blue`	蓝色高亮
紫色	`hltr-purple`	紫色高亮
灰色	`hltr-grey`	灰色高亮

五、推荐使用规则

为了避免文章变得花哨，建议固定使用规则。

1. Lowlight：轻微提醒

适合标记不太重要，但值得注意的内容。

真正的问题不一定是不会学，而是
<mark className="highlightr-lowlight hltr-pink">没有形成稳定的反馈循环</mark>。

显示效果：

真正的问题不一定是不会学，而是没有形成稳定的反馈循环。

2. Floating：普通重点

适合标记文章中的普通重点句。

学习的关键不是重复输入，而是
<mark className="highlightr-floating hltr-blue">能不能在需要时重新调用</mark>。

显示效果：

学习的关键不是重复输入，而是能不能在需要时重新调用。

3. Realistic：核心结论

适合标记文章中最重要的结论。

真正学会一个知识，不是看懂，也不是记住，而是
<mark className="highlightr-realistic hltr-yellow">能在合适的场景里使用它</mark>。

显示效果：

真正学会一个知识，不是看懂，也不是记住，而是能在合适的场景里使用它。

4. Rounded：路径、公式、关键词组

适合标记学习路径、方法公式、关键词组。

最小学习闭环是：
<mark className="highlightr-rounded hltr-green">信息 → 案例 → 练习 → 反馈</mark>。

显示效果：

最小学习闭环是：信息 → 案例 → 练习 → 反馈。

六、组合使用示例

在一篇文章中，可以同时使用多种样式。

学习不是把知识记住，而是
<mark className="highlightr-realistic hltr-yellow">把知识变成可以调用的能力</mark>。

最小路径可以压缩成：
<mark className="highlightr-rounded hltr-green">信息 → 案例 → 练习 → 反馈</mark>。

其中最容易被忽略的是
<mark className="highlightr-floating hltr-blue">反馈</mark>，
而不是重复看书。

实际显示效果：

学习不是把知识记住，而是把知识变成可以调用的能力。

最小路径可以压缩成：信息 → 案例 → 练习 → 反馈。

其中最容易被忽略的是反馈，而不是重复看书。

七、不推荐的用法

不要一整段都高亮

不推荐：

<mark className="highlightr-realistic hltr-yellow">
学习不是把知识记住，而是把知识变成能力。这个过程需要信息、案例、练习和反馈共同作用。
</mark>

高亮应该用来标记关键词、关键短句，而不是替代正文排版。

不要在一小段里混用太多颜色

不推荐：

<mark className="highlightr-rounded hltr-red">信息</mark> →
<mark className="highlightr-rounded hltr-blue">案例</mark> →
<mark className="highlightr-rounded hltr-green">练习</mark> →
<mark className="highlightr-rounded hltr-purple">反馈</mark>

更推荐：

<mark className="highlightr-rounded hltr-green">信息 → 案例 → 练习 → 反馈</mark>

八、常见错误

1. 写成了 `class`

错误写法：

<mark class="highlightr-realistic hltr-yellow">重点</mark>

正确写法：

<mark className="highlightr-realistic hltr-yellow">重点</mark>

2. 只写了样式，没有写颜色

不推荐：

<mark className="highlightr-realistic">重点</mark>

3. 只写了颜色，没有写样式

不推荐：

<mark className="hltr-yellow">重点</mark>

九、Leo’s Desk 推荐规范

建议在正式文章中固定使用下面这套规则：

内容类型	推荐样式
核心结论	`highlightr-realistic hltr-yellow`
方法路径	`highlightr-rounded hltr-green`
普通重点	`highlightr-floating hltr-blue`
轻微提醒	`highlightr-lowlight hltr-pink`
风险提示	`highlightr-rounded hltr-red`
概念解释	`highlightr-floating hltr-cyan`

示例：

真正学会一个知识，不是看懂，而是
<mark className="highlightr-realistic hltr-yellow">能在真实场景里调用它</mark>。

最小路径是：
<mark className="highlightr-rounded hltr-green">信息 → 案例 → 练习 → 反馈</mark>。

其中最容易被忽略的是
<mark className="highlightr-floating hltr-blue">反馈</mark>。

正文高亮使用说明

本页