1Prelum specimenRelease 0.14.0

Prelum specimen

Every element Prelum renders from markdown, each source beside its output, in the configuration dustinedwards.info uses: the core, the editorial pack and code highlighting. The page follows your system's light or dark setting. The list is also at elements.json, generated from the same sources.

Release
0.14.0
Render version
4
Elements
35
Editorial pack
8

1Paragraph

Emphasis, strong text, strikethrough and inline code in running prose. core

Markdown

A sentence with *emphasis*, **strong text**, ~~a struck word~~ and `inline code`. Prose such as 12:30 and 4.5:1 stays prose.

Output

A sentence with emphasis, strong text, a struck word and inline code. Prose such as 12:30 and 4.5:1 stays prose.

The HTML
<p>A sentence with <em>emphasis</em>, <strong>strong text</strong>, <del>a struck word</del> and <code>inline code</code>. Prose such as 12:30 and 4.5:1 stays prose.</p>

2Headings

Second and third level headings, each with an id and an anchor link. core

Markdown

## A section heading

### A subsection heading

Each heading gets an id from its text and an anchor to link to it.

Output

A section heading#

A subsection heading#

Each heading gets an id from its text and an anchor to link to it.

The HTML
<h2 id="a-section-heading">A section heading<a class="heading-anchor" aria-label="Link to section: A section heading" href="#a-section-heading">#</a></h2>
<h3 id="a-subsection-heading">A subsection heading<a class="heading-anchor" aria-label="Link to section: A subsection heading" href="#a-subsection-heading">#</a></h3>
<p>Each heading gets an id from its text and an anchor to link to it.</p>

3Lists

Ordered, unordered and nested lists. core

Markdown

1. Collect the samples
2. Extract the RNA
   - keep it on ice
   - work quickly
3. Sequence it

Output

  1. Collect the samples
  2. Extract the RNA
    • keep it on ice
    • work quickly
  3. Sequence it
The HTML
<ol>
<li>Collect the samples</li>
<li>Extract the RNA
<ul>
<li>keep it on ice</li>
<li>work quickly</li>
</ul>
</li>
<li>Sequence it</li>
</ol>

4Task list

A checklist with done and open items. core

Markdown

- [x] Draft written
- [ ] Figures checked

Output

The HTML
<ul class="contains-task-list">
<li class="task-list-item"><label><input type="checkbox" checked disabled> Draft written</label></li>
<li class="task-list-item"><label><input type="checkbox" disabled> Figures checked</label></li>
</ul>

5Block quote

A quotation, with one nested inside it. core

Markdown

> A quotation set apart from the prose.
>
> > And a reply nested inside it.

Output

A quotation set apart from the prose.

And a reply nested inside it.

The HTML
<blockquote>
<p>A quotation set apart from the prose.</p>
<blockquote>
<p>And a reply nested inside it.</p>
</blockquote>
</blockquote>

6Table

A table with left and right aligned columns, wrapped so a wide one scrolls. core

Markdown

| Sample | Reads |
| :----- | ----: |
| A1     | 1,204 |
| B2     | 987   |

Output

Sample Reads
A1 1,204
B2 987
The HTML
<div class="table-scroll" tabindex="0"><table>
<thead>
<tr>
<th align="left">Sample</th>
<th align="right">Reads</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">A1</td>
<td align="right">1,204</td>
</tr>
<tr>
<td align="left">B2</td>
<td align="right">987</td>
</tr>
</tbody>
</table></div>

8Image

An image with alt text and a title, sized from its file. core

Markdown

![A purple square with a lighter circle in it](/images/sample-640x360.svg "Shown on hover")

Output

A purple square with a lighter circle in it

The HTML
<p><a class="image-link" href="/images/sample-640x360.svg"><img src="/images/sample-640x360.svg" alt="A purple square with a lighter circle in it" title="Shown on hover" width="640" height="360" loading="eager" decoding="async" fetchpriority="high"></a></p>
In the RSS item
<p><a class="image-link" href="https://prelum.dustinedwards.info/images/sample-640x360.svg"><img src="https://prelum.dustinedwards.info/images/sample-640x360.svg" alt="A purple square with a lighter circle in it" title="Shown on hover" width="640" height="360" loading="eager" decoding="async" fetchpriority="high"></a></p>

9Figure

An image with a caption and a credit. core directives: :figure

Markdown

:::figure{src="/images/sample-640x360.svg" alt="A purple square with a lighter circle in it" credit="Image: Prelum specimen"}
A caption with *emphasis*.
:::

Output

A purple square with a lighter circle in it

A caption with emphasis.

Image: Prelum specimen
The HTML
<figure><a class="image-link" href="/images/sample-640x360.svg"><img src="/images/sample-640x360.svg" alt="A purple square with a lighter circle in it" width="640" height="360" loading="eager" decoding="async" fetchpriority="high"></a><figcaption><p>A caption with <em>emphasis</em>.</p><span class="figure-credit">Image: Prelum specimen</span></figcaption></figure>
In the RSS item
<figure><a class="image-link" href="https://prelum.dustinedwards.info/images/sample-640x360.svg"><img src="https://prelum.dustinedwards.info/images/sample-640x360.svg" alt="A purple square with a lighter circle in it" width="640" height="360" loading="eager" decoding="async" fetchpriority="high"></a><figcaption><p>A caption with <em>emphasis</em>.</p><span class="figure-credit">Image: Prelum specimen</span></figcaption></figure>

10Figure with a dark twin

A drawing with a second file for the dark theme, since an image cannot read the page's theme. core directives: :figure

Markdown

:::figure{src="/images/sample-light-640x360.svg" dark="/images/sample-dark-640x360.svg" alt="A circle on a square, drawn once for each theme"}
The page shows the drawing that matches its theme.
:::

Output

A circle on a square, drawn once for each themeA circle on a square, drawn once for each theme

The page shows the drawing that matches its theme.

The HTML
<figure><img src="/images/sample-light-640x360.svg" alt="A circle on a square, drawn once for each theme" class="figure-light" width="640" height="360" loading="lazy" decoding="async"><img src="/images/sample-dark-640x360.svg" alt="A circle on a square, drawn once for each theme" class="figure-dark" width="640" height="360" loading="lazy" decoding="async"><figcaption><p>The page shows the drawing that matches its theme.</p></figcaption></figure>
In the RSS item
<figure><img src="https://prelum.dustinedwards.info/images/sample-light-640x360.svg" alt="A circle on a square, drawn once for each theme" class="figure-light" width="640" height="360" loading="lazy" decoding="async"><img src="https://prelum.dustinedwards.info/images/sample-dark-640x360.svg" alt="A circle on a square, drawn once for each theme" class="figure-dark" width="640" height="360" loading="lazy" decoding="async"><figcaption><p>The page shows the drawing that matches its theme.</p></figcaption></figure>

