Carve

Appearance

Examples: Extensions ​

Features that ship off and must be switched on, covering both corpus-pinned Tier-2 behavior and snapshot-verified Tier-3 extensions.

Extensions you enable ​

These extensions ship off. Register their exported handler in the processor's extensions array to switch them on.

Citations, numbered ​

Bracketed [@key] citations with numbered output and a references list.

19 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
Smith [@smith2020] and others [see @jones2019, p. 4; -@doe2021] agree.

[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@jones2019]: {author="Jones" year="2019"} Jones, A. (2019). *Notes*. Pub.
[@doe2021]: {author="Doe" year="2021"} Doe, R. (2021). *Work*. Pub.
html
<p>Smith [<a data-cite-key="smith2020" href="#ref-smith2020">1</a>] and others [see <a data-cite-key="jones2019" data-cite-prefix="see" data-locator-label="page" data-locator="4" href="#ref-jones2019">2</a>, p. 4, <a data-cite-key="doe2021" data-suppress-author="true" href="#ref-doe2021">3</a>] agree.</p>
<ol class="references">
  <li id="ref-smith2020">Smith, J. (2020). <strong>A Study</strong>. Pub.</li>
  <li id="ref-jones2019">Jones, A. (2019). <strong>Notes</strong>. Pub.</li>
  <li id="ref-doe2021">Doe, R. (2021). <strong>Work</strong>. Pub.</li>
</ol>
carve
A defined [@known] and an undefined [@missing] reference.

[@known]: Known, A. (2020). *Defined*. Pub.
html
<p>A defined [<a data-cite-key="known" href="#ref-known">1</a>] and an undefined [@missing] reference.</p>
<ol class="references">
  <li id="ref-known">Known, A. (2020). <strong>Defined</strong>. Pub.</li>
</ol>
carve
A [@key]{.ref} is a span, not a citation.
html
<p>A <span class="ref"><span class="mention"><strong>@key</strong></span></span> is a span, not a citation.</p>
carve
A locator with a semicolon [@a, p. 1; 2] is literal.

[@a]: A, B. (2019). *Work*. Pub.
html
<p>A locator with a semicolon [<span class="mention"><strong>@a</strong></span>, p. 1; 2] is literal.</p>
carve
See [@k, p. 4] here.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>See [<a data-cite-key="k" data-locator-label="page" data-locator="4" href="#ref-k">1</a>, p. 4] here.</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
See [@k, pp. 33-35, 38 and *passim*] here.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>See [<a data-cite-key="k" data-locator-label="page" data-locator="33-35, 38" data-suffix="and passim" href="#ref-k">1</a>, pp. 33-35, 38 and <strong>passim</strong>] here.</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
A [@k, chap. 2] and [@k, § 5].

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>A [<a data-cite-key="k" data-locator-label="chapter" data-locator="2" href="#ref-k">1</a>, chap. 2] and [<a data-cite-key="k" data-locator-label="section" data-locator="5" href="#ref-k">1</a>, § 5].</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
A [@k, 4] cite.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>A [<a data-cite-key="k" data-locator-label="page" data-locator="4" href="#ref-k">1</a>, 4] cite.</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
A [@k, iv] cite.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>A [<a data-cite-key="k" data-suffix="iv" href="#ref-k">1</a>, iv] cite.</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
B [@k, pageant], [@k, vol.2], [@k, voli], [@k, §5], [@k, p. iv].

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>B [<a data-cite-key="k" data-suffix="pageant" href="#ref-k">1</a>, pageant], [<a data-cite-key="k" data-locator-label="volume" data-locator="2" href="#ref-k">1</a>, vol.2], [<a data-cite-key="k" data-suffix="voli" href="#ref-k">1</a>, voli], [<a data-cite-key="k" data-locator-label="section" data-locator="5" href="#ref-k">1</a>, §5], [<a data-cite-key="k" data-locator-label="page" data-locator="iv" href="#ref-k">1</a>, p. iv].</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
C [@k, p. 4, see also] x.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>C [<a data-cite-key="k" data-locator-label="page" data-locator="4" data-suffix="see also" href="#ref-k">1</a>, p. 4, see also] x.</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
D [@k, p.] and [@k, chap. *two*].

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>D [<a data-cite-key="k" data-locator-label="page" href="#ref-k">1</a>, p.] and [<a data-cite-key="k" data-locator-label="chapter" data-suffix="two" href="#ref-k">1</a>, chap. <strong>two</strong>].</p>
<ol class="references">
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
[+@smith2020] says so.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p><span class="citation" data-cite-mode="integral">[<a data-cite-key="smith2020" href="#ref-smith2020">1</a>]</span> says so.</p>
<ol class="references">
  <li id="ref-smith2020">Smith, J. (2020). <strong>A Study</strong>. Pub.</li>
