Styling only one part of a link, and adding | symbol inside link text

Authoring Twine
1

Twine Version: 2.3
Story Format: SugarCube 2.0

How do I style only one part of the text inside a link without affecting all of the text? In the example below, I want the “40” to be a different color to the rest. I would also like to use the | symbol as part of the text. Obviously this doesn’t work because it’s used to link to a passage different than what the link text is.

I want the link text to be “:zap:40 (yellow text color) | Do some schoolwork (2hr) (standard text color)”

I tried this but unsurprisingly you can’t add a span element inside of a link like this.

[[⚡<span class="energy">40</span> | Do some work]]
2

You can use the <<link>><</link>> macro.
The trick is to either nestle simple quotes inside double quotes, or the reverse:

<<link '⚡<span class="energy">40</span> | Do some work' "Do some work">><</link>>

or

<<link "⚡<span class='energy'>40</span> | Do some work" "Do some work">><</link>>

should both work.

1 Like
3

Thank you, that works perfectly.