Code

pnpm exec spurious correlate --x "rubber ducks bought" --y "bugs fixed" --office berlin --moon-phase waxing --min-r 0.9 > ducks.csv

```sh
pnpm exec spurious correlate --x "rubber ducks bought" --y "bugs fixed" --office berlin --moon-phase waxing --min-r 0.9 > ducks.csv
```

function close() {
  dialog.close();
  history.back();
  if (opened) history.back();
}

```ts title="src/zoom.ts" del={3} ins={4} mark={1} showLineNumbers
function close() {
  dialog.close();
  history.back();
  if (opened) history.back();
}
```

function close() {
  dialog.close();
  history.back();
  if (opened) history.back();
}

```diff lang="ts"
@@ -12,4 +12,4 @@ export function close() {
 function close() {
   dialog.close();
-  history.back();
+  if (opened) history.back();
 }
```

import { defineConfig } from "vite";
6 collapsed lines
import vue from "@vitejs/plugin-vue";
import icons from "unplugin-icons/vite";
import components from "unplugin-vue-components/vite";
import inspect from "vite-plugin-inspect";
import checker from "vite-plugin-checker";
import { comark } from "./comark";

export default defineConfig({
  plugins: [comark(), vue()],
});

```ts [vite.config.ts] collapse={2-7} startLineNumber=1
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import icons from "unplugin-icons/vite";
import components from "unplugin-vue-components/vite";
import inspect from "vite-plugin-inspect";
import checker from "vite-plugin-checker";
import { comark } from "./comark";

export default defineConfig({
  plugins: [comark(), vue()],
});
```

pnpm add comark @comark/html comark-code

```sh title="Install"
pnpm add comark @comark/html comark-code
```

Each code block gets a header above its first line. The file's name or the language sits on the left and the buttons on the right, so they never cover the code. Copy puts the block's code on the clipboard, and Wrap breaks long lines in that block only. Without a script, the header keeps its title and hides the buttons, since they couldn't work.

Words after the fence's language, written the way Expressive Code writes them, mark lines as added, deleted, or worth a look. They can also fold runs of lines away, number the lines, and draw shell sessions as a terminal. A diff fence with a lang turns pasted git diff output into highlighted code with its lines marked. Usage lists them all.

```ts title="src/limits.ts" ins={3} del={2} collapse={5-9} showLineNumbers
export const limits = {
  filters: 3,
  filters: 5,
  sorts: 2,
  // …
};
```

Write each option after the fence's language, the way Expressive Code writes them, so a block written for Expressive Code renders the same here. Comark's own [file] and {2} work beside them.

A range is one line, {7}, or the first and last lines of a run, {3-4}, and a list takes both, {1, 3-4}. Lines count from 1, and collapsed lines are counted where they are.

sh, bash, zsh, shell, console, and ansi blocks are terminals unless their title is a file's name, like install.sh. A terminal's header shows its title, if it has one, but not its language. In a code group the tab names the block, so a terminal there draws no window.

The components draw the options with no script beyond the one the buttons already need. A collapsed range is a <details> element. The numbers and the signs come from CSS, so selecting the code and copying it gets only the code.

A diff fence with a lang is highlighted as that language. Each line's leading + or - becomes ins or del:

```diff lang="ts"
 function close() {
   dialog.close();
-  history.back();
+  if (opened) history.back();
 }
```

Paste the output of git diff as it is. When the block has @@ hunk headers, the plugin drops the hunk headers and the file headers before the first hunk. Without lang, a diff fence stays a diff in Shiki's colors.

List shiki before comark-code in plugins:

const render = createHtmlRenderer({ plugins: [shiki(), code()], components });

Shiki draws every block again from its text, so comark-code marks the lines once Shiki has drawn them. If comark-code comes first, a block keeps its title, frame, and Wrap. It loses its markers, numbers, and collapsed ranges, and the plugin says so in meta.issues. Without Shiki, comark-code splits the lines itself.

Shiki's notation transformers work too. comark-code styles the lines they mark with // [!code ++], // [!code --], // [!code highlight], // [!code focus], // [!code error], and // [!code warning], and the words // [!code word:name] marks.

The plugin adds every problem to meta.issues, as Validation describes, and never throws:

• A range past the block's last line.
• A range that isn't in braces.
• A startLineNumber that isn't a whole number.
• A frame it doesn't draw.

Each issue names the block by its title, or else by its first line, and says how to write it. Each one has its own rule in Doctor.

