Markmywords Highlighter Component

Link to article: Markmywords Highlighter Component.

@import url('https://scp-wiki.wdfiles.com/local--code/component%3Amarkmywords/1');

(none)

(none)

```
blockquote
```
```
blockquote
```
```
code
```
```
hili
```
```
markerred
```
```
hili
```
```
markerred
```
```
grade
```
```
markerred
```
```
grade
```
```
markerred
```
```
acc
```
```
darkerred
```
```
acc
```
```
darkerred
```
```
grade
```
```
markerred
```
```
hili
```
```
markerred
```
```
acc
```
```
darkerred
```
```
grade
```
```
markerred
```
```
hili
```
```
markerred
```
```
acc
```
```
darkerred
```
```
hili
```
```
markerorange
```
```
hili
```
```
markerorange
```
```
grade
```
```
markerorange
```
```
grade
```
```
markerorange
```
```
acc
```
```
darkerorange
```
```
acc
```
```
darkerorange
```
```
grade
```
```
markerorange
```
```
hili
```
```
markerorange
```
```
acc
```
```
darkerorange
```
```
grade
```
```
markerorange
```
```
hili
```
```
markerorange
```
```
acc
```
```
darkerorange
```
```
hili
```
```
markeryellow
```
```
hili
```
```
markeryellow
```
```
grade
```
```
markeryellow
```
```
grade
```
```
markeryellow
```
```
acc
```
```
darkeryellow
```
```
acc
```
```
darkeryellow
```
```
grade
```
```
markeryellow
```
```
hili
```
```
markeryellow
```
```
acc
```
```
darkeryellow
```
```
grade
```
```
markeryellow
```
```
hili
```
```
markeryellow
```
```
acc
```
```
darkeryellow
```
```
hili
```
```
markerpink
```
```
hili
```
```
markerpink
```
```
grade
```
```
markerpink
```
```
grade
```
```
markerpink
```
```
acc
```
```
darkerpink
```
```
acc
```
```
darkerpink
```
```
grade
```
```
markerpink
```
```
hili
```
```
markerpink
```
```
acc
```
```
darkerpink
```
```
grade
```
```
markerpink
```
```
hili
```
```
markerpink
```
```
acc
```
```
darkerpink
```
```
hili
```
```
markerblue
```
```
hili
```
```
markerblue
```
```
grade
```
```
markerblue
```
```
grade
```
```
markerblue
```
```
acc
```
```
darkerblue
```
```
acc
```
```
darkerblue
```
```
grade
```
```
markerblue
```
```
hili
```
```
markerblue
```
```
acc
```
```
darkerblue
```
```
grade
```
```
markerblue
```
```
hili
```
```
markerblue
```
```
acc
```
```
darkerblue
```
```
hili
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
grade
```
```
markergreen
```
```
grade
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
acc
```
```
darkergreen
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
hili
```
```
markerpurple
```
```
purple-hl
```
```
grade
```
```
markerpurple
```
```
purple-gr
```
```
acc
```
```
darkerpurple
```
```
purple-ac
```
```
grade
```
```
markerpurple
```
```
hili
```
```
markerpurple
```
```
acc
```
```
darkerpurple
```
```
grade
```
```
markerpurple
```
```
hili
```
```
markerpurple
```
```
acc
```
```
darkerpurple
```
```
underdlined
```
```
linerred
```
```
underdash
```
```
linerred
```
```
underdlined
```
```
linerred
```
```
underdash
```
```
linerred
```
```
underdlined
```
```
linerorange
```
```
underdash
```
```
linerorange
```
```
underdlined
```
```
linerorange
```
```
underdash
```
```
linerorange
```
```
underdlined
```
```
lineryellow
```
```
underdash
```
```
lineryellow
```
```
underdlined
```
```
lineryellow
```
```
underdash
```
```
lineryellow
```
```
underdlined
```
```
linerpink
```
```
underdash
```
```
linerpink
```
```
underdlined
```
```
linerpink
```
```
underdash
```
```
linerpink
```
```
underdlined
```
```
linerblue
```
```
underdash
```
```
linerblue
```
```
underdlined
```
```
linerblue
```
```
underdash
```
```
linerblue
```
```
underdlined
```
```
linergreen
```
```
underdash
```
```
linergreen
```
```
underdlined
```
```
linergreen
```
```
underdash
```
```
linergreen
```
```
underdlined
```
```
linerpurple
```
```
underdash
```
```
linerpurple
```
```
underdlined
```
```
linerpurple
```
```
underdash
```
```
linerpurple
```
```
grade
```
```
markergreen
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
grade
```
```
markergreen
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
grade
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
grade
```
```
markergreen
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
grade
```
```
markergreen
```
```
underdlined
```
```
linerblue
```
```
underdash
```
```
blue
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
underdash
```
```
linerblue
```
```
acc
```
```
darkergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
grade
```
```
markergreen
```
```
underdlined
```
```
linerblue
```
```
blockquote
```
```
grade
```
```
markergreen
```
```
hili
```
```
markergreen
```
```
underdash
```
```
linerblue
```
```
acc
```
```
darkergreen
```
```
hili
```
```
markergreen
```
```
acc
```
```
darkergreen
```
```
grade
```
```
markergreen
```
```
underdlined
```
```
linerblue
```
```
blockquote
```
```
grade
```
```
markerblue
```
```
hili
```
```
markerpurple
```
```
underdash
```
```
linerred
```
```
acc
```
```
darkerpurple
```
```
hili
```
```
markerpurple
```
```
acc
```
```
darkerpurple
```
```
hili
```
```
markerpurple
```
```
underdlined
```
```
linerred
```
```
blockquote
```
```
grade
```
```
markerpurple
```
```
hili
```
```
markerpurple
```
```
underdash
```
```
linerred
```
```
acc
```
```
darkerpurple
```
```
hili
```
```
markerpurple
```
```
acc
```
```
darkerpurple
```
```
hili
```
```
markerpurple
```
```
underdlined
```
```
linerred
```
```
blockquote
```
```
grade
```
```
redactsigma
```
```
grade
```
```
redactsigma
```
```
grade
```
```
redactsigma
```
```
blockquote
```
```
grade
```
```
redactsigma
```
```
grade
```
```
redactsigma
```
```
grade
```
```
redactsigma
```
```
grade
```
```
redactsigma
```