</ol>
carve
[+@a; @b] then [@a; +@b] then [+-@k].

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p><span class="citation" data-cite-mode="integral">[<a data-cite-key="a" href="#ref-a">1</a>, <a data-cite-key="b" href="#ref-b">2</a>]</span> then [<a data-cite-key="a" href="#ref-a">1</a>, + <a data-cite-key="b" data-cite-prefix="+" href="#ref-b">2</a>] then <span class="citation" data-cite-mode="integral">[<a data-cite-key="k" data-suppress-author="true" href="#ref-k">3</a>]</span>.</p>
<ol class="references">
  <li id="ref-a">Aye, A. (2021). <strong>Notes</strong>. Pub.</li>
  <li id="ref-b">Bee, B. (2019). <strong>More</strong>. Pub.</li>
  <li id="ref-k">K. (2020). <strong>Work</strong>. Pub.</li>
</ol>
carve
[@a; -@b] mixed.

[@k]: {author="K" year="2020"} K. (2020). *Work*. Pub.
[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@a]: {author="Aye" year="2021"} Aye, A. (2021). *Notes*. Pub.
[@b]: {author="Bee" year="2019"} Bee, B. (2019). *More*. Pub.
html
<p>[<a data-cite-key="a" href="#ref-a">1</a>, <a data-cite-key="b" data-suppress-author="true" href="#ref-b">2</a>] mixed.</p>
<ol class="references">
  <li id="ref-a">Aye, A. (2021). <strong>Notes</strong>. Pub.</li>
  <li id="ref-b">Bee, B. (2019). <strong>More</strong>. Pub.</li>
</ol>
carve
See [@smith2020,].

[@smith2020]: Smith, J. (2020).
html
<p>See [<a data-cite-key="smith2020" href="#ref-smith2020">1</a>].</p>
<ol class="references">
  <li id="ref-smith2020">Smith, J. (2020).</li>
</ol>
carve
[t][@a] and ![t][@a] and [@a] alone.

[@a]: {author="A" year="2020"} A. (2020). Work.
html
<p>[t][@a] and ![t][@a] and [<a data-cite-key="a" href="#ref-a">1</a>] alone.</p>
<ol class="references">
  <li id="ref-a">A. (2020). Work.</li>
</ol>
carve
See [@x].

> ::: references
> :::

[@x]: Source
html
<p>See [<a data-cite-key="x" href="#ref-x">1</a>].</p>
<blockquote>
  <div class="references">

  </div>
</blockquote>
<ol class="references">
  <li id="ref-x">Source</li>
</ol>
carve
[@a] and [@b].

[@a]:  Alpha.
[@b]:   Beta.
html
<p>[<a data-cite-key="a" href="#ref-a">1</a>] and [<a data-cite-key="b" href="#ref-b">2</a>].</p>
<ol class="references">
  <li id="ref-a">Alpha.</li>
  <li id="ref-b">Beta.</li>
</ol>

Citations, author-date ​

Bracketed [@key] citations with author-date output and a sorted references list.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
Smith [@smith2020] and others [see @jones2019, p. 4; -@doe2021] agree.

