Code blocks

Fenced code stays literal. Markupress highlights supported languages with Shiki at build time, and each block has Copy and Wrap controls when JavaScript is available.

Captions and highlighted lines

Put presentation attributes in the fence's attribute list:

```ts {highlight="1,3-4" show-line-numbers title="app/pages/index.ts"}
const first = 1;
const second = 2;
const third = 3;
const fourth = 4;
```

app/pages/index.ts

const first = 1;
const second = 2;
const third = 3;
const fourth = 4;

title supplies the caption.
highlight selects comma-separated lines or inclusive ranges.
show-line-numbers numbers the lines. Use show-line-numbers=false to override the site's lineNumbers setting for one block.

A title-only fence uses {title="notes.txt"} without a language. Unknown languages render as escaped plain text.

Embedded files

A link with {embed} in its title, alone in its paragraph, shows the linked file's code, so the page always matches the file:

[save-button.html](../../../../examples/save-button.html "{embed highlight=3}")

The path is relative to the page, as any link's is. The link text titles the code, the file's extension names its language, and highlight counts the file's lines. A missing file fails the build, and markupress dev reloads the page when the file changes. Markdown renderers that don't embed files, such as GitHub's, show an ordinary link to the file.

Live examples

{embed=example} shows an HTML file working, followed by its code:

[Save and cancel](../../../../examples/save-button.html "{embed=example}")

Save and cancel

<link rel="component" href="@threadlabs/looma/components/ui-button/ui-button.html">

<ui-button variant="solid" tone="accent">Save</ui-button>
<ui-button>Cancel</ui-button>

The file's HTML renders as HTML written in the page does, components included. The file links its own components with <link rel="component">, and relative paths in it start from the file's folder. The link text is the caption, and highlight and show-line-numbers apply to the code. To show other sources of the same example, put embeds in adjacent tabs.

Literal content

Braces, HTML tags and comments inside a fence are code. Markupress does not evaluate them or remove notation comments. To change highlighting, edit the fence's attributes.

Tabbed examples

Put a fenced block inside each adjacent ::: tab [Label] container. See Markdown for the complete syntax.