[[iftags +component]]

[[>]]
[[module Rate]]
[[/>]]

[[=]]
+ What is This?
[[/=]]

[[div class="blockquote"]]
This is a component by [[*user FlyPurgatorio]], who wanted to be able to use highlight marker without printing pages (sustainability y'all). And thanks to the great CSS variable knowledge from the almighty [[*user EstrellaYoshte]] (praised be their name), it's easy to adjust the colours!

You wanna annotate in your CSS? Accentuate the details? Highlight your clinical prose or fantastical verse? I know I do! This component is for nerds like us, consisting of several layers to make it match that marker look.
[[/div]]

-----
[[=]]
++ The Code
[[/=]]
[[div class="blockquote"]]
At the top of your page, you will need to include the following line of code:

[[div class="code"]]
@@[[include :scp-wiki:component:markmywords]]@@
[[/div]]

The above line only needs to be included **once** at the top of your article. The component should work with sigma, bhl and basalt themes.
[[/div]]

[[=]]
++ The options
[[/=]]

First, the salespitch, spoken as a real corporate man: //this beautiful marker set comes in a wide range of colours that might remind you of the office supplies closet you certainly never took anything home from. We got the whole rainbow for you (we support the gays to buy from us!), so you know this is a great deal!//

||~ The Marker ||~ The Code ||
||||~ RED ||
||I am [[span class="hili markerred"]]the red flag[[/span]] of your day. ||@@I am [[span class="hili markerred"]]the red flag[[/span]] of your day.@@ ||
||I [[span class="grade markerred"]] am the red [[/span]] flag of your day. ||@@I [[span class="grade markerred"]] am the red [[/span]] flag of your day. [[/span]]@@ ||
||I am the [[span class="acc darkerred"]]red[[/span]] flag of your day. ||@@I am the [[span class="acc darkerred"]]red[[/span]] flag of your day. [[/span]]@@ ||
||Combine it to: I [[span class="grade markerred"]] am [[span class="hili markerred"]]the [[span class="acc darkerred"]]red[[/span]] flag[[/span]] of your day. [[/span]] || @@Combine it to: I [[span class="grade markerred"]] am [[span class="hili markerred"]]the [[span class="acc darkerred"]]red[[/span]] flag[[/span]] of your day. [[/span]]@@ ||
||||~ ORANGE ||
||I am [[span class="hili markerorange"]]the fruit fly[[/span]] of your day. || @@I am [[span class="hili markerorange"]]the fruit fly[[/span]] of your day.@@ ||
||I [[span class="grade markerorange"]] am the fruit fly of your day. [[/span]] || @@I [[span class="grade markerorange"]] am the fruit fly of your day. [[/span]]@@ ||
||I am the [[span class="acc darkerorange"]]fruit[[/span]] fly of your day. || @@I am the [[span class="acc darkerorange"]]fruit[[/span]] fly of your day.@@ ||
||Combine it to: I [[span class="grade markerorange"]] am [[span class="hili markerorange"]]the [[span class="acc darkerorange"]]fruit[[/span]] fly[[/span]] of your day. [[/span]] || @@Combine it to: I [[span class="grade markerorange"]] am [[span class="hili markerorange"]]the [[span class="acc darkerorange"]]fruit[[/span]] fly[[/span]] of your day. [[/span]]@@ ||
||||~ YELLOW ||
||I am [[span class="hili markeryellow"]]the sunlight of[[/span]] your day. || @@I am [[span class="hili markeryellow"]]the sunlight of[[/span]] your day.@@||
||I [[span class="grade markeryellow"]] am the sunlight of your day. [[/span]] || @@I [[span class="grade markeryellow"]] am the sunlight of your day. [[/span]]@@||
||I am the [[span class="acc darkeryellow"]]sunlight[[/span]] of your day. || @@I am the [[span class="acc darkeryellow"]]sunlight[[/span]] of your day.@@||
||Combine it to: I [[span class="grade markeryellow"]] am [[span class="hili markeryellow"]]the [[span class="acc darkeryellow"]]sunlight[[/span]] of[[/span]] your day.[[/span]] || @@Combine it to: I [[span class="grade markeryellow"]] am [[span class="hili markeryellow"]]the [[span class="acc darkeryellow"]]sunlight[[/span]] of[[/span]] your day.[[/span]]@@ ||
||||~ PINK ||
||I am [[span class="hili markerpink"]]the sugar sweet of[[/span]] your day. || @@I am [[span class="hili markerpink"]]the sugar sweet of[[/span]] your day. @@ ||
||I [[span class="grade markerpink"]] am the sugar sweet of your day. [[/span]] || @@I [[span class="grade markerpink"]] am the sugar sweet of your day. [[/span]]@@ ||
||I am the [[span class="acc darkerpink"]]sugar sweet[[/span]] of your day. || @@I am the [[span class="acc darkerpink"]]sugar sweet[[/span]] of your day.@@ ||
||Combine it to: I [[span class="grade markerpink"]] am [[span class="hili markerpink"]]the [[span class="acc darkerpink"]]sugar sweet[[/span]] of[[/span]] your day. [[/span]] || @@Combine it to: I [[span class="grade markerpink"]] am [[span class="hili markerpink"]]the [[span class="acc darkerpink"]]suger sweet[[/span]] of[[/span]] your day. [[/span]]@@ [[/span]]||
||||~ BLUE ||
||I am [[span class="hili markerblue"]]the blues and jazz[[/span]] of your day. || @@I am [[span class="hili markerblue"]]the blues and jazz[[/span]] of your day.@@ ||
||I [[span class="grade markerblue"]]am the blues and jazz of your day. [[/span]] || @@I [[span class="grade markerblue"]]am the blues and jazz of your day. [[/span]]@@ ||
||I am the [[span class="acc darkerblue"]]blues[[/span]] and jazz of your day. || @@I am the [[span class="acc darkerblue"]]blues[[/span]] and jazz of your day.@@ ||
||Combine it to: I [[span class="grade markerblue"]]am the [[span class="hili markerblue"]]the [[span class="acc darkerblue"]]blues[[/span]] and jazz[[/span]] of your day. [[/span]] || @@Combine it to: I [[span class="grade markerblue"]]am the [[span class="hili markerblue"]]the [[span class="acc darkerblue"]]blues[[/span]] and jazz[[/span]] of your day. [[/span]]@@ ||
||||~ GREEN ||
||I am [[span class="hili markergreen"]]the mean green[[/span]] of your day. || @@I am [[span class="hili markergreen"]]the mean green[[/span]] of your day.@@ ||
||I [[span class="grade markergreen"]]am the mean green of your day. [[/span]] || @@I [[span class="grade markergreen"]]am the mean green of your day. [[/span]]@@ ||
||I am the [[span class="acc darkergreen"]]mean[[/span]] green of your day. || @@I am the [[span class="acc darkergreen"]]mean[[/span]] green of your day.@@ ||
||Combine it to: I [[span class="grade markergreen"]] am [[span class="hili markergreen"]]the [[span class="acc darkergreen"]]mean[[/span]] green[[/span]] of your day. [[/span]] || @@Combine it to: I [[span class="grade markergreen"]] am [[span class="hili markergreen"]]the [[span class="acc darkergreen"]]mean[[/span]] green[[/span]] of your day. [[/span]]@@||
||||~ PURPLE ||
||I am the [[span class="hili markerpurple"]]purple prose [[/span]]of your day. || @@I am the [[span class="purple-hl"]]purple prose [[/span]]of your day.@@ ||
||I [[span class="grade markerpurple"]] am the  purple prose of your day. [[/span]] || @@I [[span class="purple-gr"]] am the  purple prose of your day. [[/span]]@@ ||
||I am the purple [[span class="acc darkerpurple"]]prose [[/span]]of your day. || @@I am the purple [[span class="purple-ac"]]prose [[/span]]of your day.@@ ||
||Combine it to: I [[span class="grade markerpurple"]] am the [[span class="hili markerpurple"]] purple [[span class="acc darkerpurple"]]prose[[/span]] [[/span]]of your day.[[/span]] || @@Combine it to: I [[span class="grade markerpurple"]] am the [[span class="hili markerpurple"]] purple [[span class="acc darkerpurple"]]prose[[/span]] [[/span]]of your day.[[/span]]@@ ||

@@ @@
||~ The Lines ||~ The Code||~ Colour for superscript/notes ||
||I [[span class="underdlined linerred"]] am the red flag [[/span]] of [[span class="underdash linerred"]]your day. [[/span]] || @@I [[span class="underdlined linerred"]] am the red flag [[/span]] of [[span class="underdash linerred"]]your day. [[/span]] ||@@ || ##a00b0b|red note## @@#a00b0b@@ ||
||I [[span class="underdlined linerorange"]] am the fruit fly [[/span]] of [[span class="underdash linerorange"]]your day. [[/span]] || @@I [[span class="underdlined linerorange"]] am the fruit fly [[/span]] of [[span class="underdash linerorange"]]your day. [[/span]]@@ || ##d8880f|orange note## @@#d8880f@@ ||
||I [[span class="underdlined lineryellow"]] am the sunlight [[/span]] of [[span class="underdash lineryellow"]]your day. [[/span]] || @@I [[span class="underdlined lineryellow"]] am the sunlight [[/span]] of [[span class="underdash lineryellow"]]your day. [[/span]]@@ || ##dad731|yellow note##  @@#dad731@@ ||
||I [[span class="underdlined linerpink"]] am the sugar sweet[[/span]] of [[span class="underdash linerpink"]]your day. [[/span]] || @@I [[span class="underdlined linerpink"]] am the sugar sweet[[/span]] of [[span class="underdash linerpink"]]your day. [[/span]] @@ ||##f33bc3|pink note## @@#f33bc3@@ ||
||I [[span class="underdlined linerblue"]] am the blues and jazz [[/span]] of [[span class="underdash linerblue"]]your day. [[/span]] || @@I [[span class="underdlined linerblue"]] am the blues and jazz [[/span]] of [[span class="underdash linerblue"]]your day. [[/span]]@@|| ##0984cb|blue note## @@#0984cb@@ ||
||I [[span class="underdlined linergreen"]] am the mean green [[/span]] of [[span class="underdash linergreen"]]your day. [[/span]] || @@I [[span class="underdlined linergreen"]] am the mean green [[/span]] of [[span class="underdash linergreen"]]your day. [[/span]] @@ ||##3cb918|green note## @@#3cb918@@ ||
||I [[span class="underdlined linerpurple"]] am the purple prose [[/span]] of [[span class="underdash linerpurple"]]your day. [[/span]] || @@I [[span class="underdlined linerpurple"]] am the purple prose [[/span]] of [[span class="underdash linerpurple"]]your day. [[/span]]@@ ||##930c9c|purple note## @@#930c9c@@ ||

-----
[[=]]
++ How it works
[[/=]]
Just like a good annotated text, this compontent consists of several layers so you can emphasise the right things at the right time. The code consists of a combination of span classes you can mix and match. Here's how they fit together:

||~ Span Class ||~ What they're for ||~ Colour Code ||
|| grade || basis gradient colouring, lighter colour || marker[colour] ||
|| hili || a more blocked/pressure colouring, lighter colour || marker[colour] ||
|| acc || emphasis and ink bleeding effect, darker colour || darker[colour] ||
|| underdlined || double lines under the words|| liner[colour] ||
|| underdash || dashed line under the words || liner[colour] ||

The split exists so you can put the marker and the underlining in the same span class without it affecting each other! You can choose which and how much of these layers you'd want to add, though. Whether you want the ink bleeding effect or not, which layers you stack, etc. Here's how I'd do it:

Firstly, there is the base code for highlighter. We'll be using the green one for our annotation of the [https://scp-wiki.wikidot.com/scp-173 SCP Wiki's Sacred Text].

