Links

The @[text](url) annotation syntax embeds clickable hyperlinks inside code blocks while preserving token colors and styles. Links are disabled by default; enable them with kazari.WithLinks(true).

Annotation syntax

Use @[display text](url) anywhere in the code. The @ prefix is required. Plain [text](url) is not matched.

1
import (
2
    fmt
3
    os
4
)

→ The display text (fmt, os) appears as a clickable hyperlink with a dotted underline. Links inherit the token color.

Go API equivalent:

1
html, err := engine.RenderWithMeta(code, `go title="main.go"`)

Allowed URL schemes

How it works

Link processing runs inside the preprocessing pipeline before tokenization:

1. Annotation syntax is extracted from each line. The @[, ](url) wrappers are stripped, leaving only the display text.
2. The cleaned code is passed to the highlighter. Byte offsets track where each link text sits in the cleaned output.
3. During HTML rendering, those offsets map back to token spans. The matching tokens are wrapped in <a class="kz-link" href="..." target="_blank" rel="noopener noreferrer"> elements with an external link icon appended.

The copy button copies the cleaned code, not the original annotation syntax. Link URLs are excluded from the copy payload.

Links + inline markers

Links compose with inline markers on the same line. Marked text inside a link gets both the marker element and the anchor wrapper:

1
const root = createRoot(
2
    document.getElementById("root")
3
)
4
root.render(<StrictMode><App /></StrictMode>)

→ The "createRoot" inline marker highlights all occurrences with the default mark style, and ins="StrictMode" marks those occurrences as inserted (green). Both markers apply on top of the link underline. The rendered HTML nests <a class="kz-link"> around the <mark> or <ins> element.

CSS variables

The link CSS is only included in engine.CSS() output when links are enabled. Override any variable on :root or a more specific selector:

1
:root {
2
    --kz-link-underline: #60a5fa;
3
    --kz-link-underline-offset: 0.2em;
4
}

See the CSS Variables reference for the complete list.

Configuration

Links are an engine-wide setting. There is no per-block meta string override.

Edge cases

• Links are disabled by default. Enable with WithLinks(true) or links: true in the config file.
• Invalid URLs cause the @[text](url) annotation to appear as literal text. No error is raised and no link is rendered.
• The copy button copies the cleaned code without annotation syntax or URLs.
• When linked text spans multiple syntax tokens, each token gets its own <a> element pointing to the same URL. The external link icon appears only on the last segment.
• Mermaid blocks bypass link extraction entirely (pass-through returns before preprocessing runs).
• The underline style is dotted by default and becomes solid on hover.