Here's something neat:

Passage.prototype.render2 = Passage.prototype.render; Passage.prototype.render = function () { var b = this.render2(); b.setAttribute("tags",this.tags.join(" ")); return b; }; var tgs = state.history[0].passage.tags.join(" "); var fc = $('passages').firstChild; fc.setAttribute("tags",tgs);

If you're using Sugarcane, also add this code after it:

var it = setInterval(function(){ var fd = $('passages').firstChild; if (fd!=fc) { clearInterval(it); fd.setAttribute("tags",tgs); } },0);

Adding this JavaScript snippet means that the tags you give to passages in your Twine games are now also applied to the rendered passage divs.

What this means is that you can then write CSS that applies only to passages with specific tags. The selector syntax for this is [tags~=tagname]

So, if you tag a bunch of passages with "dream", you can then apply specific CSS to just those passages like this:

[tags~=dream] {
color: aqua;
text-shadow: aqua 0 0 3px;
}


Of course, this won't work for passage text displayed with the << display >> macro.

For new people: the JavaScript goes inside a disconnected passage that has "script" as its only tag.


If you like this code, consider using these macros that let you control tags inside the game.