First order of business is highlighting the containment procedures. Imagine taking that big marker and going to town on the text! We use the **grade + colour span class** for this, so in this case, **@@[[span class="grade markergreen"]]Text[[/span]]@@**.

[[collapsible show="Code example" hide="Close"]]
[[div class="blockquote"]]
@@**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked container at all times. When personnel must enter SCP-173's container, no fewer than 3 may enter at any time and the door is to be relocked behind them. At all times, two persons must maintain direct eye contact with SCP-173[[/span]] until all personnel have vacated and relocked the container.@@
[[/div]]
[[/collapsible]]

Will look like this:

[[div class="blockquote"]]
**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked container at all times. When personnel must enter SCP-173's container, no fewer than 3 may enter at any time and the door is to be relocked behind them. At all times, two persons must maintain direct eye contact with SCP-173[[/span]] until all personnel have vacated and relocked the container.
[[/div]]

Already looking pretty lighted, but you could add some accents. Imagine specific words getting a second coating for emphasis, the marker stopping and restarting again over the words. For that, we use the non-fading version of the highlighter: **hili (for highlighter) + colour span class**, which is in this case **@@[[span class="hili markergreen"]]Text[[/span]]@@**.

[[collapsible show="Code example" hide="Close"]]
[[div class="blockquote"]]
@@**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked container at all times. When personnel [[span class="hili markergreen"]]must enter[[/span]] SCP-173's container, [[span class="hili markergreen"]]no fewer than 3 may enter[[/span]] at any time and the door is to be relocked behind them. At all times, two persons must maintain [[span class="grade markergreen"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and relocked the container.@@
[[/div]]
[[/collapsible]]

