[tw] Color highlighting in a snippet of code

[Jim Lehmer]

This is old news for veterans, I am sure, but thought I would pass this 
along in case anyone else hits it. Let's say you have a tiddler that 
displays a code block (you're writing an article on some coding technique 
or whatnot):

```
var foo = 1;
var bar = gonculate(foo);
alert(bar);
```

Which renders like:

var foo = 1;
var bar = gonculate(foo);
alert(bar);

Now you want to show a change, highlighting the changed part in red, like 
so:

var foo = 1;
var bar = xyzzy(foo);
alert(bar);

How do you do that in TW?

Well, you can't use the three back ticks any more, because that would make 
the *@@color:red; *wikitext (or *<span style-"color:red">*) show up as 
code, e.g.,

```
var foo = 1;
var bar =@@color:red; xyzzy(foo)@@;
alert(bar);
```

...renders as:

var foo = 1;
var bar =@@color:red; xyzzy(foo)@@;
alert(bar);

Not what we want.

You also can't use the single back tick ` at the beginning and end of the 
entire block, because everything in that inline code style has red text 
already.

Instead, you simply use the HTML *<pre> *element, which has most of the 
same styling you already need for a wikitext code block. Then you can use 
*@@color:red; 
*(or *<span style-"color:red">*) just fine:

<pre>
var foo = 1;
var bar =@@color:red; xyzzy(foo)@@;
alert(bar);
</pre>

...renders as:

var foo = 1;
var bar = xyzzy(foo);
alert(bar);

Problem solved.

*HOWEVER: *If your sample code has HTML or TW widgets with angle brackets, 
you have to take another step and make sure all the starting "angle 
brackets" are escaped into the HTML* &lt; *entity, or else they will be 
interpreted by TW during rendering because they are no longer fenced by 
```. In other words, if you have something like:

```

<$view field="modified" format="relativedate"/>
```

...which renders as:

<$view field="modified" format="relativedate"/>


...and you now want to show a change in part of it, you have to escape the 
opening angle bracket as follows:

<pre>

&lt;$view field="modified"@@color:red; format="date" template="DDD, MMM DD, 
YYYY"@@/>
</pre>


...to get:

<$view field="modified" format="date" template="DDD, MMM DD, YYYY"/>


Just thought I would pass this along. I may make an article out of it on my 
site, but was thinking it could use a tiddler somewhere on the wikitext 
help pages to help newcomers.

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.