Core vocabulary

The 52 names that need no definition, with the HTML each emits and the parameters it reads. Each one-line use below works in either form — @em x em@ or (em x em). Also here: the opaque @node and the raw nodes.

Headings — 6

h1 … h6 emit the same tag with id / class. A one-line heading holds no <p>.

(h1 Title h1)
@h2(id: methods) Methods h2@

<h1>Title</h1><h2 id="methods">Methods</h2>

Inline — 12

(strong Bold strong), (code x < y code), H@sub 2 sub@O, 12 km@sup 2 sup@ and
line one@br
line two.

<p><strong>Bold</strong>, <code>x &lt; y</code>, H<sub>2</sub>O, 12 km<sup>2</sup> and
line one<br> line two.</p>

em and strong are the explicit form of _x_ and *x*. A known node may follow a word directly when not followed by ., so emails stay prose. code escapes its body but still reads Wit inside; for verbatim text use @@code … code@@.

Lists — 6

ul, ol, li, dl, dt, dd — same tag, id / class.

@ul
(li First li)
(li Second li)
ul@

@dl
(dt Term dt)
(dd Definition dd)
dl@

For data-driven lists, loop a collection — see data model.

Links and media — 6

(a(href: https://en.wikipedia.org/wiki/Mercury_(planet), target: _blank) Mercury a)

@img(src: p.jpg, alt: A lamp, size: medium, align: center)

@figure(align: center)
@img(src: p.jpg, alt: A lamp)
(figcaption The lamp, 1923. figcaption)
figure@

@audio(src: clip.mp3, controls: true) audio@

<p><a href="https://en.wikipedia.org/wiki/Mercury_(planet)" target="_blank">Mercury</a></p>
<img src="p.jpg" alt="A lamp" style="max-width:380px;height:auto;display:block;margin-left:auto;margin-right:auto">
<figure style="text-align:center"><img src="p.jpg" alt="A lamp"><figcaption>The lamp, 1923.</figcaption></figure>
<audio src="clip.mp3" controls></audio>

Presets and pixel values cap the width and never upscale; full and percents fill. align: center centres the block; left / right push it to that side.

Tables — 8

table has its own renderer; thead, tbody, tfoot, tr, th, td and caption build one by hand, and their cells may hold any inline Wit.

#sites: [
  { name: Dunmore Head, status: operational }
  { name: Carrick Point, status: maintenance }
] !!

@table(caption: Hours, rows: [[Client, Total], [One to one, 104]])

@table(schema: { name: Site, status: Status }, rows: @sites)

@table
@thead
@tr (th Term th) (th Meaning th) tr@
thead@
@tbody
@tr (td (code x < y code) td) (td _anything_ inline td) tr@
tbody@
table@

More in Tables.

Blocks — 5

p, blockquote, pre, div take id / class; hr is void. A block element on its own line ends the paragraph before it.

@blockquote
Interviewer: How was it?
P12: Honestly, fine.
blockquote@

@div(class: card)
Body.
div@

@hr

<blockquote><p>Interviewer: How was it?
P12: Honestly, fine.</p></blockquote><div class="card"><p>Body.</p></div><hr>

pre escapes its body and keeps its lines; for text that must not be read as Wit use @@pre … pre@@.

Sectioning — 7

section, article, aside, header, footer, nav, main — same tag, block, id / class. Opening one on its own line needs its close (E_UNCLOSED_NODE).

@section(id: results)
(h2 Results h2)
The beam swept the harbour.
section@

Layout — 2

row is an invisible flex band; each col is a column. size fixes a column's width (small 220px, medium 380px, large 600px, a number, px or a percent); a column without one fills. Columns stack when the row is narrow.

@row
@col(size: 220)
@img(src: p.jpg, alt: A lamp)
col@
@col
The lamp was lit at dusk.
col@
row@

Opaque node

@node(type: x, …) passes every parameter to the renderer. When type is a core name it renders as that element; otherwise the HTML renderer emits a div with each parameter as a data-* attribute. Any identifier is a key here.

@node(type: box, role: note)
Hi.
node@

<div data-type="box" data-role="note"><p>Hi.</p></div>

Raw nodes

@@name … name@@ keeps its body verbatim but fills {{path}} holes; @@@name … name@@@ fills nothing.

#theme: { accent: teal } !!

@@style .lead { color: {{theme.accent}} } style@@

Area: @@math pi r^2 math@@.

Unresolved output

See also

Syntax · Tables · Images & media · Data model · Limitations.