注意
此页为于 SCP 维基内部使用的"组件"页。用于在其他页面中引用。
未经组件作者或工作人员允许,请勿修改此页的内容。
这是什么?
这是由FlyPurgatorio FlyPurgatorio 制作的组件,他希望能够在不打印页面的情况下使用荧光笔(可持续性,各位)。多亏了全能的EstrellaYoshte EstrellaYoshte (愿他们的名字被赞颂)对CSS变量的深厚知识,调整颜色变得轻而易举!
你想在CSS中做注释吗?强调细节?突出你的临床腔或奇幻诗句?我知道我想!这个组件就是为我们这样的书呆子准备的,由多个层次构成,以匹配那种荧光笔的效果。
代码
在你的页面顶部需要包含这样一段代码:
[[include :scp-wiki-cn:component:markmywords]]
上面这行只需要在你的文章中被引用一次,该组件应该能兼容Sigma、黑标和玄武岩版式。
选择
首先,是一段推销词,用一个真正企业人的口吻来说:这套漂亮的荧光笔套装有各种颜色,可能会让你想起那个你绝对从没带过东西回家的办公用品柜。我们为你准备了整道彩虹(我们支持同性恋群体来购买我们的产品!),所以你知道这是一笔非常划算的买卖!
| 标记 | 代码 |
|---|---|
| 红色 | |
| 我是你今日的红色旗。 | 我是你今日的[[span class="hili markerred"]]红色旗[[/span]]。 |
| 我是你今日的红色旗。 | 我[[span class="grade markerred"]]是你今日的红色[[/span]]旗。 |
| 我是你今日的红色旗。 | 我是你今日的[[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"]]
如果你遇到任何技术问题,请联系FlyPurgatorio FlyPurgatorio 。
祝你标记愉快!
/* ===HIGHLIGHTMARKERS=== */ /* ===BASECOLOURS=== */ .markerred{ --_mark-color:245144144; }.markerorange{ --_mark-color:245205144; }.markeryellow{ --_mark-color:246251143; }.markerpink{ --_mark-color:255178235; }.markerblue{ --_mark-color:144208245; }.markergreen{ --_mark-color:183249164; }.markerpurple{ --_mark-color:239144245; }.darkerred{ --_mark-color:1928080; }.darkerorange{ --_mark-color:23017797; }.darkeryellow{ --_mark-color:228226106; }.darkerpink{ --_mark-color:241124211; }.darkerblue{ --_mark-color:88166211; }.darkergreen{ --_mark-color:127211103; }.darkerpurple{ --_mark-color:17985185; }.linerred{ --_liner-color:1601111; }.linerorange{ --_liner-color:21613615; }.lineryellow{ --_liner-color:21821549; }.linerpink{ --_liner-color:24359195; }.linerblue{ --_liner-color:9132203; }.linergreen{ --_liner-color:6018524; }.linerpurple{ --_liner-color:14712156; } /* ===MARKERREDACTER=== */ .redactsigma{ --_mark-color:515151; }.redactbhl{ --_mark-color:121212; }.redactbasalt{ --_mark-color:202020; } /* ===MARKERBASE=== */ .hili{padding-left:1px; padding-right:3px; border-radius:1px2px2px7px; background: rgb(var(--_mark-color)); } /* ===MARKERGRADE=== */ .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:1px2px2px10px; padding-right:5px; padding-top:2px; padding-bottom:1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ===MARKERACCENT=== */ .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:1px1px1px grey; border-radius:2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ===UNDERLININGS=== */ /* ===DOUBLELINES=== */ .underdlined{border-bottom:5pxdouble; border-color: rgb(var(--_liner-color)); } /* ===DASHEDLINES=== */ .underdash{text-decoration:underline2pxdashed; display:inline-block; text-underline-position: under; text-decoration-color: rgb(var(--_liner-color)); }