Will look like this:

[[div class="blockquote"]]
**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked container at all times. When personnel [[span class="hili markergreen"]]must enter[[/span]] SCP-173's container, [[span class="hili markergreen"]]no fewer than 3 may enter[[/span]] at any time and the door is to be relocked behind them. At all times, two persons must maintain [[span class="grade markergreen"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and relocked the container.
[[/div]]

This might be actually where you're fine with the more subtle look. However, you can also add a little more flourish by adding darker short lines, like pauses in the marker getting through the document. You can also use it for a specific (set of) words, as if someone frantically over-marked it and it got messy. There is a very minimal blur added to it, so words that get this coating get a little ink bleeding effect. For this, we use the darker, blurry accent marker: ****acc (for accent) + darker colour span class**, which is in this case **@@[[span class="acc darkergreen"]]Text[[/span]]@@**.

[[collapsible show="Code example" hide="Close"]]
[[div class="blockquote"]]
@@**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked container at all times. When personnel [[span class="hili markergreen"]]must enter[[/span]] SCP-173's container[[span class="acc darkergreen"]],[[/span]] [[span class="hili markergreen"]]no fewer than 3 may enter[[/span]] at any time and the door is to be[[span class="acc darkergreen"]] relocked [[/span]]behind them. At all times, two persons must maintain [[span class="grade markergreen"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and relocked the container.@@
[[/div]]
[[/collapsible]]