Add buttons of your own with actions. Each one goes on the code blocks in its languages, or on every block when you leave them out, before Wrap and Copy:

const render = createHtmlRenderer({
  plugins: [code({ actions: [{ id: "run", label: "Run", languages: ["sh", "bash"] }] })],
  components,
});

A button shows a label, an icon, or both. The icon is an Iconify name, such as lucide:play, or an image URL. It resolves while parsing, like comark-icon's icons, and iconResolver shares comark-icon's collections. An icon-only button needs a title, which is its tooltip and the name screen readers read:

code({
  actions: [
    { id: "run", label: "Run", icon: "lucide:play", languages: ["sh", "bash"] },
    { id: "explain", icon: "lucide:sparkles", title: "Explain this code" },
  ],
});

If an icon can't be drawn, the plugin reports it in meta.issues under the same Doctor rule as an :icon's, and the button shows its title as text instead.

Your app decides what an action does. onCodeAction() from comark-code/client calls your function with the block's code and language whenever that action's button is clicked, and returns a function that stops it:

import { onCodeAction } from "comark-code/client";

const stop = onCodeAction("run", ({ code, language }) => terminal.run(code));

The callback lives in the page, not in the plugin's options, because the HTML may be rendered on a server where your function can't follow it.

Under the hood, a click sends a comark-code-action event from the block. It bubbles up to the page with the action's id, the code, and the language in its detail. Listen for it yourself to handle every action in one place.

The plugin does nothing else, so code() with no actions only adds Copy and Wrap, which come from the components. To see an action's button, add one under comark-code in the playground's Config tab.

Copy takes the code's text as written. It leaves out the highlighting, the line numbers, the lines marked del, and the row that counts a collapsed range's lines, so a diff copies as the code after the change. Your actions get the same text.

A check mark confirms the copy, and a status line tells screen readers. When the page can't write to the clipboard, such as over plain http, Copy selects the code instead and says to press Ctrl+C or ⌘C.

Wrap breaks long lines in its own block. It stays on until you press it again, and it isn't saved for the next visit. A block whose fence says wrap starts with it on. A numbered line wraps under its own code, not under its number.

The options go under code in comarkUi(), or to code() when you use it alone.

Each action takes:

onCodeAction(id, callback) from comark-code/client calls callback with the block's code and language whenever that action's button is clicked, and returns a function that stops it. A click also sends a comark-code-action event that bubbles up to the page with the action's id, the code, and the language in its detail. Actions shows both.

comark-ui brings comark-code and registers it. To use it alone, install it and pass the renderer's components:

pnpm add comark @comark/html comark-code

import { createHtmlRenderer } from "@comark/html";
import code, { components } from "comark-code/html";

const render = createHtmlRenderer({ plugins: [code()], components });

The components replace how pre renders. The block keeps its own markup, so Shiki's highlighting and your pre styles still apply, and it works in a code group whichever plugin comes first.

For Vue, React, or Svelte, import from comark-code/vue, comark-code/react, or comark-code/svelte (Svelte 5.20 or later). Renderers covers server rendering and using it with other plugins.

The header sits on the code block's own background, so it takes your pre styles and Shiki's theme. The title and buttons follow the shared tokens in Theming. Two variables of their own size the buttons and the header, and a third sets the title's font.

The rules sit in a comark CSS layer, so a plain rule of your own wins over any of them. A few rules sit outside the layer, so they beat a page's own pre styles:

• The padding-top that makes room for the header above the first line.
• The overflow-x that clips a marked line's tint.
• Wrap's white-space.

A collapsed range's margins, padding, and border are !important, so a page's own details and summary styles can't push it off the lines.

Set these on .ck or any ancestor, such as :root:

The dark shades follow the system's dark mode, or a .dark class on any ancestor, and a .light class keeps the light ones.

The header is the button size plus the inset above and below, and the block's padding-top matches it. A marked line is tinted from edge to edge, past the block's padding, so the block clips its overflow. Its sign sits in the block's left padding, which needs to be at least 1.5ch wide. On a numbered block, the sign sits between the number and the code.

Bigger buttons further from the corner, and a title in the code's font, lined up with code that has 1.25rem of side padding:

:root {
  --ck-inset: 0.5rem;
  --ck-button-size: 1.75rem;
  --ck-title-font: "JetBrains Mono", monospace;
}

.ck-bar {
  padding-left: 1.25rem;
}

To try it, paste it into Extra CSS in the playground's Theme pane.