[@smith2020]: {author="Smith" year="2020"} Smith, J. (2020). *A Study*. Pub.
[@jones2019]: {author="Jones" year="2019"} Jones, A. (2019). *Notes*. Pub.
[@doe2021]: {author="Doe" year="2021"} Doe, R. (2021). *Work*. Pub.
html
<p>Smith (<a data-cite-key="smith2020" href="#ref-smith2020">Smith 2020</a>) and others (see <a data-cite-key="jones2019" data-cite-prefix="see" data-locator-label="page" data-locator="4" href="#ref-jones2019">Jones 2019</a>, p. 4; <a data-cite-key="doe2021" data-suppress-author="true" href="#ref-doe2021">2021</a>) agree.</p>
<ul class="references">
  <li id="ref-doe2021">Doe, R. (2021). <strong>Work</strong>. Pub.</li>
  <li id="ref-jones2019">Jones, A. (2019). <strong>Notes</strong>. Pub.</li>
  <li id="ref-smith2020">Smith, J. (2020). <strong>A Study</strong>. Pub.</li>
</ul>

CodeCallouts ​

In-code <n> markers render as <b class="callout"> bubbles and the following <n> list binds as <ol class="callouts"> with explicit values.

3 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
```js
const x = compute();   <1>
return x * 2;          <2>
```

<1> Runs the expensive step once.
<2> Doubles the result.
html
<pre><code class="language-js">const x = compute();   <b class="callout" data-callout="1">1</b>
return x * 2;          <b class="callout" data-callout="2">2</b>
</code></pre>
<ol class="callouts">
  <li value="1">Runs the expensive step once.</li>
  <li value="2">Doubles the result.</li>
</ol>
carve
```
plain();
```

<1> orphan.
html
<pre><code>plain();
</code></pre>
<p>&lt;1&gt; orphan.</p>
carve
```
foo()  <1>
```

not a callout line.
html
<pre><code>foo()  <b class="callout" data-callout="1">1</b>
</code></pre>
<p>not a callout line.</p>

TOC placement ​

A footnotes marker inside a TOC body stays nested and leaves endnotes at the document end.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
A^[note].

:::: toc
::: footnotes
:::

Later.


