Rendering the wikitext of a tiddler with syntax highlighting

[Soren Bjornstad]

In my upcoming TiddlyWiki book, I have a number of snippets where I'd like to present side-by-side wikitext and rendered output. I've accomplished this by creating a template that displays two divs with 50% width, the contents of each div transcluding a different template in turn: a template that displays the current tiddler in block mode, and a template that displays the wikitext of the current tiddler.

The trick is in the wikitext template: I can't figure out how to get the built-in highlight.js syntax highlighter ($:/plugins/tiddlywiki/highlight) to apply to the wikitext being dynamically transcluded in this way. (The HTML language does a good enough job on wikitext that it's very helpful to have it.) The obvious methods like using a code fence fail since they literally display the transclusion syntax "{{!!text}}" or "<<currentTiddler>>" instead of the result of that transclusion. Currently my best attempt is the following:

<pre class="html hljs xml"><code><$text text={{!!text}}/></code></pre>

(I pulled the <pre><code> HTML out of my browser developer tools while displaying a normal code-fenced, highlighted snippet.)

This almost works, except the highlight plugin doesn't kick in. I suspect this might be since I am using a <$text> widget, but I don't know the plugin well enough to be sure that's the cause. If I try to remove the <$text> widget, TiddlyWiki first renders the contents of the tiddler and then embeds the resulting HTML within the <pre> block, which looks bizarre and still doesn't syntax-highlight anything, so that's no good anyway:

Is there any way I can get the highlight plugin to apply to this transcluded wikitext?

[Saq Imtiaz]

Have you tried using the <$codeblock> widget?

[Soren Bjornstad]

Hah, exactly what I was looking for! Never seen that one before. Thanks.