Wit

Literal & raw nodes; custom CSS

A raw node holds its body verbatim — code samples, maths, foreign markup, a stylesheet. Two @ signs keep Wit syntax inert but let {{…}} holes fill from data; three freeze everything.

Verbatim bodies

Inside @@name … name@@, @, #, emphasis marks and ::holes:: are plain text.

source
@@code
let total = @items.length; // _not_ italic
code@@

Inline: @@code @user.name code@@ is shown as typed.
result
let total = @items.length; // _not_ italic

Inline: @user.name is shown as typed.

<code>let total = @items.length; // _not_ italic</code>
<p>Inline: <code>@user.name</code> is shown as typed.</p>

A raw node is a block when a line break follows the opener and inline otherwise. The first name@@ closes it; none is E_UNCLOSED_RAW_NODE. Use @@pre for a preformatted block.

What each name becomes

  • code, pre — the HTML element, body escaped.
  • math, mathblock — AsciiMath rendered to MathML: @@math x^2 + y^2 = z^2 math@@.
  • style, script — emitted unescaped, always as a block.
  • Any other name — a <div class="wit-node" data-wit-name="…"> with the escaped body, for custom renderers.

Themed CSS from data

{{path}} in a @@ body reads a field or a single-value definition, so one record can drive a stylesheet:

source
#brand: { ink: navy, accent: #e4572e, radius: 4 } !!

@@style
.masthead { color: {{brand.ink}}; }
.button { background: {{brand.accent}}; border-radius: {{brand.radius}}px; }
style@@
result
<style>.masthead { color: navy; }
.button { background: #e4572e; border-radius: 4px; }</style>

An unknown path, or one that names a whole record, is E_UNRESOLVED_REFERENCE.

Frozen bodies

Three @ signs freeze the holes too — for showing template syntax, or CSS that really contains double braces:

source
@@@style
.note::before { content: "{{ not a hole }}"; }
style@@@
result

That renders <style>.note::before { content: "{{ not a hole }}"; }</style>. This site shows every Wit example in a frozen @@@pre for the same reason.

Common mistakes

  • Expecting {{…}} to work in prose — it is live only in @@ bodies; in prose use @brand.ink.
  • Writing a loop or condition inside @@style — the body is verbatim. Interpolate named fields.
  • Escaping with a backslash inside a raw body — it stays in the output.

See also

Interpolation & captures · Escapes · Rendering & styling · Derived content