Will look like this:

[[div class="blockquote"]]
**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked container at all times. When personnel [[span class="hili markergreen"]]must enter[[/span]] SCP-173's container[[span class="acc darkergreen"]],[[/span]] [[span class="hili markergreen"]]no fewer than 3 may enter[[/span]] at any time and the door is to be[[span class="acc darkergreen"]] relocked [[/span]]behind them. At all times, two persons must maintain [[span class="grade markergreen"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and relocked the container.
[[/div]]

Now, since the details in this text are extremely important, we might put additional emphasis on them. We're gonna do that with the equivalent of a blue pen: **under dlined (for under double-lined) + colour**, which is **@@[[span class="underdlined linerblue"]]Text[[/span]]@@**. Some details might just need a little more thinking, and we can mark those with a dotted underlining: **underdash + colour**, which means **@@[[span class="underdash blue"]]Text[[/span]]@@**. I'll also add some **@@^^superscript^^@@** to add some scribbles!

[[collapsible show="Code example" hide="Close"]]
[[div class="blockquote"]]
@@**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked^^##0984cb|*##^^container at all times. When personnel [[span class="hili markergreen underdash linerblue"]]must enter[[/span]] SCP-173's container[[span class="acc darkergreen"]],[[/span]] [[span class="hili markergreen"]]no fewer than 3 may enter[[/span]] at any time and the door is to be[[span class="acc darkergreen"]] relocked [[/span]]behind them. At all times, two^^##0984cb|!!##^^persons must maintain [[span class="grade markergreen"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and [[span class="underdlined linerblue"]]relocked the container.[[/span]]^^##0984cb|obviously##^^@@

