随心标 荧光笔 组件

这是什么？

这是由FlyPurgatorioFlyPurgatorio制作的组件，他希望能够在不打印页面的情况下使用荧光笔（可持续性，各位）。多亏了全能的EstrellaYoshteEstrellaYoshte（愿他们的名字被赞颂）对CSS变量的深厚知识，调整颜色变得轻而易举！

你想在CSS中做注释吗？强调细节？突出你的临床腔或奇幻诗句？我知道我想！这个组件就是为我们这样的书呆子准备的，由多个层次构成，以匹配那种荧光笔的效果。

代码

在你的页面顶部需要包含这样一段代码：

[[include :scp-wiki-cn:component:markmywords]]

上面这行只需要在你的文章中被引用一次，该组件应该能兼容Sigma、黑标和玄武岩版式。

选择

首先，是一段推销词，用一个真正企业人的口吻来说：这套漂亮的荧光笔套装有各种颜色，可能会让你想起那个你绝对从没带过东西回家的办公用品柜。我们为你准备了整道彩虹（我们支持同性恋群体来购买我们的产品！），所以你知道这是一笔非常划算的买卖！
标记代码
红色
我是你今日的红色旗。我是你今日的[[span class="hili markerred"]]红色旗[[/span]]。
我是你今日的红色旗。我[[span class="grade markerred"]]是你今日的红色[[/span]]旗。1
我是你今日的红色旗。我是你今日的[[span class="acc darkerred"]]红色[[/span]旗。
将其合并为：我是你今日的红色旗。将其合并为：我[[span class="grade markerred"]]是[[span class="hili markerred"]]你今日的[[span class="acc darkerred"]]红色[[/span]]旗[[/span]]。[[/span]]
橙色
我是你今日的果蝇。我是你今日的[[span class="hili markerorange"]]果蝇[[/span]]。
我是你今日的果蝇。我[[span class="grade markerorange"]]是你今日的果蝇。[[/span]]
我是你今日的果蝇。我是你今日的[[span class="acc darkerorange"]]果[[/span]]蝇。
将其合并为：我是你今日的果蝇。将其合并为：我[[span class="grade markerorange"]]是[[span class="hili markerorange"]]你今日的[[span class="acc darkerorange"]]果[[/span]]蝇[[/span]]。[[/span]]
黄色
我是你今日的阳光。我是你今日[[span class="hili markeryellow"]]的阳光[[/span]]。
我是你今日的阳光。我[[span class="grade markeryellow"]]是你今日的阳光。[[/span]]
我是你今日的阳光。我是你今日的[[span class="acc darkeryellow"]]阳光[[/span]]。
将其合并为：我是你今日的阳光。将其合并为：我[[span class="grade markeryellow"]]是[[span class="hili markeryellow"]]你今日的[[span class="acc darkeryellow"]]阳光[[/span]]。[[/span]][[/span]]
粉色
我是你今日的甜糖。我是你今日[[span class="hili markerpink"]]的甜糖[[/span]]。
我是你今日的甜糖。我[[span class="grade markerpink"]]是你今日的甜糖。[[/span]]
我是你今日的甜糖。我是你今日的[[span class="acc darkerpink"]]甜糖[[/span]]。
将其合并为：我是你今日的甜糖。将其合并为：我[[span class="grade markerpink"]]是[[span class="hili markerpink"]]你今日[[span class="acc darkerpink"]]的甜糖[[/span]][[/span]]。[[/span]]
蓝色
我是你今日的蓝调与爵士乐。我是你今日的[[span class="hili markerblue"]]蓝调和爵士乐[[/span]]。
我是你今日的蓝调与爵士乐。我[[span class="grade markerblue"]]是你今日的蓝调与爵士乐。[[/span]]
我是你今日的蓝调与爵士乐。我是你今日的[[span class="acc darkerblue"]]蓝调[[/span]]与爵士乐。
将其合并为：我是你今日的蓝调与爵士乐。将其合并为：我[[span class="grade markerblue"]]是[[span class="hili markerblue"]]你今日的[[span class="acc darkerblue"]]蓝调[[/span]]与爵士乐[[/span]]。[[/span]]
绿色
我是你今日平均的绿色。我是你今日[[span class="hili markergreen"]]平均的绿色[[/span]]。
我是你今日平均的绿色。我[[span class="grade markergreen"]]是你今日平均的绿色。[[/span]]
我是你今日平均的绿色。我是你今日[[span class="acc darkergreen"]]平均的[[/span]]绿色。
将其合并为：我是你今日平均的绿色。将其合并为：我[[span class="grade markergreen"]]是[[span class="hili markergreen"]]你今日[[span class="acc darkergreen"]]平均的[[/span]]绿色[[/span]]。[[/span]]
紫色
我是你今日的华丽散文。我是你今日[[span class="hili markerpurple"]]华丽的散文[[/span]]。
我是你今日的华丽散文。我[[span class="grade markerpurple"]]是你今日的华丽散文。[[/span]]
我是你今日的华丽散文。我是你今日的华丽[[span class="acc darkerpurple"]]散文[[/span]]。
将其合并为：我 是你今日的华丽散文 。将其合并为：我[[span class="grade markerpurple"]] 是你今日的[[span class="hili markerpurple"]]华丽[[span class="acc darkerpurple"]]散文[[/span]] [[/span]]。[[/span]]
线条代码上标/注释的颜色
我是你今日的红色旗。我[[span class="underdash linerred"]]是你今日[[/span]]的[[span class="underdlined linerred"]]红色旗[[/span]]。红色注释 #a00b0b
我是你今日的果蝇。我[[span class="underdash linerorange"]]是你今日[[/span]]的[[span class="underdlined linerorange"]]果蝇[[/span]]。橙色注释 #d8880f
我是你今日的阳光。我[[span class="underdash lineryellow"]]是你今日[[/span]]的[[span class="underdlined lineryellow"]]阳光[[/span]]。黄色注释  #dad731
我是你今日的甜糖。我[[span class="underdash linerpink"]]是你今日[[/span]]的[[span class="underdlined linerpink"]]甜糖[[/span]]。粉色注释 #f33bc3
我是你今日的蓝调与爵士乐。我[[span class="underdash linerblue"]]是你今日[[/span]]的[[span class="underdlined linerblue"]]蓝调与爵士乐[[/span]]。蓝色注释 #0984cb
我是你今日均匀的绿色。我[[span class="underdash linergreen"]]是你今日[[/span]][[span class="underdlined linergreen"]]均匀的绿色[[/span]]。绿色注释 #3cb918
我是你今日的华丽散文。我[[span class="underdash linerpurple"]]是你今日[[/span]]的[[span class="underdlined linerpurple"]]华丽散文[[/span]]。紫色注释 #930c9c

它是如何运作的

就像一篇好的注释文本一样，这个组件由多个层次组成，以便你能在正确的时间强调正确的内容。代码由一组可以自由组合的span类构成。它们的组合方式如下：
Span类为了什么颜色代码
grade基础渐变着色，颜色较浅marker[颜色]
hili更加有块状/压力的着色，颜色较浅marker[颜色]
acc强调和墨水渗出效果，颜色较深darker[颜色]
underdlined文本下面的双线liner[颜色]
underdash单词下方的虚线liner[颜色]
之所以分层，是为了让荧光笔标记和下划线能共存在同一个span类中而互不干扰！当然，你可以自由选择要添加哪些层，以及添加多少层。是否想要墨迹渗透的效果、想叠加哪些层，等等，都取决于你。下面是我的做法：首先，是荧光笔的基础代码。我们将使用绿色标记来为SCP Wiki的圣典添加注释。首先要做的事情是突出显示收容措施。想象一下，拿着那支大号记号笔在文字上尽情挥洒！我们使用 grade+颜色的span类 来实现这一点，因此在这种情况下，写法是：[[span class=“grade markergreen”]]文本[[/span]]。
代码示例关闭

**特殊收容措施：**项目[[span class="grade markergreen"]]SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时，人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触[[/span]]，直到所有人员都离开收容间并重新上锁为止。

看起来像这样：

特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时，人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。

看起来已经相当醒目了，但你还可以添加一些强调。想象一下，为了突出重点，某些词被再次涂上一层颜色——就像记号笔在这些词上停顿、重新划过一样。为此，我们使用不会褪色的高亮版本：hili（表示highlighter，荧光笔 高光）+颜色的span类，在这种情况下是：[[span class=“hili markergreen”]]文本[[/span]]。
代码示例关闭

**特殊收容措施：**项目[[span class="grade markergreen"]]SCP-173应始终保管于一个上锁的收容间内。当[[span class="hili markergreen"]]必须进入[[/span]]SCP-173的收容间时，[[span class="hili markergreen"]]人员数目不论何时都不得少于三人[[/span]]且须将门重新上锁。至少须有两人全程与SCP-173保持[[span class="grade markergreen"]]眼神接触[[/span]][[/span]]，直到所有人员都离开收容间并重新上锁为止。

看起来像这样：

特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时，人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。

在这一层次上，你也许已经满意于这种较为柔和的效果了。不过，如果你想再增添一点细节，可以加上更深色的短线，像是记号笔在文件上划动时的停顿痕迹。你也可以将它用于特定的单词或短语，就好像有人过于激动地多次划线，导致墨迹略显凌乱。这一层有轻微的模糊效果，因此被这种笔触覆盖的文字会带有些许渗墨的质感。为此，我们使用较深、带模糊的强调标记：acc（代表 accent，重点）+深色调的颜色span类，在这种情况下为：[[span class=“acc darkergreen”]]文本[[/span]]。
代码示例关闭

**特殊收容措施：**项目[[span class="grade markergreen"]]SCP-173应始终保管于一个上锁的收容间内。当[[span class="hili markergreen"]]必须进入[[/span]]SCP-173的收容间时[[span class="acc darkergreen"]],[[/span]][[span class="hili markergreen"]]人员数目不论何时都不得少于三人[[/span]]且须将门[[span class="acc darkergreen"]]重新上锁[[/span]]。至少须有两人全程与SCP-173保持[[span class="grade markergreen"]]眼神接触[[/span]][[/span]]，直到所有人员都离开收容间并重新上锁为止。

看起来像这样：

特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时,人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。

现在，由于这段文字中的细节极其重要，我们可能需要给予它们额外的强调。我们将用“蓝色钢笔”的等效效果来实现这一点：under dlined（代表under double-lined，双下划线）+颜色，即：[[span class=“underdlined linerblue”]]文本[[/span]]。有些细节也许只需要再多思考一下，我们可以用虚线下划线来标记这些地方：underdash+颜色，也就是：[[span class=“underdash blue”]]文本[[/span]]。我还会加上一些^^上标^^来模拟手写的批注或涂鸦！
代码示例关闭

**特殊收容措施：**项目[[span class="grade markergreen"]]SCP-173应始终保管于一个上锁^^##0984cb|*##^^的收容间内。当[[span class="hili markergreen underdash linerblue"]]必须进入[[/span]]SCP-173的收容间时[[span class="acc darkergreen"]],[[/span]][[span class="hili markergreen"]]人员数目不论何时都不得少于三人[[/span]]且须将门[[span class="acc darkergreen"]]重新上锁[[/span]]。至少须有两人^^##0984cb|!!##^^全程与SCP-173保持[[span class="grade markergreen"]]眼神接触[[/span]][[/span]]，直到所有人员都离开收容间并[[span class="underdlined linerblue"]]重新上锁[[/span]]为止。^^##0984cb|显然##^^

= ##0984cb|*用钥匙还是密码??##

看起来像这样：

特殊收容措施：项目SCP-173应始终保管于一个上锁*的收容间内。当必须进入SCP-173的收容间时,人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人!!全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。显然

*用钥匙还是密码??
这就是基本的思路！现在，你可以随心所欲地将不同的线条、颜色和荧光笔效果组合在一起。如果你不喜欢当前选用的颜色，也可以轻松更改。只需将markergreen改为markerpurple，将linerblue改为linerred，并更新上标注释的十六进制颜色代码即可：
代码示例关闭

**特殊收容措施：**项目[[span class="grade markerblue"]]SCP-173应始终保管于一个上锁^^##a00b0b|*##^^的收容间内。当[[span class="hili markerpurple underdash linerred"]]必须进入[[/span]]SCP-173的收容间时[[span class="acc darkerpurple"]],[[/span]][[span class="hili markerpurple"]]人员数目不论何时都不得少于三人[[/span]]且须将门[[span class="acc darkerpurple"]]重新上锁[[/span]]。至少须有两人^^##a00b0b|!!##^^全程与SCP-173保持[[span class="hili markerpurple"]]眼神接触[[/span]][[/span]]，直到所有人员都离开收容间并[[span class="underdlined linerred"]]重新上锁[[/span]]为止。^^##a00b0b|显然##^^

= ##a00b0b|*用钥匙还是密码??##

特殊收容措施：项目SCP-173应始终保管于一个上锁*的收容间内。当必须进入SCP-173的收容间时,人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人!!全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。显然

*用钥匙还是密码??
额外内容 在一次有趣的建议之后，我新增了一个标记样式，我称之为“墨水用尽的[已编辑]标记”。使用时只需使用grade这个span类，不要使用acc或hili。因为acc和hili并不是为这种涂改用途设计的，用它们的话效果会有些怪。不过，你可以叠加多个grade来获得更深的遮盖效果！
代码示例关闭

[[span class="grade redactsigma"]]基金会可不是好人，各位。[[/span]]

叠加：
@@基金会可不是好人，各位。说真的，我们才是坏人。我们是一个专制的机构，由一个几乎没有问责或监督的隐形层级统治，负责定义什么是“正常”。
研究员Joe或特工Jane也许讨人喜欢、善良、有好意，但——善意的人也可能为邪恶的组织工作！通往地狱的道路是由善意铺成的，意识到这一点非常重要！@@

基金会可不是好人，各位。

叠加：
基金会可不是好人，各位。说真的，我们才是坏人。我们是一个专制的机构，由一个几乎没有问责或监督的隐形层级统治，负责定义什么是“正常”。
研究员Joe或特工Jane也许讨人喜欢、善良、有好意，但——善意的人也可能为邪恶的组织工作！通往地狱的道路是由善意铺成的，意识到这一点非常重要！

为了确保涂改效果能正常显示，我为三种主要版式都设置了基础文字颜色：[[span class="grade redactsigma"]]，[[span class:"grade redactbhl"]]和[[span class:"grade redactbasalt"]]如果你遇到任何技术问题，请联系FlyPurgatorioFlyPurgatorio。祝你标记愉快！
授权 / 引用关闭

引用： 特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时，人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。
作者： Moto42Moto42
授权协议： CC BY-SA 3.0
来源： SCP-173

Footnotes
  1. 1.译注：原文为“I [[span class="grade markerred"]] am the red [[/span]] flag of your day. [[/span]]”，结尾多余的[[/span]]应为笔误。后文此类错误已修改，不再说明。
css
     /* ===HIGHLIGHT MARKERS=== */

     /* ===BASE COLOURS=== */

.markerred { --_mark-color: 245 144 144; }
.markerorange { --_mark-color: 245  205  144; }
.markeryellow { --_mark-color: 246 251 143; }
.markerpink { --_mark-color: 255 178 235; }
.markerblue { --_mark-color: 144 208 245; }
.markergreen { --_mark-color: 183 249 164; }
.markerpurple { --_mark-color: 239 144 245; }

.darkerred { --_mark-color: 192 80 80; }
.darkerorange { --_mark-color: 230 177 97; }
.darkeryellow { --_mark-color: 228 226 106; }
.darkerpink { --_mark-color: 241 124 211; }
.darkerblue { --_mark-color: 88 166 211; }
.darkergreen { --_mark-color: 127 211 103; }
.darkerpurple { --_mark-color: 179 85 185; }

.linerred { --_liner-color: 160 11 11; }
.linerorange { --_liner-color: 216 136 15; }
.lineryellow { --_liner-color: 218 215 49; }
.linerpink { --_liner-color: 243 59 195; }
.linerblue { --_liner-color: 9 132 203; }
.linergreen { --_liner-color: 60 185 24; }
.linerpurple { --_liner-color: 147 12 156; }

     /* ===MARKER REDACTER=== */

.redactsigma { --_mark-color: 51 51 51; }
.redactbhl { --_mark-color: 12 12 12; }
.redactbasalt { --_mark-color: 20 20 20; }

     /* ===MARKER BASE=== */

.hili {
     padding-left: 1px;
     padding-right: 3px;
     border-radius: 1px 2px 2px 7px;
     background: rgb(var(--_mark-color));
}

     /* ===MARKER GRADE=== */

.grade {
     background-image: linear-gradient( to right, rgb(var(--_mark-color)/0.1), rgb(var(--_mark-color)) 4%, rgba(var(--_mark-color)/0.3) );
     border-radius: 1px 2px 2px 10px;
     padding-right: 5px;
     padding-top: 2px;
     padding-bottom: 1px;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
}

     /* ===MARKER ACCENT=== */

.acc {
     background-image: linear-gradient( to right, rgba(var(--_mark-color)/0.1), rgba(var(--_mark-color)) 4%, rgba(var(--_mark-color)/0.3) );
     text-shadow: 1px 1px 1px grey;
     border-radius: 2px;
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
}

     /* ===UNDERLININGS=== */

     /* ===DOUBLE LINES=== */

.underdlined {
     border-bottom: 5px double;
     border-color: rgb(var(--_liner-color));
}

     /* ===DASHED LINES=== */

.underdash {
     text-decoration: underline 2px dashed;
     display: inline-block;
     text-underline-position: under;
     text-decoration-color: rgb(var(--_liner-color));
}
组件
页面版本：⁨0⁩, 最后编辑于: ⁨2025/10/6 05:48:58⁩ (⁨⁨345⁩ 日前⁩), 现时评分: 6
历史 附件 + 选项