```html
<p>A<a id="fnref1" href="#fn1" role="doc-noteref"><sup>1</sup></a>.</p>
<div class="footnotes">

</div>
<nav class="toc" aria-label="Table of contents"></nav>
<p>Later.</p>
<section role="doc-endnotes" aria-label="Footnotes">
  <hr>
  <ol>
    <li id="fn1">
      <p>note<a href="#fnref1" role="doc-backlink" aria-label="Back to reference">↩</a></p>
    </li>
  </ol>
</section>

::::

Details ​

The details summary renders the quoted title's inline markup (phrasing content).

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
::: details "a *b* `c`"
Hidden.
:::
html
<details>
  <summary>a <strong>b</strong> <code>c</code></summary>
  <p>Hidden.</p>
</details>

ListTable ​

The list-table caption renders the quoted title's inline markup (phrasing content).

2 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
::: list-table "Q *totals*"
- - A
  - B
:::
html
<table>
  <caption>Q <strong>totals</strong></caption>
  <tbody>
    <tr><td>A</td><td>B</td></tr>
  </tbody>
</table>
carve
{header-rows=1}
{header-cols=1}
::: list-table
- - Region
  - Q1
- - EMEA
  - 10
:::
html
<table>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Q1</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">EMEA</th><td>10</td></tr>
  </tbody>
</table>

ListTable shares positional column attributes and adds per-cell align/valign overrides; widths and the head/body/foot partition survive together.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
{header-rows=1 footer-rows=1 aligns="left,right" valigns="top,bottom" widths="30,70"}
::: list-table
- - Region
  - Total
- -{align=center valign=middle} North
  - 11
- - All
  - 33
:::
html
<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <thead>
    <tr><th scope="col" style="text-align: left; vertical-align: top;">Region</th><th scope="col" style="text-align: right; vertical-align: bottom;">Total</th></tr>
  </thead>
  <tbody>
    <tr><td style="text-align: center; vertical-align: middle;">North</td><td style="text-align: right; vertical-align: bottom;">11</td></tr>
  </tbody>
  <tfoot>
    <tr><td style="text-align: left; vertical-align: top;">All</td><td style="text-align: right; vertical-align: bottom;">33</td></tr>
  </tfoot>
</table>

ListTable local headers and body groups ​

A header-row attribute on a row's first cell starts a body group with an intermediate column-header row; a header attribute promotes only its own cell.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
::: list-table
- -{header-row} Name
  - Value
- - Alpha
  - 1
- -{header-row} Name again
  - Value again
- - Beta
  -{header} Total
:::
html
<table>
  <tbody>
    <tr><th scope="col">Name</th><th scope="col">Value</th></tr>
    <tr><td>Alpha</td><td>1</td></tr>
  </tbody>
  <tbody>
    <tr><th scope="col">Name again</th><th scope="col">Value again</th></tr>
    <tr><td>Beta</td><th scope="row">Total</th></tr>
  </tbody>
</table>

Spoiler ​

The spoiler summary renders the quoted title's inline markup (phrasing content).

3 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
::: spoiler "a *b*"
Hidden.
:::
html
<details class="spoiler">
  <summary>a <strong>b</strong></summary>
  <p>Hidden.</p>
</details>
carve
{#s data-x=1}
::: spoiler "Answer"
Hidden.
:::
html
<details id="s" data-x="1" class="spoiler">
  <summary>Answer</summary>
  <p>Hidden.</p>
</details>
carve
{#d k=v}
::: foo
a
:::

{#s k=v}
::: spoiler "Answer"
Hidden.
:::
html
<div class="foo" id="d" k="v">
  <p>a</p>
</div>
<details id="s" k="v" class="spoiler">
  <summary>Answer</summary>
  <p>Hidden.</p>
</details>

Tabs ​

A tab's quoted title is content: it stays inside the panel as the admonition-title line while the [label] becomes the tab button.

4 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
:::: tabs
::: tab "Inner *Title*" [First]
Content one.
:::

```html
<div class="tabs" role="group" aria-label="Tabs">
<input type="radio" name="tabset-1" id="tabset-1-tab-1" class="tabs-radio" checked>
<label for="tabset-1-tab-1" class="tabs-label">First</label>
<div class="tabs-panel" role="group" aria-label="First">
<p class="admonition-title">Inner <strong>Title</strong></p>
<p>Content one.</p>
</div>
</div>

::::

carve
:::: tabs
::: tab [First]
Content one.
:::
::: tab [R&D "core" <x>]
Content two.
:::

```html
<div class="tabs" role="group" aria-label="Tabs">
<input type="radio" name="tabset-1" id="tabset-1-tab-1" class="tabs-radio" checked>
<label for="tabset-1-tab-1" class="tabs-label">First</label>
<input type="radio" name="tabset-1" id="tabset-1-tab-2" class="tabs-radio">
<label for="tabset-1-tab-2" class="tabs-label">R&amp;D "core" &lt;x&gt;</label>
<div class="tabs-panel" role="group" aria-label="First">
<p>Content one.</p>
</div>
<div class="tabs-panel" role="group" aria-label="R&amp;D &quot;core&quot; &lt;x&gt;">
<p>Content two.</p>
</div>
</div>

::::

carve
:::: tabs
::: tab [First]
Content one.
:::

{selected}
::: tab [Second]
Content two.
:::

{selected}
::: tab [Third]
Content three.
:::

```html
<div class="tabs" role="group" aria-label="Tabs">
<input type="radio" name="tabset-1" id="tabset-1-tab-1" class="tabs-radio">
<label for="tabset-1-tab-1" class="tabs-label">First</label>
<input type="radio" name="tabset-1" id="tabset-1-tab-2" class="tabs-radio" checked>
<label for="tabset-1-tab-2" class="tabs-label">Second</label>
<input type="radio" name="tabset-1" id="tabset-1-tab-3" class="tabs-radio">
<label for="tabset-1-tab-3" class="tabs-label">Third</label>
<div class="tabs-panel" role="group" aria-label="First">
<p>Content one.</p>
</div>
<div class="tabs-panel" role="group" aria-label="Second">
<p>Content two.</p>
</div>
<div class="tabs-panel" role="group" aria-label="Third">
<p>Content three.</p>
</div>
</div>