@@= ##0984cb|*with a key or a code??##@@
[[/div]]
[[/collapsible]]

Will look like this:

[[div class="blockquote"]]
**Special Containment Procedures:** Item [[span class="grade markergreen"]]SCP-173 is to be kept in a locked^^##0984cb|*##^^container at all times. When personnel [[span class="hili markergreen underdash linerblue"]]must enter[[/span]] SCP-173's container[[span class="acc darkergreen"]],[[/span]] [[span class="hili markergreen"]]no fewer than 3 may enter[[/span]] at any time and the door is to be[[span class="acc darkergreen"]] relocked [[/span]]behind them. At all times, two^^##0984cb|!!##^^persons must maintain [[span class="grade markergreen"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and [[span class="underdlined linerblue"]]relocked the container.[[/span]]^^##0984cb|obviously##^^

= ##0984cb|*with a key or a code??##
[[/div]]

That's the basic idea! Now, you can combine lines, colours and different highlighters with each other to your heart's desire. You can also easily change the colours if you don't like the one you picked. Simply change marker**green** to marker**purple** and liner**blue** to liner**red**, and update the hex code for the superscript notes:

[[collapsible show="Code example" hide="Close"]]
[[div class="blockquote"]]
@@**Special Containment Procedures:** Item [[span class="grade markerblue"]]SCP-173 is to be kept in a locked^^##a00b0b|*##^^container at all times. When personnel [[span class="hili markerpurple underdash linerred"]]must enter[[/span]] SCP-173's container[[span class="acc darkerpurple"]],[[/span]] [[span class="hili markerpurple"]]no fewer than 3 may enter[[/span]] at any time and the door is to be[[span class="acc darkerpurple"]] relocked [[/span]]behind them. At all times, two^^##a00b0b|!!##^^persons must maintain [[span class="hili markerpurple"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and [[span class="underdlined linerred"]]relocked the container.[[/span]]^^##a00b0b|obviously##^^@@

