Icons

Kazari provides two icon systems: file icons in the title bar and language icon slots in the language badge area. Both use CSS-populated HTML slots; no default icon images are included.

File icons

When a code block has a title with a file extension, Kazari emits a <span class="kz-file-icon" data-ext="..."> element before the title text:

1
```go title="main.go"
2
package main
3
4
func main() {}
5
```

1
package main
2
3
func main() {}

→ The title bar shows a kz-file-icon slot before the main.go filename. The slot renders as empty space until styled via CSS.

The extension is derived from the last . in the title. A title without an extension or with a trailing dot emits no icon span.

File icons appear only in editor frames. Terminal frames and no-frame blocks do not render the icon slot.

To display an image, target the data-ext attribute in your stylesheet:

1
.kz-file-icon[data-ext="go"] {
2
    background-image: url("/icons/go.svg");
3
    background-size: contain;
4
    background-repeat: no-repeat;
5
}

Inline SVG helper

Use kazari.CreateInlineSVGURL to embed an SVG directly as a data URI:

1
url := kazari.CreateInlineSVGURL(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
2
  <path d='M12 2L2 7l10 5 10-5-10-5z'/>
3
</svg>`)

Then use the returned URL in CSS:

1
.kz-file-icon[data-ext="go"] {
2
    background-image: url("data:image/svg+xml,...");
3
}

Custom file icon resolver

WithFileIconResolver replaces the default empty span with any HTML string:

1
engine := kazari.New(
2
    kazari.WithHighlighter(hl),
3
    kazari.WithFileIconResolver(func(ext string) string {
4
        icons := map[string]string{
5
            "go": "🔵",
6
            "py": "🐍",
7
            "js": "🟡",
8
            "rs": "🦀",
9
        }
10
        icon, ok := icons[ext]
11
        if !ok {
12
            icon = "📄"
13
        }
14
        return fmt.Sprintf(`<span class="kz-file-icon">%s</span>`, icon)
15
    }),
16
)

The resolver receives the file extension without the dot (e.g., "go", "ts"). The returned HTML is inserted verbatim before the title span. The resolver is not called when no title is set or when the title has no extension.

WithFileIconResolver is a Go API option only and has no config file equivalent.

Language badge

The language badge displays the language name in the toolbar. WithLanguageBadge(false) disables the entire badge area, including both the text label and any icon slot.

Display names are normalized: javascript becomes JavaScript, typescript becomes TypeScript, html becomes HTML, css becomes CSS, json becomes JSON, yaml becomes YAML, and so on. Other languages get their first letter uppercased.

Language icon mode

By default, the badge shows text only. WithLanguageIconMode adds an icon slot:

1
engine := kazari.New(
2
    kazari.WithHighlighter(hl),
3
    kazari.WithLanguageIconMode(kazari.LangIconAndText),
4
)

The kz-lang-icon span has no default image. Style it via [data-lang] selectors:

1
.kz-lang-icon[data-lang="go"] {
2
    background-image: url("/icons/go.svg");
3
    background-size: contain;
4
    background-repeat: no-repeat;
5
}

For theme-adaptive monochrome icons, use mask-image instead of background-image. The icon inherits the toolbar text color and adapts to light/dark themes automatically:

1
.kz-lang-icon[data-lang="go"] {
2
    -webkit-mask-image: url("/icons/go.svg");
3
    mask-image: url("/icons/go.svg");
4
    -webkit-mask-size: contain;
5
    mask-size: contain;
6
    -webkit-mask-repeat: no-repeat;
7
    mask-repeat: no-repeat;
8
    background-color: currentColor;
9
}

When LanguageBadge is false, no icon or text is rendered regardless of LangIconMode.

CSS variables

File icon variables (emitted when WithFileIcons(true), the default):

Language icon variables (emitted when LangIconMode is not LangIconNone):

Neither set of variables is emitted unless the corresponding feature is active. See the CSS Variables reference for the complete list.

Configuration

Edge cases

• No default icon images are included. Both systems emit empty HTML slots that the consumer styles.
• Both icon types appear only in editor frames. Terminal frames and frameless blocks do not render icon slots.
• WithLanguageBadge(false) suppresses both icon and text regardless of LangIconMode.
• The data-lang attribute uses the raw lowercase language name (e.g., go), not the display-cased name (e.g., Go).
• FileIconResolver is Go-only. Functions cannot be serialized to YAML/JSON config files.
• A title without a file extension emits no file icon span. The extension is the text after the last . in the title.