11Footnote

A footnote reference and its note. core

Markdown

A claim that needs a source.[^source]

[^source]: The source, with a [link](https://example.com/source).

Output

A claim that needs a source.1

Footnotes#

  1. The source, with a link. ↩

The HTML
<p>A claim that needs a source.<sup><a href="#user-content-fn-source" id="user-content-fnref-source" data-footnote-ref aria-describedby="footnote-label">1</a></sup></p>
<section data-footnotes class="footnotes"><h2 class="sr-only" id="footnote-label">Footnotes<a class="heading-anchor" aria-label="Link to section: Footnotes" href="#footnote-label">#</a></h2>
<ol>
<li id="user-content-fn-source">
<p>The source, with a <a href="https://example.com/source">link</a>. <a href="#user-content-fnref-source" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section>

12Rule

A thematic break between two paragraphs. core

Markdown

The end of one part.

---

The start of the next.

Output

The end of one part.

The start of the next.

The HTML
<p>The end of one part.</p>
<hr>
<p>The start of the next.</p>

13Collapsible section

A section that opens without script, for methods and long asides. core directives: :details

Markdown

:::details{summary="Methods in full"}
The longer text, with a [link](https://example.com/methods). It is in the HTML whether or not the section is open.
:::

Output

Methods in full

The longer text, with a link. It is in the HTML whether or not the section is open.

The HTML
<details class="post-details"><summary>Methods in full</summary><p>The longer text, with a <a href="https://example.com/methods">link</a>. It is in the HTML whether or not the section is open.</p></details>

14Inline math

TeX inside a sentence, drawn by KaTeX. core

Markdown

The area is $\pi r^2$ and the ratio is $\frac{a}{b}$.

Output

The area is πr2\pi r^2 and the ratio is ab\frac{a}{b}.

The HTML
<p>The area is <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>π</mi><msup><mi>r</mi><mn>2</mn></msup></mrow><annotation encoding="application/x-tex">\pi r^2</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8141em;"></span><span class="mord mathnormal" style="margin-right:0.0359em;">π</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.0278em;">r</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8141em;"><span style="top:-3.063em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span></span> and the ratio is <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mfrac><mi>a</mi><mi>b</mi></mfrac></mrow><annotation encoding="application/x-tex">\frac{a}{b}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.0404em;vertical-align:-0.345em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.6954em;"><span style="top:-2.655em;"><span class="pstrut" style="height:3em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">b</span></span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.394em;"><span class="pstrut" style="height:3em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">a</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.345em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span>.</p>
In the RSS item
<p>The area is $\pi r^2$ and the ratio is $\frac{a}{b}$.</p>

15Display math

A TeX equation on its own line. core

Markdown

$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

Output

∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
The HTML
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>1</mn></mrow><mi>n</mi></munderover><mi>i</mi><mo>=</mo><mfrac><mrow><mi>n</mi><mo stretchy="false">(</mo><mi>n</mi><mo>+</mo><mn>1</mn><mo stretchy="false">)</mo></mrow><mn>2</mn></mfrac></mrow><annotation encoding="application/x-tex">\sum_{i=1}^{n} i = \frac{n(n+1)}{2}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:2.9291em;vertical-align:-1.2777em;"></span><span class="mop op-limits"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.6514em;"><span style="top:-1.8723em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">i</span><span class="mrel mtight">=</span><span class="mord mtight">1</span></span></span></span><span style="top:-3.05em;"><span class="pstrut" style="height:3.05em;"></span><span><span class="mop op-symbol large-op">∑</span></span></span><span style="top:-4.3em;margin-left:0em;"><span class="pstrut" style="height:3.05em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathnormal mtight">n</span></span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:1.2777em;"><span></span></span></span></span></span><span class="mspace" style="margin-right:0.1667em;"></span><span class="mord mathnormal">i</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.113em;vertical-align:-0.686em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.427em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal">n</span><span class="mopen">(</span><span class="mord mathnormal">n</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mord">1</span><span class="mclose">)</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span>
In the RSS item
$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

16Code: plain

A code block with no language, left unhighlighted. core

Markdown

```
plain text, kept as written
```

Output

plain text, kept as written
The HTML
<pre><code>plain text, kept as written
</code></pre>

17Code: highlighted lines

A code block with one line marked. core

Markdown

```bash {2}
echo one
echo two
echo three
```

Output

echo one
echo two
echo three
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="bash"><code><span class="line"><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">echo</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF"> one</span></span>
<span class="line highlighted"><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">echo</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF"> two</span></span>
<span class="line"><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">echo</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF"> three</span></span></code></pre>

18Code: Bash

A shell script, highlighted. core

Markdown

```bash
for f in *.fastq; do
  gzip "$f"
done
```

Output

for f in *.fastq; do
  gzip "$f"
done
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="bash"><code><span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">for</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> f </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">in</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF"> *.fastq</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">; </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">do</span></span>
<span class="line"><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">  gzip</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF"> "</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">$f</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF">"</span></span>
<span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">done</span></span></code></pre>

19Code: CSS

A stylesheet rule, highlighted. core

Markdown

```css
.note {
  color: var(--muted);
}
```

Output

.note {
  color: var(--muted);
}
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="css"><code><span class="line"><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">.note</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> {</span></span>
<span class="line"><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">  color</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">: </span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">var</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">(</span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">--muted</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">);</span></span>
<span class="line"><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">}</span></span></code></pre>

20Code: HTML

An HTML fragment, highlighted. core

Markdown

```html
<p class="note">Hello, <em>world</em>.</p>
```

Output

<p class="note">Hello, <em>world</em>.</p>
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="html"><code><span class="line"><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">&#x3C;</span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">p</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> class</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">=</span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF">"note"</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">>Hello, &#x3C;</span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">em</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">>world&#x3C;/</span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">em</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">>.&#x3C;/</span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">p</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">></span></span></code></pre>

21Code: JavaScript

JavaScript, highlighted. core

Markdown

```javascript
const total = [1, 2, 3].reduce((a, b) => a + b, 0); // 6
```

Output

const total = [1, 2, 3].reduce((a, b) => a + b, 0); // 6
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="javascript"><code><span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">const</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> total</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492"> =</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> [</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">1</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">, </span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">2</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">, </span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">3</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">].</span><span style="--shiki-light:#622CBC;--shiki-dark:#DBB7FF">reduce</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">((</span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">a</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">, </span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">b</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">) </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">=></span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> a </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">+</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> b, </span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">0</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">); </span><span style="--shiki-light:#5C5248;--shiki-dark:#B3A99C">// 6</span></span></code></pre>

22Code: JSON

JSON, highlighted. core

Markdown

```json
{ "sample": "A1", "reads": 1204 }
```

Output

{ "sample": "A1", "reads": 1204 }
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="json"><code><span class="line"><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">{ </span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">"sample"</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">: </span><span style="--shiki-light:#032563;--shiki-dark:#ADDCFF">"A1"</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">, </span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">"reads"</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">: </span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">1204</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> }</span></span></code></pre>

23Code: Markdown

Markdown source shown as code, highlighted. core

Markdown

```markdown
## A heading

Some *emphasis*.
```

Output

## A heading

Some *emphasis*.
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="markdown"><code><span class="line"><span style="--shiki-light:#023B95;--shiki-light-font-weight:bold;--shiki-dark:#91CBFF;--shiki-dark-font-weight:bold">## A heading</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">Some </span><span style="--shiki-light:#0E1116;--shiki-light-font-style:italic;--shiki-dark:#F0F3F6;--shiki-dark-font-style:italic">*emphasis*</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">.</span></span></code></pre>

24Code: Python

Python, highlighted. core

Markdown

```python
def double(x):
    return x * 2
```

Output

def double(x):
    return x * 2
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="python"><code><span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">def</span><span style="--shiki-light:#622CBC;--shiki-dark:#DBB7FF"> double</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">(x):</span></span>
<span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">    return</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> x </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">*</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> 2</span></span></code></pre>

25Code: SQL

SQL, highlighted. core

Markdown

```sql
SELECT sample, reads FROM runs WHERE reads > 1000;
```

Output

SELECT sample, reads FROM runs WHERE reads > 1000;
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="sql"><code><span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">SELECT</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492"> sample</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">, reads </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">FROM</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> runs </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">WHERE</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> reads </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">></span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> 1000</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">;</span></span></code></pre>

26Code: TSX

TSX, highlighted. core

Markdown

```tsx
export const Hello = ({ name }: { name: string }) => <p>Hello, {name}</p>;
```

Output

export const Hello = ({ name }: { name: string }) => <p>Hello, {name}</p>;
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="tsx"><code><span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">export</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492"> const</span><span style="--shiki-light:#622CBC;--shiki-dark:#DBB7FF"> Hello</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492"> =</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> ({ </span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">name</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> }</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">:</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> { </span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">name</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">:</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> string</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> }) </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">=></span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> &#x3C;</span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">p</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">>Hello, </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">{</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">name</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">}</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">&#x3C;/</span><span style="--shiki-light:#024C1A;--shiki-dark:#72F088">p</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">>;</span></span></code></pre>

27Code: TypeScript

TypeScript, highlighted. core

Markdown

```typescript
const sum = (xs: number[]): number => xs.reduce((a, b) => a + b, 0);
```

Output

const sum = (xs: number[]): number => xs.reduce((a, b) => a + b, 0);
The HTML
<pre class="shiki shiki-themes github-light-high-contrast github-dark-high-contrast" style="--shiki-light:#0e1116;--shiki-dark:#f0f3f6;--shiki-light-bg:#ffffff;--shiki-dark-bg:#0a0c10" tabindex="0" data-lang="typescript"><code><span class="line"><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">const</span><span style="--shiki-light:#622CBC;--shiki-dark:#DBB7FF"> sum</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492"> =</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> (</span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">xs</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">:</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> number</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">[])</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">:</span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF"> number</span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492"> =></span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> xs.</span><span style="--shiki-light:#622CBC;--shiki-dark:#DBB7FF">reduce</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">((</span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">a</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">, </span><span style="--shiki-light:#702C00;--shiki-dark:#FFB757">b</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">) </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">=></span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> a </span><span style="--shiki-light:#A0111F;--shiki-dark:#FF9492">+</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6"> b, </span><span style="--shiki-light:#023B95;--shiki-dark:#91CBFF">0</span><span style="--shiki-light:#0E1116;--shiki-dark:#F0F3F6">);</span></span></code></pre>

28Sidenote

A note beside its paragraph, with an optional kind. editorial pack directives: :sidenote

Markdown

:::sidenote{kind="Aside"}
A note that sits in the margin on a wide screen.
:::

Output

The HTML
<aside class="post-note" id="sn-1"><b class="post-note-kind">Aside</b><p>A note that sits in the margin on a wide screen.</p></aside>

29Pull quote

A sentence in the prose, raised and repeated for emphasis. editorial pack directives: :pullquote

Markdown

The result held in every sample, and :pullquote[the effect was larger than expected] by a wide margin.

Output

The result held in every sample, and the effect was larger than expected by a wide margin.

The HTML
<p class="pull-quote" aria-hidden="true">the effect was larger than expected</p>
<p>The result held in every sample, and the effect was larger than expected by a wide margin.</p>

30Color swatch

A color chip beside its hex value or a label. editorial pack directives: :swatch

Markdown

The accent is :swatch[#8C5FD2] and the page is :swatch[the ground color]{color=#FBF9FF}.

Output

The accent is #8C5FD2 and the page is the ground color.

The HTML
<p>The accent is <span class="swatch"><span class="swatch-chip" style="--swatch:#8C5FD2" aria-hidden="true"></span><code class="swatch-label">#8C5FD2</code></span> and the page is <span class="swatch"><span class="swatch-chip" style="--swatch:#FBF9FF" aria-hidden="true"></span><code class="swatch-label">the ground color</code></span>.</p>

31Bar chart

A bar chart from CSV, drawn by Enarratio, with its data table. editorial pack directives: :chart

Markdown

:::chart{type="bar" x="sample" y="reads" alt="Reads per sample: A1 1,204, B2 987, C3 1,530" title="Reads per sample"}
```csv
sample,reads
A1,1204
B2,987
C3,1530
```
:::

Output

Reads per sample

sample A1: 1,204sample B2: 987sample C3: 1,530
Data table
Data for: Reads per sample
samplereads
A11,204
B2987
C31,530
The HTML
<figure class="chart-figure enarratio" data-enarratio="bar" data-enarratio-orientation="vertical"><p class="enarratio-title">Reads per sample</p><div class="enarratio-frame enarratio-frame-wide" tabindex="0" role="group" aria-label="Reads per sample, scrolls sideways"><svg aria-label="Reads per sample: A1 1,204, B2 987, C3 1,530" role="img" viewBox="0 0 700 360" height="360" width="700" text-anchor="middle" fill="currentColor"><g data-enarratio-mark="y-grid" stroke-opacity="0.1" stroke="currentColor" aria-hidden="true"><line y2="316" y1="316" x2="680" x1="60"></line><line y2="279" y1="279" x2="680" x1="60"></line><line y2="242" y1="242" x2="680" x1="60"></line><line y2="205" y1="205" x2="680" x1="60"></line><line y2="168" y1="168" x2="680" x1="60"></line><line y2="131" y1="131" x2="680" x1="60"></line><line y2="94" y1="94" x2="680" x1="60"></line><line y2="57" y1="57" x2="680" x1="60"></line><line y2="20" y1="20" x2="680" x1="60"></line></g><g data-enarratio-mark="y-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L-6,0" transform="translate(60,316)"></path><path d="M0,0L-6,0" transform="translate(60,279)"></path><path d="M0,0L-6,0" transform="translate(60,242)"></path><path d="M0,0L-6,0" transform="translate(60,205)"></path><path d="M0,0L-6,0" transform="translate(60,168)"></path><path d="M0,0L-6,0" transform="translate(60,131)"></path><path d="M0,0L-6,0" transform="translate(60,94)"></path><path d="M0,0L-6,0" transform="translate(60,57)"></path><path d="M0,0L-6,0" transform="translate(60,20)"></path></g><g aria-hidden="true" data-enarratio-mark="y-axis tick label" transform="translate(-9,0)" font-variant="tabular-nums" text-anchor="end"><text transform="translate(60,316)" y="0.32em">0</text><text transform="translate(60,279)" y="0.32em">200</text><text transform="translate(60,242)" y="0.32em">400</text><text transform="translate(60,205)" y="0.32em">600</text><text transform="translate(60,168)" y="0.32em">800</text><text transform="translate(60,131)" y="0.32em">1,000</text><text transform="translate(60,94)" y="0.32em">1,200</text><text transform="translate(60,57)" y="0.32em">1,400</text><text transform="translate(60,20)" y="0.32em">1,600</text></g><g aria-hidden="true" data-enarratio-mark="y-axis label" transform="translate(-57,0)"><text transform="translate(60,168) rotate(-90)" y="0.71em">reads</text></g><g data-enarratio-mark="x-axis tick" transform="translate(77,0)" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L0,6" transform="translate(100,316)"></path><path d="M0,0L0,6" transform="translate(293,316)"></path><path d="M0,0L0,6" transform="translate(486,316)"></path></g><g aria-hidden="true" data-enarratio-mark="x-axis tick label" transform="translate(77,9)"><text transform="translate(100,316)" y="0.71em">A1</text><text transform="translate(293,316)" y="0.71em">B2</text><text transform="translate(486,316)" y="0.71em">C3</text></g><g aria-hidden="true" data-enarratio-mark="x-axis label" transform="translate(0,41)"><text transform="translate(370,316)">sample</text></g><g data-enarratio-mark="bar"><rect data-enarratio-row="0" data-enarratio-col="0" data-enarratio-x="A1" data-enarratio-value="A1" data-enarratio-field="x" data-enarratio-key="[&#x22;A1&#x22;,&#x22;reads&#x22;]" fill="var(--enarratio-series-1)" height="222.74" y="93.26" width="154" x="100"><title>sample A1: 1,204</title></rect><rect data-enarratio-row="0" data-enarratio-col="1" data-enarratio-x="B2" data-enarratio-value="B2" data-enarratio-field="x" data-enarratio-key="[&#x22;B2&#x22;,&#x22;reads&#x22;]" fill="var(--enarratio-series-1)" height="182.6" y="133.41" width="154" x="293"><title>sample B2: 987</title></rect><rect data-enarratio-row="0" data-enarratio-col="2" data-enarratio-x="C3" data-enarratio-value="C3" data-enarratio-field="x" data-enarratio-key="[&#x22;C3&#x22;,&#x22;reads&#x22;]" fill="var(--enarratio-series-1)" height="283.05" y="32.95" width="154" x="486"><title>sample C3: 1,530</title></rect></g><g data-enarratio-mark="rule" stroke="currentColor"><line y2="316" y1="316" x2="680" x1="60"></line></g></svg></div><details class="enarratio-data"><summary>Data table</summary><table><caption class="enarratio-visually-hidden">Data for: Reads per sample</caption><thead><tr><th scope="col">sample</th><th scope="col">reads</th></tr></thead><tbody><tr><th scope="row">A1</th><td>1,204</td></tr><tr><th scope="row">B2</th><td>987</td></tr><tr><th scope="row">C3</th><td>1,530</td></tr></tbody></table></details></figure>

32Line chart

A line chart with two labeled series. editorial pack directives: :chart

Markdown

:::chart{type="line" x="year" y="a,b" labels="Alpha,Beta" alt="Two lines rising from 2020 to 2023, Beta above Alpha" title="Two series"}
```csv
year,a,b
2020,1,2
2021,2,3
2022,3,5
2023,4,6
```
:::

Output

Two series

  • Alpha
  • Beta
Alpha, year 2020: 1Beta, year 2020: 2Alpha, year 2021: 2Beta, year 2021: 3Alpha, year 2022: 3Beta, year 2022: 5Alpha, year 2023: 4Beta, year 2023: 6AlphaBeta
Data table
Data for: Two series
yearAlphaBeta
202012
202123
202235
202346
The HTML
<figure class="chart-figure enarratio" data-enarratio="line" data-enarratio-x-scale="{&#x22;type&#x22;:&#x22;linear&#x22;,&#x22;domain&#x22;:[2020,2023],&#x22;range&#x22;:[48,604]}" data-enarratio-series-field="series"><p class="enarratio-title">Two series</p><ul class="enarratio-legend"><li data-enarratio-series="Alpha" data-slot="1"><span class="enarratio-swatch" aria-hidden="true"></span>Alpha</li><li data-enarratio-series="Beta" data-slot="2"><span class="enarratio-swatch" aria-hidden="true"></span>Beta</li></ul><div class="enarratio-frame enarratio-frame-wide" tabindex="0" role="group" aria-label="Two series, scrolls sideways"><svg aria-label="Two lines rising from 2020 to 2023, Beta above Alpha" role="img" viewBox="0 0 700 360" height="360" width="700" text-anchor="middle" fill="currentColor"><g data-enarratio-mark="y-grid" stroke-opacity="0.1" stroke="currentColor" aria-hidden="true"><line y2="316" y1="316" x2="604" x1="48"></line><line y2="266.67" y1="266.67" x2="604" x1="48"></line><line y2="217.33" y1="217.33" x2="604" x1="48"></line><line y2="168" y1="168" x2="604" x1="48"></line><line y2="118.67" y1="118.67" x2="604" x1="48"></line><line y2="69.33" y1="69.33" x2="604" x1="48"></line><line y2="20" y1="20" x2="604" x1="48"></line></g><g data-enarratio-mark="y-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L-6,0" transform="translate(48,316)"></path><path d="M0,0L-6,0" transform="translate(48,266.67)"></path><path d="M0,0L-6,0" transform="translate(48,217.33)"></path><path d="M0,0L-6,0" transform="translate(48,168)"></path><path d="M0,0L-6,0" transform="translate(48,118.67)"></path><path d="M0,0L-6,0" transform="translate(48,69.33)"></path><path d="M0,0L-6,0" transform="translate(48,20)"></path></g><g aria-hidden="true" data-enarratio-mark="y-axis tick label" transform="translate(-9,0)" font-variant="tabular-nums" text-anchor="end"><text transform="translate(48,316)" y="0.32em">0</text><text transform="translate(48,266.67)" y="0.32em">1</text><text transform="translate(48,217.33)" y="0.32em">2</text><text transform="translate(48,168)" y="0.32em">3</text><text transform="translate(48,118.67)" y="0.32em">4</text><text transform="translate(48,69.33)" y="0.32em">5</text><text transform="translate(48,20)" y="0.32em">6</text></g><g data-enarratio-mark="x-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L0,6" transform="translate(48,316)"></path><path d="M0,0L0,6" transform="translate(233.33,316)"></path><path d="M0,0L0,6" transform="translate(418.67,316)"></path><path d="M0,0L0,6" transform="translate(604,316)"></path></g><g aria-hidden="true" data-enarratio-mark="x-axis tick label" transform="translate(0,9)" font-variant="tabular-nums"><text transform="translate(48,316)" y="0.71em">2020</text><text transform="translate(233.33,316)" y="0.71em">2021</text><text transform="translate(418.67,316)" y="0.71em">2022</text><text transform="translate(604,316)" y="0.71em">2023</text></g><g aria-hidden="true" data-enarratio-mark="x-axis label" transform="translate(0,41)"><text transform="translate(326,316)">year</text></g><g data-enarratio-mark="line" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="none"><path d="M48,266.67L233.33,217.33L418.67,168L604,118.67" stroke="var(--enarratio-series-1)"></path><path d="M48,217.33L233.33,168L418.67,69.33L604,20" stroke="var(--enarratio-series-2)"></path></g><g data-enarratio-mark="dot"><circle data-enarratio-row="0" data-enarratio-col="0" data-enarratio-series="Alpha" data-enarratio-x="2020" data-enarratio-value="Alpha" data-enarratio-field="series" data-enarratio-key="[2020,&#x22;Alpha&#x22;]" fill="var(--enarratio-series-1)" r="3" cy="266.67" cx="48"><title>Alpha, year 2020: 1</title></circle><circle data-enarratio-row="1" data-enarratio-col="0" data-enarratio-series="Beta" data-enarratio-x="2020" data-enarratio-value="Beta" data-enarratio-field="series" data-enarratio-key="[2020,&#x22;Beta&#x22;]" fill="var(--enarratio-series-2)" r="3" cy="217.33" cx="48"><title>Beta, year 2020: 2</title></circle><circle data-enarratio-row="0" data-enarratio-col="1" data-enarratio-series="Alpha" data-enarratio-x="2021" data-enarratio-value="Alpha" data-enarratio-field="series" data-enarratio-key="[2021,&#x22;Alpha&#x22;]" fill="var(--enarratio-series-1)" r="3" cy="217.33" cx="233.33"><title>Alpha, year 2021: 2</title></circle><circle data-enarratio-row="1" data-enarratio-col="1" data-enarratio-series="Beta" data-enarratio-x="2021" data-enarratio-value="Beta" data-enarratio-field="series" data-enarratio-key="[2021,&#x22;Beta&#x22;]" fill="var(--enarratio-series-2)" r="3" cy="168" cx="233.33"><title>Beta, year 2021: 3</title></circle><circle data-enarratio-row="0" data-enarratio-col="2" data-enarratio-series="Alpha" data-enarratio-x="2022" data-enarratio-value="Alpha" data-enarratio-field="series" data-enarratio-key="[2022,&#x22;Alpha&#x22;]" fill="var(--enarratio-series-1)" r="3" cy="168" cx="418.67"><title>Alpha, year 2022: 3</title></circle><circle data-enarratio-row="1" data-enarratio-col="2" data-enarratio-series="Beta" data-enarratio-x="2022" data-enarratio-value="Beta" data-enarratio-field="series" data-enarratio-key="[2022,&#x22;Beta&#x22;]" fill="var(--enarratio-series-2)" r="3" cy="69.33" cx="418.67"><title>Beta, year 2022: 5</title></circle><circle data-enarratio-row="0" data-enarratio-col="3" data-enarratio-series="Alpha" data-enarratio-x="2023" data-enarratio-value="Alpha" data-enarratio-field="series" data-enarratio-key="[2023,&#x22;Alpha&#x22;]" fill="var(--enarratio-series-1)" r="3" cy="118.67" cx="604"><title>Alpha, year 2023: 4</title></circle><circle data-enarratio-row="1" data-enarratio-col="3" data-enarratio-series="Beta" data-enarratio-x="2023" data-enarratio-value="Beta" data-enarratio-field="series" data-enarratio-key="[2023,&#x22;Beta&#x22;]" fill="var(--enarratio-series-2)" r="3" cy="20" cx="604"><title>Beta, year 2023: 6</title></circle></g><g data-enarratio-mark="text" transform="translate(6,0)" text-anchor="start"><text fill="var(--enarratio-series-1)" transform="translate(604,118.67)" y="0.32em">Alpha</text><text fill="var(--enarratio-series-2)" transform="translate(604,20)" y="0.32em">Beta</text></g></svg></div><details class="enarratio-data"><summary>Data table</summary><table><caption class="enarratio-visually-hidden">Data for: Two series</caption><thead><tr><th scope="col">year</th><th scope="col">Alpha</th><th scope="col">Beta</th></tr></thead><tbody><tr><th scope="row">2020</th><td>1</td><td>2</td></tr><tr><th scope="row">2021</th><td>2</td><td>3</td></tr><tr><th scope="row">2022</th><td>3</td><td>5</td></tr><tr><th scope="row">2023</th><td>4</td><td>6</td></tr></tbody></table></details></figure>

33Area chart

An area chart of one series. editorial pack directives: :chart

Markdown

:::chart{type="area" x="year" y="total" alt="Total rising from 3 in 2020 to 9 in 2023" title="Total over time"}
```csv
year,total
2020,3
2021,5
2022,6
2023,9
```
:::

Output

Total over time

year 2020: 3year 2021: 5year 2022: 6year 2023: 9
Data table
Data for: Total over time
yeartotal
20203
20215
20226
20239
The HTML
<figure class="chart-figure enarratio" data-enarratio="area" data-enarratio-x-scale="{&#x22;type&#x22;:&#x22;linear&#x22;,&#x22;domain&#x22;:[2020,2023],&#x22;range&#x22;:[64,680]}"><p class="enarratio-title">Total over time</p><div class="enarratio-frame enarratio-frame-wide" tabindex="0" role="group" aria-label="Total over time, scrolls sideways"><svg aria-label="Total rising from 3 in 2020 to 9 in 2023" role="img" viewBox="0 0 700 360" height="360" width="700" text-anchor="middle" fill="currentColor"><g data-enarratio-mark="y-grid" stroke-opacity="0.1" stroke="currentColor" aria-hidden="true"><line y2="316" y1="316" x2="680" x1="64"></line><line y2="283.11" y1="283.11" x2="680" x1="64"></line><line y2="250.22" y1="250.22" x2="680" x1="64"></line><line y2="217.33" y1="217.33" x2="680" x1="64"></line><line y2="184.44" y1="184.44" x2="680" x1="64"></line><line y2="151.56" y1="151.56" x2="680" x1="64"></line><line y2="118.67" y1="118.67" x2="680" x1="64"></line><line y2="85.78" y1="85.78" x2="680" x1="64"></line><line y2="52.89" y1="52.89" x2="680" x1="64"></line><line y2="20" y1="20" x2="680" x1="64"></line></g><g data-enarratio-mark="y-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L-6,0" transform="translate(64,316)"></path><path d="M0,0L-6,0" transform="translate(64,283.11)"></path><path d="M0,0L-6,0" transform="translate(64,250.22)"></path><path d="M0,0L-6,0" transform="translate(64,217.33)"></path><path d="M0,0L-6,0" transform="translate(64,184.44)"></path><path d="M0,0L-6,0" transform="translate(64,151.56)"></path><path d="M0,0L-6,0" transform="translate(64,118.67)"></path><path d="M0,0L-6,0" transform="translate(64,85.78)"></path><path d="M0,0L-6,0" transform="translate(64,52.89)"></path><path d="M0,0L-6,0" transform="translate(64,20)"></path></g><g aria-hidden="true" data-enarratio-mark="y-axis tick label" transform="translate(-9,0)" font-variant="tabular-nums" text-anchor="end"><text transform="translate(64,316)" y="0.32em">0</text><text transform="translate(64,283.11)" y="0.32em">1</text><text transform="translate(64,250.22)" y="0.32em">2</text><text transform="translate(64,217.33)" y="0.32em">3</text><text transform="translate(64,184.44)" y="0.32em">4</text><text transform="translate(64,151.56)" y="0.32em">5</text><text transform="translate(64,118.67)" y="0.32em">6</text><text transform="translate(64,85.78)" y="0.32em">7</text><text transform="translate(64,52.89)" y="0.32em">8</text><text transform="translate(64,20)" y="0.32em">9</text></g><g aria-hidden="true" data-enarratio-mark="y-axis label" transform="translate(-61,0)"><text transform="translate(64,168) rotate(-90)" y="0.71em">total</text></g><g data-enarratio-mark="x-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L0,6" transform="translate(64,316)"></path><path d="M0,0L0,6" transform="translate(269.33,316)"></path><path d="M0,0L0,6" transform="translate(474.67,316)"></path><path d="M0,0L0,6" transform="translate(680,316)"></path></g><g aria-hidden="true" data-enarratio-mark="x-axis tick label" transform="translate(0,9)" font-variant="tabular-nums"><text transform="translate(64,316)" y="0.71em">2020</text><text transform="translate(269.33,316)" y="0.71em">2021</text><text transform="translate(474.67,316)" y="0.71em">2022</text><text transform="translate(680,316)" y="0.71em">2023</text></g><g aria-hidden="true" data-enarratio-mark="x-axis label" transform="translate(0,41)"><text transform="translate(372,316)">year</text></g><g data-enarratio-mark="area" fill-opacity="0.3"><path d="M64,217.33L269.33,151.56L474.67,118.67L680,20L680,316L474.67,316L269.33,316L64,316Z" fill="var(--enarratio-series-1)"></path></g><g data-enarratio-mark="line" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="none"><path d="M64,217.33L269.33,151.56L474.67,118.67L680,20" stroke="var(--enarratio-series-1)"></path></g><g data-enarratio-mark="dot" fill-opacity="0"><circle data-enarratio-row="0" data-enarratio-col="0" data-enarratio-x="2020" data-enarratio-value="2020" data-enarratio-field="x" data-enarratio-key="[2020,&#x22;total&#x22;]" fill="var(--enarratio-series-1)" r="4" cy="266.67" cx="64"><title>year 2020: 3</title></circle><circle data-enarratio-row="0" data-enarratio-col="1" data-enarratio-x="2021" data-enarratio-value="2021" data-enarratio-field="x" data-enarratio-key="[2021,&#x22;total&#x22;]" fill="var(--enarratio-series-1)" r="4" cy="233.78" cx="269.33"><title>year 2021: 5</title></circle><circle data-enarratio-row="0" data-enarratio-col="2" data-enarratio-x="2022" data-enarratio-value="2022" data-enarratio-field="x" data-enarratio-key="[2022,&#x22;total&#x22;]" fill="var(--enarratio-series-1)" r="4" cy="217.33" cx="474.67"><title>year 2022: 6</title></circle><circle data-enarratio-row="0" data-enarratio-col="3" data-enarratio-x="2023" data-enarratio-value="2023" data-enarratio-field="x" data-enarratio-key="[2023,&#x22;total&#x22;]" fill="var(--enarratio-series-1)" r="4" cy="168" cx="680"><title>year 2023: 9</title></circle></g><g data-enarratio-mark="rule" stroke="currentColor"><line y2="316" y1="316" x2="680" x1="64"></line></g></svg></div><details class="enarratio-data"><summary>Data table</summary><table><caption class="enarratio-visually-hidden">Data for: Total over time</caption><thead><tr><th scope="col">year</th><th scope="col">total</th></tr></thead><tbody><tr><th scope="row">2020</th><td>3</td></tr><tr><th scope="row">2021</th><td>5</td></tr><tr><th scope="row">2022</th><td>6</td></tr><tr><th scope="row">2023</th><td>9</td></tr></tbody></table></details></figure>

34Dot plot

A scatter of points. editorial pack directives: :chart

Markdown

:::chart{type="dot" x="dose" y="response" alt="Response rises with dose across five points" title="Dose and response"}
```csv
dose,response
1,2
2,3
3,5
4,4
5,7
```
:::

Output

Dose and response

dose 1, response 2dose 2, response 3dose 3, response 5dose 4, response 4dose 5, response 7
Data table
Data for: Dose and response
Pointdoseresponse
Point 112
Point 223
Point 335
Point 444
Point 557
The HTML
<figure class="chart-figure enarratio" data-enarratio="scatter" data-enarratio-x-scale="{&#x22;type&#x22;:&#x22;linear&#x22;,&#x22;domain&#x22;:[1,5],&#x22;range&#x22;:[64,680]}"><p class="enarratio-title">Dose and response</p><div class="enarratio-frame enarratio-frame-wide" tabindex="0" role="group" aria-label="Dose and response, scrolls sideways"><svg aria-label="Response rises with dose across five points" role="img" viewBox="0 0 700 360" height="360" width="700" text-anchor="middle" fill="currentColor"><g data-enarratio-mark="y-grid" stroke-opacity="0.1" stroke="currentColor" aria-hidden="true"><line y2="316" y1="316" x2="680" x1="64"></line><line y2="286.4" y1="286.4" x2="680" x1="64"></line><line y2="256.8" y1="256.8" x2="680" x1="64"></line><line y2="227.2" y1="227.2" x2="680" x1="64"></line><line y2="197.6" y1="197.6" x2="680" x1="64"></line><line y2="168" y1="168" x2="680" x1="64"></line><line y2="138.4" y1="138.4" x2="680" x1="64"></line><line y2="108.8" y1="108.8" x2="680" x1="64"></line><line y2="79.2" y1="79.2" x2="680" x1="64"></line><line y2="49.6" y1="49.6" x2="680" x1="64"></line><line y2="20" y1="20" x2="680" x1="64"></line></g><g data-enarratio-mark="y-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L-6,0" transform="translate(64,316)"></path><path d="M0,0L-6,0" transform="translate(64,286.4)"></path><path d="M0,0L-6,0" transform="translate(64,256.8)"></path><path d="M0,0L-6,0" transform="translate(64,227.2)"></path><path d="M0,0L-6,0" transform="translate(64,197.6)"></path><path d="M0,0L-6,0" transform="translate(64,168)"></path><path d="M0,0L-6,0" transform="translate(64,138.4)"></path><path d="M0,0L-6,0" transform="translate(64,108.8)"></path><path d="M0,0L-6,0" transform="translate(64,79.2)"></path><path d="M0,0L-6,0" transform="translate(64,49.6)"></path><path d="M0,0L-6,0" transform="translate(64,20)"></path></g><g aria-hidden="true" data-enarratio-mark="y-axis tick label" transform="translate(-9,0)" font-variant="tabular-nums" text-anchor="end"><text transform="translate(64,316)" y="0.32em">2.0</text><text transform="translate(64,286.4)" y="0.32em">2.5</text><text transform="translate(64,256.8)" y="0.32em">3.0</text><text transform="translate(64,227.2)" y="0.32em">3.5</text><text transform="translate(64,197.6)" y="0.32em">4.0</text><text transform="translate(64,168)" y="0.32em">4.5</text><text transform="translate(64,138.4)" y="0.32em">5.0</text><text transform="translate(64,108.8)" y="0.32em">5.5</text><text transform="translate(64,79.2)" y="0.32em">6.0</text><text transform="translate(64,49.6)" y="0.32em">6.5</text><text transform="translate(64,20)" y="0.32em">7.0</text></g><g aria-hidden="true" data-enarratio-mark="y-axis label" transform="translate(-61,0)"><text transform="translate(64,168) rotate(-90)" y="0.71em">response</text></g><g data-enarratio-mark="x-grid" stroke-opacity="0.1" stroke="currentColor" aria-hidden="true"><line y2="316" y1="20" x2="64" x1="64"></line><line y2="316" y1="20" x2="141" x1="141"></line><line y2="316" y1="20" x2="218" x1="218"></line><line y2="316" y1="20" x2="295" x1="295"></line><line y2="316" y1="20" x2="372" x1="372"></line><line y2="316" y1="20" x2="449" x1="449"></line><line y2="316" y1="20" x2="526" x1="526"></line><line y2="316" y1="20" x2="603" x1="603"></line><line y2="316" y1="20" x2="680" x1="680"></line></g><g data-enarratio-mark="x-axis tick" stroke="currentColor" fill="none" aria-hidden="true"><path d="M0,0L0,6" transform="translate(64,316)"></path><path d="M0,0L0,6" transform="translate(141,316)"></path><path d="M0,0L0,6" transform="translate(218,316)"></path><path d="M0,0L0,6" transform="translate(295,316)"></path><path d="M0,0L0,6" transform="translate(372,316)"></path><path d="M0,0L0,6" transform="translate(449,316)"></path><path d="M0,0L0,6" transform="translate(526,316)"></path><path d="M0,0L0,6" transform="translate(603,316)"></path><path d="M0,0L0,6" transform="translate(680,316)"></path></g><g aria-hidden="true" data-enarratio-mark="x-axis tick label" transform="translate(0,9)" font-variant="tabular-nums"><text transform="translate(64,316)" y="0.71em">1.0</text><text transform="translate(141,316)" y="0.71em">1.5</text><text transform="translate(218,316)" y="0.71em">2.0</text><text transform="translate(295,316)" y="0.71em">2.5</text><text transform="translate(372,316)" y="0.71em">3.0</text><text transform="translate(449,316)" y="0.71em">3.5</text><text transform="translate(526,316)" y="0.71em">4.0</text><text transform="translate(603,316)" y="0.71em">4.5</text><text transform="translate(680,316)" y="0.71em">5.0</text></g><g aria-hidden="true" data-enarratio-mark="x-axis label" transform="translate(0,41)"><text transform="translate(372,316)">dose</text></g><g data-enarratio-mark="dot" stroke-width="1.5" fill-opacity="0.35"><circle data-enarratio-row="0" data-enarratio-col="0" data-enarratio-x="1" data-enarratio-key="0" stroke="var(--enarratio-series-1)" fill="var(--enarratio-series-1)" r="4" cy="316" cx="64"><title>dose 1, response 2</title></circle><circle data-enarratio-row="0" data-enarratio-col="1" data-enarratio-x="2" data-enarratio-key="1" stroke="var(--enarratio-series-1)" fill="var(--enarratio-series-1)" r="4" cy="256.8" cx="218"><title>dose 2, response 3</title></circle><circle data-enarratio-row="0" data-enarratio-col="2" data-enarratio-x="3" data-enarratio-key="2" stroke="var(--enarratio-series-1)" fill="var(--enarratio-series-1)" r="4" cy="138.4" cx="372"><title>dose 3, response 5</title></circle><circle data-enarratio-row="0" data-enarratio-col="3" data-enarratio-x="4" data-enarratio-key="3" stroke="var(--enarratio-series-1)" fill="var(--enarratio-series-1)" r="4" cy="197.6" cx="526"><title>dose 4, response 4</title></circle><circle data-enarratio-row="0" data-enarratio-col="4" data-enarratio-x="5" data-enarratio-key="4" stroke="var(--enarratio-series-1)" fill="var(--enarratio-series-1)" r="4" cy="20" cx="680"><title>dose 5, response 7</title></circle></g></svg></div><details class="enarratio-data"><summary>Data table</summary><table><caption class="enarratio-visually-hidden">Data for: Dose and response</caption><thead><tr><th scope="col">Point</th><th scope="col">dose</th><th scope="col">response</th></tr></thead><tbody><tr><th scope="row">Point 1</th><td>1</td><td>2</td></tr><tr><th scope="row">Point 2</th><td>2</td><td>3</td></tr><tr><th scope="row">Point 3</th><td>3</td><td>5</td></tr><tr><th scope="row">Point 4</th><td>4</td><td>4</td></tr><tr><th scope="row">Point 5</th><td>5</td><td>7</td></tr></tbody></table></details></figure>

35Diagram

A Mermaid diagram, drawn ahead of time in both themes. editorial pack directives: :diagram

Markdown

:::diagram{title="From draft to page" alt="Three boxes in a row: Draft points to Prelum, which points to Page"}
```mermaid
graph LR
  Draft --> Prelum --> Page
```
:::

Output

From draft to page

Three boxes in a row: Draft points to Prelum, which points to PageThree boxes in a row: Draft points to Prelum, which points to Page
The HTML
<figure class="diagram-figure"><p class="diagram-title">From draft to page</p><img class="diagram-image diagram-light" src="/diagrams/prelum-03318765-light.svg" alt="Three boxes in a row: Draft points to Prelum, which points to Page"><img class="diagram-image diagram-dark" src="/diagrams/prelum-03318765-dark.svg" alt="Three boxes in a row: Draft points to Prelum, which points to Page"></figure>
In the RSS item
<figure class="diagram-figure"><p class="diagram-title">From draft to page</p><img class="diagram-image diagram-light" src="https://prelum.dustinedwards.info/diagrams/prelum-03318765-light.svg" alt="Three boxes in a row: Draft points to Prelum, which points to Page"><img class="diagram-image diagram-dark" src="https://prelum.dustinedwards.info/diagrams/prelum-03318765-dark.svg" alt="Three boxes in a row: Draft points to Prelum, which points to Page"></figure>

36One source, three outputs

A short post as a site publishes it: the page, the RSS item (rssItem: math as TeX, URLs made absolute) and the line llms.txt gives it (llmsDocument).

Markdown

---
title: A short post
slug: a-short-post
description: One post, rendered once and published three ways.
date: 2026-10-11
---
A paragraph with a [relative link](/writing/other) and the formula $E = mc^2$.

![A purple square with a lighter circle in it](/images/sample-640x360.svg)

Page

A paragraph with a relative link and the formula E=mc2E = mc^2.

A purple square with a lighter circle in it

RSS item

    <item>
      <title>A short post</title>
      <link>https://prelum.dustinedwards.info/writing/a-short-post</link>
      <guid isPermaLink="true">https://prelum.dustinedwards.info/writing/a-short-post</guid>
      <description>One post, rendered once and published three ways.</description>
      <content:encoded><![CDATA[<p>A paragraph with a <a href="https://prelum.dustinedwards.info/writing/other">relative link</a> and the formula $E = mc^2$.</p>
<p><a class="image-link" href="https://prelum.dustinedwards.info/images/sample-640x360.svg"><img src="https://prelum.dustinedwards.info/images/sample-640x360.svg" alt="A purple square with a lighter circle in it" width="640" height="360" loading="eager" decoding="async" fetchpriority="high"></a></p>]]></content:encoded>
      <pubDate>Sun, 11 Oct 2026 00:00:00 GMT</pubDate>
    </item>

llms.txt

# Prelum specimen

> Every element Prelum 0.14.0 renders from markdown.

## Writing
- [A short post](https://prelum.dustinedwards.info/writing/a-short-post): One post, rendered once and published three ways.