::::

carve
:::: tabs
::: tab Install
Body one.
:::
::: tab Configure
# Actual heading

Body two.
:::
{label="Legacy"}
::: tab Ignored title
Body three.
:::

```html
<div class="tabs" role="group" aria-label="Tabs">
<input type="radio" name="tabset-1" id="tabset-1-tab-1" class="tabs-radio" checked>
<label for="tabset-1-tab-1" class="tabs-label">Tab 1</label>
<input type="radio" name="tabset-1" id="tabset-1-tab-2" class="tabs-radio">
<label for="tabset-1-tab-2" class="tabs-label">Actual heading</label>
<input type="radio" name="tabset-1" id="tabset-1-tab-3" class="tabs-radio">
<label for="tabset-1-tab-3" class="tabs-label">Legacy</label>
<div class="tabs-panel" role="group" aria-label="Tab 1">
<p>Body one.</p>
</div>
<div class="tabs-panel" role="group" aria-label="Actual heading">
<p>Body two.</p>
</div>
<div class="tabs-panel" role="group" aria-label="Legacy">
<p>Body three.</p>
</div>
</div>

::::

Tabs in aria mode ​

In aria mode a panel is bound rather than named: role="tabpanel" with aria-labelledby and hidden on every non-selected panel, and no role="group". The control is type="button", not the implicit submit.

2 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
:::: tabs
::: tab [First]
Content one.
:::
::: tab [R&D "core" <x>]
Content two.
:::

```html
<div class="tabs" role="tablist" aria-label="Tabs">
<button type="button" role="tab" id="tabset-1-tab-1" aria-selected="true" aria-controls="tabset-1-panel-1" class="tabs-label">First</button>
<button type="button" role="tab" id="tabset-1-tab-2" aria-selected="false" aria-controls="tabset-1-panel-2" class="tabs-label" tabindex="-1">R&amp;D "core" &lt;x&gt;</button>
<div role="tabpanel" id="tabset-1-panel-1" aria-labelledby="tabset-1-tab-1" class="tabs-panel">
<p>Content one.</p>
</div>
<div role="tabpanel" id="tabset-1-panel-2" aria-labelledby="tabset-1-tab-2" class="tabs-panel" hidden>
<p>Content two.</p>
</div>
</div>

::::

carve
:::: tabs
::: tab [First]
Content one.
:::

{selected}
::: tab [Second]
Content two.
:::

{selected}
::: tab [Third]
Content three.
:::