@@= ##a00b0b|*with a key or a code??##@@
[[/div]]
[[/collapsible]]

[[div class="blockquote"]]
**Special Containment Procedures:** Item [[span class="grade markerpurple"]]SCP-173 is to be kept in a locked^^##a00b0b|*##^^container at all times. When personnel [[span class="hili markerpurple underdash linerred"]]must enter[[/span]] SCP-173's container[[span class="acc darkerpurple"]],[[/span]] [[span class="hili markerpurple"]]no fewer than 3 may enter[[/span]] at any time and the door is to be[[span class="acc darkerpurple"]] relocked [[/span]]behind them. At all times, two^^##a00b0b|!!##^^persons must maintain [[span class="hili markerpurple"]]direct eye contact [[/span]]with SCP-173[[/span]] until all personnel have vacated and [[span class="underdlined linerred"]]relocked the container.[[/span]]^^##a00b0b|obviously##^^

= ##a00b0b|*with a key or a code??##
[[/div]]

@@ @@
[[size 125%]]**Bonus** [[/size]]

After a fun suggestion, here is one additional marker I'm going to call "the redaction marker ran out of ink". Use only the **grade** span class for this, not acc or hili. The acc and hili spans weren't made with this redacting use in mind, so the effect looks a bit off. You can stack the grade for a darker effect, though! 

[[collapsible show="Code example" hide="Close"]]
[[div class="blockquote"]]
@@[[span class="grade redactsigma"]] The Foundation are not the good guys, y'all.[[/span]]@@

Stacked:
@@[[span class="grade redactsigma"]] The Foundation are not the [[span class="grade redactsigma"]]good guys, y'all. Seriously, we're the baddies, we're an authoritarian institute that decides what normalcy entails, ruled by an invisible hiearchy with little to no accountability or oversight. Doesn't matter that Joe Research or Jane Agent is likable and kind and possibly well-intentioned; well-meaning people can work for bad organisations! The road to hell is paved with good intentions and it's important to be [[/span]]aware of that![[/span]]@@
[[/div]]
[[/collapsible]]

[[div class="blockquote"]]
[[span class="grade redactsigma"]] The Foundation are not the good guys, y'all.[[/span]]

Stacked:
[[span class="grade redactsigma"]] The Foundation are not the [[span class="grade redactsigma"]]good guys, y'all. Seriously, we're the baddies, we're an authoritarian institute that decides what normalcy entails, ruled by an invisible hiearchy with little to no accountability or oversight. Doesn't matter that Joe Research or Jane Agent is likable and kind and possibly well-intentioned; well-meaning people can work for bad organisations! The road to hell is paved with good intentions and it's important to be [[/span]]aware of that![[/span]]
[[/div]]

To make sure it redacts somewhat properly, I've included the base text colours for all three main themes:
**@@[[span class="grade redactsigma"]]@@, @@[[span class:"grade redactbhl"]]@@ and @@[[span class:"grade redactbasalt"]]@@**

If you run into any technical issues, let [[*user FlyPurgatorio]] know.

Happy marking!

[[collapsible show="Licensing / Citation" hide="Close"]]
> **Quote:** Special Containment Procedures: Item SCP-173 is to be kept in a locked container at all times. When personnel must enter SCP-173's container, no fewer than 3 may enter at any time and the door is to be relocked behind them. At all times, two persons must maintain direct eye contact with SCP-173 until all personnel have vacated and relocked the container.
> **Author:** [[*user Moto42]]
> **License:** CC BY-SA 3.0
> **Source:** [[[SCP-173]]]
[[/collapsible]]


-----

[[code type="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));
}
[[/code]]

[[/iftags]]

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/component%3Amarkmywords/1');
[[/module]]

Markmywords Highlighter Component

Module Styles

Inline Styles

Includes

CSS Classes

Page Source