Code Blocks & Syntaxt Highlighting

,
#1

I’m mostly a DokuWiki (DW) guy but, I’ve been playing with TW a little more over the last couple years. I like how DW does their code-blocks; it’s easy for me to understand and what to expect the output to be. I have tried to mimic some of my writing on a TW file but I’m having trouble converting. I found out how to use code-blocks with the back-ticks. So, the following code looks good on its own.

If ($host.Version -ige "2.0") {Write-Host "Now we're cooking with gas!"}

However, as I’m taking my notes, I will show several examples - with bullets - so as to break apart or build upon other code examples. I like having my code samples “in line” with my bullets but, they seem to just span the whole page. Example images are below because I can’t figure out how to post it here in code without parts of it rendering:

image
image889×522 59.8 KB

#2

You can force “pre” content (i.e., stuff wrapped in triple backticks) to appear at the same indent level as the preceding bullet item by wrapping it within any arbitrary enclosing element that starts at the end of the same line as the bullet item.

For your example content, put a <foo> immediately following “above:”, and a </foo> on a separate line immediately following the ending triple backticks.

enjoy,
-e

1 Like
#3

Okay, that worked a treat! Thanks for the help on that! However, I have to ask… What does foo mean in this context? Having worked with developers in the past, I know they like to use them as bs placeholders. I was just curious what its use is in TW.

#4

<foo>...</foo> is an arbitrary custom XML element wrapper.

It doesn’t have any special pre-defined meaning in TW (or in HTML for that matter). You could just as readily use <div>...</div> or <span>...</span> or even <arglebargle>...</arglebargle>.

One interesting use of custom XML element wrappers is they can have CSS rules applied to them, just like classnames. For example, using a CSS classname, you can write:

<style> .myClass { color:red; } </style>

and then in your tiddler content, you can use HTML syntax, like this:

<span class="myClass">this is red text</span>

or you can use TiddlyWiki formatting syntax, like this:

@@.myClass this is red text@@

Similarly, with custom XML elements, you can write:

<style> myElement { color:red; } </style>

(note: there is NO DOT preceding the myElement name, otherwise it would be a classname!) and then in your tiddler content, you can use XML syntax, like this:

<myElement>this is red text</myElement>

-e

4 Likes