```html
<div class="tabs" role="tablist" aria-label="Tabs">
<button type="button" role="tab" id="tabset-1-tab-1" aria-selected="false" aria-controls="tabset-1-panel-1" class="tabs-label" tabindex="-1">First</button>
<button type="button" role="tab" id="tabset-1-tab-2" aria-selected="true" aria-controls="tabset-1-panel-2" class="tabs-label">Second</button>
<button type="button" role="tab" id="tabset-1-tab-3" aria-selected="false" aria-controls="tabset-1-panel-3" class="tabs-label" tabindex="-1">Third</button>
<div role="tabpanel" id="tabset-1-panel-1" aria-labelledby="tabset-1-tab-1" class="tabs-panel" hidden>
<p>Content one.</p>
</div>
<div role="tabpanel" id="tabset-1-panel-2" aria-labelledby="tabset-1-tab-2" class="tabs-panel">
<p>Content two.</p>
</div>
<div role="tabpanel" id="tabset-1-panel-3" aria-labelledby="tabset-1-tab-3" class="tabs-panel" hidden>
<p>Content three.</p>
</div>
</div>

::::

SemanticSpan ​

The four names core does not reserve - samp, var, cite, dfn - render as their elements when the SemanticSpan extension is enabled, under the same attribute spelling, nesting order and value mapping core uses for its three (PART 9 §10).

2 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
[x]{samp} [y]{var} [Dune]{cite} [CSS]{dfn="Cascading Style Sheets"}
html
<p><samp>x</samp> <var>y</var> <cite>Dune</cite> <dfn title="Cascading Style Sheets">CSS</dfn></p>
carve
:kbd[Ctrl] and :samp[out]
html
<p><kbd>Ctrl</kbd> and <samp>out</samp></p>

Core syntax with configured resolution ​

This syntax is Tier-1 core; these examples show resolution behavior supplied through processor configuration.

Mention and tag URL templates ​

Mention and tag rendering with configured URL templates.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
Hey @alice, see #release-1.0.
html
<p>Hey <a class="mention" href="/users/alice">@alice</a>, see <a class="tag" href="/topics/release-1.0">#release-1.0</a>.</p>

Host resolvers map @alice to /people/42 and #release to /collections/stable; unresolved @missing and #private plus a denied javascript: result for @unsafe keep their inert span rendering.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
Known @alice and #release; unknown @missing and #private; denied @unsafe.
html
<p>Known <a class="mention" href="/people/42">@alice</a> and <a class="tag" href="/collections/stable">#release</a>; unknown <span class="mention"><strong>@missing</strong></span> and <span class="tag"><strong>#private</strong></span>; denied <span class="mention"><strong>@unsafe</strong></span>.</p>

Symbol map ​

Symbol shortcode rendering against a supplied map (e.g. emoji glyphs), plus name-shape and word-boundary literal cases.

2 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
:rocket: :tada: :+1: and :UPPER: mapped; (:rocket:) too.

Literal: a:b:c, 10:30: meeting, :_x: stays text.

Attributes wrap: :rocket:{.big}
html
<p>🚀 🎉 👍 and ⬆️ mapped; (🚀) too.</p>
<p>Literal: a:b:c, 10:30: meeting, :_x: stays text.</p>
<p>Attributes wrap: <span class="big">🚀</span></p>
carve
# Release :tada:

Ship it :rocket: -- the pipeline is green.

A `:rocket:` inside a code span stays literal, and :unmapped: keeps its
source spelling because the map has no entry for it.
markdown
# Release :tada:

Ship it :rocket: – the pipeline is green.

A `:rocket:` inside a code span stays literal, and :unmapped: keeps its
source spelling because the map has no entry for it.

Smart quotes (de locale) ​

Locale-specific smart quotes using German quote characters.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
"Hello" and 'bye'
html
<p>„Hello“ and ‚bye‘</p>

Bare-URL autolinking ​

Bare URLs become links when autolinking is explicitly enabled.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
Visit https://example.com now.
html
<p>Visit <a href="https://example.com">https://example.com</a> now.</p>

Tier-3 extensions ​

Tier-3 is never corpus-pinned; these examples are verified by tests/examples-tier3.test.mjs instead. See also diagrams, SVG images, the extension tutorial, and the numbered Tier-3 sections in Extensions.

Generated from resources/examples/extensions.md - edit the cases there, not here. Each case links the conformance fixture it produces.

Diagrams and charts ​

Hand-written source: resources/examples-tier3.md.

MathBlock ​

carve
``` math
\int_0^1 x^2 \, dx
```
html
<div class="math display">\[\int_0^1 x^2 \, dx\]</div>

CodeGroup ​

carve
::: code-group
``` js [JavaScript]
console.log("hi")
```
``` py [Python]
print("hi")
```
:::
html
<div class="code-group" role="group" aria-label="Code examples">
<input type="radio" name="codegroup-1" id="codegroup-1-tab-1" class="code-group-radio" checked>
<label for="codegroup-1-tab-1" class="code-group-label">JavaScript</label>
<input type="radio" name="codegroup-1" id="codegroup-1-tab-2" class="code-group-radio">
<label for="codegroup-1-tab-2" class="code-group-label">Python</label>
<div class="code-group-panel" role="group" aria-label="JavaScript"><pre><code class="language-js">console.log("hi")
</code></pre>
</div>
<div class="code-group-panel" role="group" aria-label="Python"><pre><code class="language-py">print("hi")
</code></pre>
</div>
</div>
carve
See [[Tiger facts|tigers]].
html
<p>See <a href="tiger-facts" class="wikilink" data-wikilink="Tiger facts">tigers</a>.</p>
carve
# Stable heading
html
<section id="Stable-heading">
  <h1>Stable heading <a href="#Stable-heading" class="permalink" aria-label="Permalink"></a></h1>
</section>
carve
Read [the guide](https://example.com/guide).
html
<p>Read <a href="https://example.com/guide" target="_blank" rel="noopener noreferrer">the guide</a>.</p>

ColorSwatch ​

Not enabled on this site, so the output is shown rather than rendered.

carve
Brand color is :color[#3c8772] here.
html
<p>Brand color is <span class="swatch"><span class="swatch-chip" style="background-color:#3c8772"></span> #3c8772</span> here.</p>

HeadingNumbers ​

Not enabled on this site, so the output is shown rather than rendered.

carve
# Intro

### Setup

### Usage
html
<section id="Intro">
  <h1><span class="section-number">1</span> Intro</h1>
  <section id="Setup">
    <h2><span class="section-number">1.1</span> Setup</h2>
  </section>
  <section id="Usage">
    <h2><span class="section-number">1.2</span> Usage</h2>
  </section>
</section>

HeadingLevelShift ​

Not enabled on this site, so the output is shown rather than rendered.

carve
# Top

### Under
html
<section id="Top">
  <h2>Top</h2>
  <section id="Under">
    <h3>Under</h3>
  </section>
</section>

TableOfContents ​

Not enabled on this site, so the output is shown rather than rendered.

carve
# Alpha

# Beta
html
<nav class="toc" aria-label="Table of contents">
<ul>
<li><a href="#Alpha">Alpha</a></li>
<li><a href="#Beta">Beta</a></li>
</ul>
</nav>
<section id="Alpha">
  <h1>Alpha</h1>
</section>
<section id="Beta">
  <h1>Beta</h1>
</section>

Glossary ​

Not enabled on this site, so the output is shown rather than rendered.

carve
::: glossary
:: API
: Application Programming Interface.

Use the :term[API]; :term[api] differs in case and links nothing.


```html
<dl class="glossary">
  <dt id="gloss-API">API</dt>
  <dd>Application Programming Interface.</dd>
