Newer
Older
labs / tiddlers / system / cheatsheet / $__Cheatsheet_Cheatsheet_Code Highlighting.tid
tags: cheatsheet
title: $:/Cheatsheet/Cheatsheet/Code Highlighting
type: text/vnd.tiddlywiki

! Inline Code

Inline code can be created using the back quote character to surround the code.  This works in both Markdown and WikiText.

Example:

```
Blah `blah` blah.
```

Produces:

Blah `blah` blah.

! Code Blocks

Triple back quotes, and the language:
<pre class="hljs"><code>&#96;&#96;&#96;java
public static void main(String...args) {
  System.out.println("Hello, world.");
}
&#96;&#96;&#96;</code></pre>

Produces:

```java
public static void main(String...args) {
  System.out.println("Hello, world.");
}
```

For a list of supported languages:
https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md

Note that for plain text (where you don't want syntax highlighting) you can use either:
<pre class="plaintext hljs"><code>&#96;&#96;&#96;
plain text goes here
&#96;&#96;&#96;</code></pre>

which produces:

```
plain text goes here
```

or 

<pre class="hljs"><code>&#96;&#96;&#96;plaintext
plain text goes here
&#96;&#96;&#96;</code></pre>

which produces:

```plaintext
plain text goes here
```

The difference is that TiddlyWiki handles the first, and the `highlight.js` plugin handles the second.  Depending on themes, they can produce output with different styles.  We have tried to make the styles consistent, but there may be subtle differences.

You can also use HTML `<pre>` tags with Unicode literals if your content includes things that TiddlyWiki will try to interpret (such as triple-backquotes).  Trying to display Markdown source code is a good example of this.

```plaintext
<pre>&#96;&#96;&#96;
code goes here
&#96;&#96;&#96;</pre>
```

Produces:

<pre>&#96;&#96;&#96;
code goes here
&#96;&#96;&#96;</pre>