Adding code

A code block in a body

In any rich-text field, the toolbar has a code-block button (and inline code). Use it to drop code anywhere in your writing, between paragraphs, as many blocks as you like. It is stored as standard <pre><code>, with your code safely escaped, so it renders as visible code and any styling or highlighter picks it up. This is the right choice for a blog post or article where code and prose interleave.

A dedicated code field

If a page has exactly one code snippet in a fixed spot, a developer can make it a field. Put data-type="code" on the element in the template, and the editor shows a monospace code box for it:

<pre class="codeblock"><code data-type="code">{snippet}</code></pre>

The value is emitted exactly where the token sits. This suits a docs page with one canonical example, the snippet is part of the page's shape, not something interleaved with prose.

Syntax highlighting

nanoesis emits clean, unhighlighted code, it does not ship a highlighter, on purpose: it is a publishing compiler, not a framework, so it leaves the choice of language support and theme to you. To colour your code, add a highlighter as a file in public/ and a stylesheet, then point it at pre code. Many highlighters auto-detect the language; some use a class="language-js" hint on the <code>. Because the markup is standard, anything that highlights <pre><code> works, no nanoesis-specific glue.

This very site does exactly that: a tiny self-hosted highlighter in public/, no third-party request. To learn the model itself, see Components for the template side, and the guides for standing up a host.