Code highlighting
Fenced code blocks in Markdown with a language are highlighted using CSS classes, so your stylesheet controls how code looks:
```go
func main() {}
```
renders as:
<pre class="chroma" tabindex="0"><code class="language-go"><span class="line"><span class="cl"><span class="kd">func</span> <span class="nf">main</span><span class="p">()</span> <span class="p">{}</span>
</span></span></code></pre>
-
The
<pre>hasclass="chroma"and no inline styles.tabindex="0"lets keyboard users scroll wide blocks. -
The
<code>hasclass="language-<lang>", using the first word of the fence as written. -
Each line is
<span class="line"><span class="cl">...</span></span>, and each token is a<span>with Chroma's short class name for its type. Plain text gets no span.
Common classes:
| Class | Token |
|---|---|
k |
Keyword |
kd |
Declaration keyword (func, var) |
nf |
Function name |
nx |
Other name |
s, s1, s2 |
Strings |
m, mi |
Numbers |
c, c1, cm |
Comments |
o |
Operator |
p |
Punctuation |
The full list is in Chroma's token type table
(
https://github.com/alecthomas/chroma/blob/master/types.go
). The markup is
the same as Hugo's, so any Chroma stylesheet works: generate one with Chroma's
CLI or hugo gen chromastyles and paste it into your CSS.
Taragen adds no highlighting CSS. Without any, code shows in your normal pre and code styles. A minimal monochrome style:
.chroma [class^="k"] { font-weight: bold; } /* keywords */
.chroma [class^="c"]:not(.cl) { font-style: italic; } /* comments */
Dark mode is just your usual prefers-color-scheme rules.
Blocks in a language Chroma doesn't know, blocks without a language, indented
code blocks, and inline code are plain <pre><code> (keeping class="language-<lang>" when a language was given). Taragen never guesses a
language.
