注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许，请勿修改此页的内容。
这是什么？
这是由FlyPurgatorio制作的组件，他希望能够在不打印页面的情况下使用荧光笔（可持续性，各位）。多亏了全能的
EstrellaYoshte（愿他们的名字被赞颂）对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]]。
看起来像这样：
特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时，人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。
看起来已经相当醒目了，但你还可以添加一些强调。想象一下，为了突出重点，某些词被再次涂上一层颜色——就像记号笔在这些词上停顿、重新划过一样。为此，我们使用不会褪色的高亮版本：hili（表示highlighter，荧光笔 高光）+颜色的span类，在这种情况下是：[[span class=“hili markergreen”]]文本[[/span]]。
看起来像这样：
特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时，人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。
在这一层次上，你也许已经满意于这种较为柔和的效果了。不过，如果你想再增添一点细节，可以加上更深色的短线，像是记号笔在文件上划动时的停顿痕迹。你也可以将它用于特定的单词或短语，就好像有人过于激动地多次划线，导致墨迹略显凌乱。这一层有轻微的模糊效果，因此被这种笔触覆盖的文字会带有些许渗墨的质感。为此，我们使用较深、带模糊的强调标记：acc（代表 accent，重点）+深色调的颜色span类，在这种情况下为：[[span class=“acc darkergreen”]]文本[[/span]]。
看起来像这样：
特殊收容措施：项目SCP-173应始终保管于一个上锁的收容间内。当必须进入SCP-173的收容间时,人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。
现在，由于这段文字中的细节极其重要，我们可能需要给予它们额外的强调。我们将用“蓝色钢笔”的等效效果来实现这一点：under dlined（代表under double-lined，双下划线）+颜色，即：[[span class=“underdlined linerblue”]]文本[[/span]]。有些细节也许只需要再多思考一下，我们可以用虚线下划线来标记这些地方：underdash+颜色，也就是：[[span class=“underdash blue”]]文本[[/span]]。我还会加上一些^^上标^^来模拟手写的批注或涂鸦！
看起来像这样：
特殊收容措施：项目SCP-173应始终保管于一个上锁*的收容间内。当必须进入SCP-173的收容间时,人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人!!全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。显然
*用钥匙还是密码??
这就是基本的思路！现在，你可以随心所欲地将不同的线条、颜色和荧光笔效果组合在一起。如果你不喜欢当前选用的颜色，也可以轻松更改。只需将markergreen改为markerpurple，将linerblue改为linerred，并更新上标注释的十六进制颜色代码即可：
特殊收容措施：项目SCP-173应始终保管于一个上锁*的收容间内。当必须进入SCP-173的收容间时,人员数目不论何时都不得少于三人且须将门重新上锁。至少须有两人!!全程与SCP-173保持眼神接触，直到所有人员都离开收容间并重新上锁为止。显然
*用钥匙还是密码??
额外内容
在一次有趣的建议之后，我新增了一个标记样式，我称之为“墨水用尽的[已编辑]标记”。使用时只需使用grade这个span类，不要使用acc或hili。因为acc和hili并不是为这种涂改用途设计的，用它们的话效果会有些怪。不过，你可以叠加多个grade来获得更深的遮盖效果！
基金会可不是好人，各位。
叠加：
基金会可不是好人，各位。说真的，我们才是坏人。我们是一个专制的机构，由一个几乎没有问责或监督的隐形层级统治，负责定义什么是“正常”。
研究员Joe或特工Jane也许讨人喜欢、善良、有好意，但——善意的人也可能为邪恶的组织工作！通往地狱的道路是由善意铺成的，意识到这一点非常重要！
为了确保涂改效果能正常显示，我为三种主要版式都设置了基础文字颜色：
[[span class="grade redactsigma"]]，[[span class:"grade redactbhl"]]和[[span class:"grade redactbasalt"]]
如果你遇到任何技术问题，请联系FlyPurgatorio。
祝你标记愉快！
/* ===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)); }