</dl>
<p>Use the <a href="#gloss-API" class="term">API</a>; <span class="term">api</span> differs in case and links nothing.</p>

:::

Index ​

Not enabled on this site, so the output is shown rather than rendered.

carve
Carve:index[markup] is small.

::: index

```html
<p>Carve<span id="idx-markup-1" class="index-term"></span> is small.</p>
<ul class="index">
  <li>markup <a href="#idx-markup-1" class="index-backref" aria-label="Back to markup">↩</a></li>
</ul>

:::

TocPlacement ​

The nested footnotes marker renders its div before the navigation. Its notes stay at the default document end (CARVE-P9-076).

carve
::::: toc "Outer"
::: footnotes
:::
:::::

# H

Text[^a] more.

[^a]: The note.
html
<div class="footnotes">

</div>
<nav class="toc" aria-labelledby="adm-1">
<p class="admonition-title" id="adm-1">Outer</p>
<ul>
<li><a href="#H">H</a></li>
</ul>
</nav>
<section id="H">
  <h1>H</h1>
  <p>Text<a id="fnref1" href="#fn1" role="doc-noteref"><sup>1</sup></a> more.</p>
</section>
<section role="doc-endnotes" aria-label="Footnotes">
  <hr>
  <ol>
    <li id="fn1">
      <p>The note.<a href="#fnref1" role="doc-backlink" aria-label="Back to reference">↩</a></p>
    </li>
  </ol>
</section>

IndexFallback ​

With no index terms, the extension abstains. Core rendering puts the kind class before both authored attributes (CARVE-P10-011).

carve
{#empty k=v}
::: index
:::
html
<div class="index" id="empty" k="v">

</div>

IndexAttributes ​

The extension owns the populated index and appends its wrapper class after both authored attributes (CARVE-P10-011).

carve
Carve:index[markup] is small.

{#terms k=v}
::: index
:::
html
<p>Carve<span id="idx-markup-1" class="index-term"></span> is small.</p>
<ul id="terms" k="v" class="index">
  <li>markup <a href="#idx-markup-1" class="index-backref" aria-label="Back to markup">↩</a></li>
</ul>

Diagram and math hydration wrappers ​

Enable these Tier-3 presets to emit wrappers for client libraries. The fixtures pin classes, accessible names and source payloads; the host library draws the graphics.

Mermaid hydration wrapper ​

Mermaid text hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` mermaid
graph LR; A -->|a<b & c| B
```
html
<pre class="mermaid" role="img" aria-label="mermaid">graph LR; A -->|a&lt;b &amp; c| B</pre>

D2 hydration wrapper ​

D2 text hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` d2
a -> b
```
html
<pre class="d2" role="img" aria-label="d2">a -> b</pre>

Graphviz hydration wrapper ​

Graphviz text hydration wrapper.

2 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` graphviz
digraph { A -> B }
```
html
<pre class="graphviz" role="img" aria-label="graphviz">digraph { A -> B }</pre>
carve
``` dot
digraph { A -> B }
```
html
<pre class="graphviz" role="img" aria-label="graphviz">digraph { A -> B }</pre>

WaveDrom hydration wrapper ​

WaveDrom text hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` wavedrom
{"signal":[{"name":"clk","wave":"p..."}]}
```
html
<pre class="wavedrom" role="img" aria-label="wavedrom">{"signal":[{"name":"clk","wave":"p..."}]}</pre>

ABC music notation hydration wrapper ​

ABC music notation hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` abc
X:1
T:Scale
M:4/4
L:1/4
K:C
C D E F |
```
html
<pre class="abc" role="img" aria-label="abc">X:1
T:Scale
M:4/4
L:1/4
K:C
C D E F |</pre>

PlantUML hydration wrapper ​

PlantUML text hydration wrapper.

2 conformance fixtures in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` plantuml
@startuml
Alice -> Bob: hello
@enduml
```
html
<pre class="plantuml" role="img" aria-label="plantuml">@startuml
Alice -> Bob: hello
@enduml</pre>
carve
``` puml
@startuml
Alice -> Bob: hello
@enduml
```
html
<pre class="plantuml" role="img" aria-label="plantuml">@startuml
Alice -> Bob: hello
@enduml</pre>

Vega-Lite hydration wrapper ​

Vega-Lite JSON hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` vega-lite
{"mark":"bar","data":{"values":[{"x":"A","y":1}]},"encoding":{"x":{"field":"x","type":"nominal"},"y":{"field":"y","type":"quantitative"}}}
```
html
<div class="vega-lite" role="img" aria-label="vega-lite"><script type="application/json">{"mark":"bar","data":{"values":[{"x":"A","y":1}]},"encoding":{"x":{"field":"x","type":"nominal"},"y":{"field":"y","type":"quantitative"}}}</script></div>

Chart.js hydration wrapper ​

Chart.js JSON hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` chart
{"type":"bar","data":{"labels":["</x>"],"datasets":[{"data":[1]}]}}
```
html
<div class="chart" role="img" aria-label="chart"><script type="application/json">{"type":"bar","data":{"labels":["<\/x>"],"datasets":[{"data":[1]}]}}</script></div>

Display math hydration wrapper ​

Display math hydration wrapper.

1 conformance fixture in tests/corpus-optional

Pinned when this feature is enabled - not part of the mandatory corpus.

carve
``` math
a < b > c \& d
```
html
<div class="math display">\[a &lt; b &gt; c \&amp; d\]</div>

Released under the MIT License.

Carve - a lightweight markup language for documents and the web.