Kazari Showcase with Chroma

Frames

Editor, terminal, and unframed presentation styles.

Editor Frame (explicit title)

Adds familiar editor chrome and an explicit file name above the highlighted code.

1
package main
2
3
import "fmt"
4
5
func main() {
6
  name := "Kazari"
7
  fmt.Printf("Hello, %s!\n", name)
8
}

How to build this

go title="main.go" showLineNumbers

html, err := engine.Render(code, kazari.Options{
	Lang:        "go",
	Title:       "main.go",
	LineNumbers: boolPtr(true),
})

Editor Frame (file name extracted from comment)

Extracts the file name from a leading source comment when no title is provided.

const greet = (name) => {
  console.log("Hello, " + name + "!");
  return { greeting: name, time: Date.now() };
};

How to build this

javascript

html, err := engine.Render(code, kazari.Options{Lang: "javascript"})

Terminal Frame (auto-detected from language)

Automatically presents shell languages in a terminal-style frame instead of an editor frame.

npm install kazari
go build ./...
echo "Done!"

How to build this

bash

html, err := engine.Render(code, kazari.Options{Lang: "bash"})

Terminal Frame (with title)

Adds a descriptive session or command label to the terminal title bar.

PowerShell terminal example

Get-ChildItem -Path ./dist -Recurse | Measure-Object -Property Length -Sum

How to build this

powershell title="PowerShell terminal example"

html, err := engine.Render(code, kazari.Options{
	Lang:  "powershell",
	Title: "PowerShell terminal example",
})

Terminal Frame (minimal dots)

Uses a compact engine-level dot style for a quieter terminal title bar.

Minimal dots

npm install kazari
go build ./...
echo "Done!"

How to build this

Go

engine := kazari.New(
	kazari.WithHighlighter(highlighter),
	kazari.WithTerminalDotStyle(kazari.DotsMinimal),
)
html, err := engine.Render(code, kazari.Options{Lang: "bash", Title: "Minimal dots"})

No Frame

Removes the surrounding window chrome while preserving syntax highlighting and code structure.

package main
import "fmt"
func main() {
  name := "world"
  fmt.Printf("Hello, %s!\n", name)
  for i := 0; i < 3; i++ {
    fmt.Println(i)
  }
}

How to build this

go frame="none"

frame := kazari.FrameNone
html, err := engine.Render(code, kazari.Options{Lang: "go", Frame: &frame})

Layout

Line numbering and wrapping behavior for different code shapes.

Line Numbers

Adds a numbered gutter so readers can reference specific lines precisely.

1
package main
2
3
import (
4
  "fmt"
5
  "os"
6
  "strings"
7
)
8
9
func main() {
10
  args := os.Args[1:]
11
  if len(args) == 0 {
12
    fmt.Println("Usage: greet <name>")
13
    os.Exit(1)
14
  }
15
  name := strings.Join(args, " ")
16
  fmt.Printf("Hello, %s!\n", name)
17
}

How to build this

go title="main.go" showLineNumbers

enabled := true
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "main.go", LineNumbers: &enabled,
})

Line Numbers (custom start)

Continues numbering from the source file's original location when showing an excerpt.

22
  result := evaluate(strings.Join(args, " "))
23
  fmt.Printf("= %v\n", result)
24
}

How to build this

go title="calc.go (lines 22-24)" showLineNumbers startLineNumber=22

enabled, start := true, 22
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "calc.go (lines 22-24)",
	LineNumbers: &enabled, StartLineNumber: &start,
})

Word Wrap (long lines wrap, indent preserved)

Wraps long lines within the block while preserving indentation for readable continuations.

1
func configure(opts *Options) {
2
  opts.Logger = log.New(os.Stdout, "[kazari] a deliberately long prefix string that forces this line to wrap inside the demo container", log.LstdFlags|log.Lshortfile|log.Lmicroseconds)
3
  opts.Description = "Word wrap keeps long lines visible without horizontal scrolling, and preserved indentation keeps wrapped continuations aligned with the code structure."
4
}

How to build this

go title="wrap.go" showLineNumbers wrap

enabled, wrap := true, true
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "wrap.go", LineNumbers: &enabled, Wrap: &wrap,
})

Word Wrap (preserveIndent=false)

Wrapped continuations start at the left edge instead of aligning with the original indentation.

1
func configure(opts *Options) {
2
  opts.Logger = log.New(os.Stdout, "[kazari] a deliberately long prefix string that forces this line to wrap inside the demo container", log.LstdFlags|log.Lshortfile|log.Lmicroseconds)
3
  opts.Description = "Word wrap keeps long lines visible without horizontal scrolling, and preserved indentation keeps wrapped continuations aligned with the code structure."
4
}

How to build this

go title="no-preserve.go" showLineNumbers wrap preserveIndent=false

enabled, wrap, noPreserve := true, true, false
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "no-preserve.go",
	LineNumbers: &enabled, Wrap: &wrap, PreserveIndent: &noPreserve,
})

Word Wrap (hangingIndent=4)

Adds a fixed hanging indent to wrapped continuations so new logical lines are easy to spot.

1
func configure(opts *Options) {
2
  opts.Logger = log.New(os.Stdout, "[kazari] a deliberately long prefix string that forces this line to wrap inside the demo container", log.LstdFlags|log.Lshortfile|log.Lmicroseconds)
3
  opts.Description = "Word wrap keeps long lines visible without horizontal scrolling, and preserved indentation keeps wrapped continuations aligned with the code structure."
4
}

How to build this

go title="hanging.go" showLineNumbers wrap preserveIndent=false hangingIndent=4

enabled, wrap, noPreserve, hanging := true, true, false, 4
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "hanging.go",
	LineNumbers: &enabled, Wrap: &wrap,
	PreserveIndent: &noPreserve, HangingIndent: &hanging,
})

Markers and Focus

Call attention to lines, ranges, and inline text without losing syntax highlighting.

Line Markers (mark, ins, del)

Distinguishes highlighted, inserted, and deleted lines with clear full-line treatments.

1
package main
2
3
import "fmt"
4
5
func oldGreet(name string) {
6
  fmt.Println("Hi,", name)
7
}
8
9
func newGreet(name string) {
10
  fmt.Printf("Hello, %s! Welcome!\n", name)
11
}
12
13
func main() {
14
  newGreet("Kazari")
15
}

How to build this

go title="diff.go" showLineNumbers {3} del={5-7} ins={9-11}

html, err := engine.RenderWithMeta(code, `go title="diff.go" showLineNumbers {3} del={5-7} ins={9-11}`)

Labeled Range

Attaches explanatory labels to marked line ranges so each change can carry context.

1
class UserController extends Controller
2
{
3
    private UserRepository $users;
4
    private LoggerInterface $logger;
5
6
    public function __construct(
7
        UserRepository $users,
8
        LoggerInterface $logger
9
    ) {
10
        $this->users = $users;
11
        $this->logger = $logger;
12
    }
13
14
    public function show(int $id): Response
15
    {
16
17
        $user = $this->users->find($id);
18
        if ($user === null) {
19
            throw new NotFoundHttpException();
20
        }
21
22
        return $this->json($user);
23
    }
24
}

How to build this

php title="UserController.php" showLineNumbers {"1. Inject dependencies via constructor:":5-12} del={"2. Remove inline lookup logic:":16-20} ins={"3. Return a JSON response:":21-22}

html, err := engine.RenderWithMeta(code, meta)

Labeled Range (no line numbers)

Labeled ranges without line numbers place the badge flush at the left edge of the block.

class UserController extends Controller
{
    private UserRepository $users;
    private LoggerInterface $logger;
    public function __construct(
        UserRepository $users,
        LoggerInterface $logger
    ) {
        $this->users = $users;
        $this->logger = $logger;
    }
    public function show(int $id): Response
    {
        $user = $this->users->find($id);
        if ($user === null) {
            throw new NotFoundHttpException();
        }
        return $this->json($user);
    }
}

How to build this

php title="UserController.php" {"1. Inject dependencies via constructor:":5-12} del={"2. Remove inline lookup logic:":16-20} ins={"3. Return a JSON response:":21-22}

html, err := engine.RenderWithMeta(code, meta)

Labeled Range (numbered)

Short numeric labels act as compact reference badges on the first line of each range.

class UserController extends Controller
{
    private UserRepository $users;
    private LoggerInterface $logger;
    public function __construct(
        UserRepository $users,
        LoggerInterface $logger
    ) {
        $this->users = $users;
        $this->logger = $logger;
    }
    public function show(int $id): Response
    {
        $user = $this->users->find($id);
        if ($user === null) {
            throw new NotFoundHttpException();
        }
        return $this->json($user);
    }
}

How to build this

php title="UserController.php" {"1":6-9} del={"2":17-19} ins={"3":21-22}

html, err := engine.RenderWithMeta(code, meta)

Focus Lines

Keeps selected lines prominent while dimming the surrounding code for emphasis.

1
func process(items []string) error {
2
  for _, item := range items {
3
    if err := validate(item); err != nil {
4
      return fmt.Errorf("invalid: %w", err)
5
    }
6
    store(item)
7
  }
8
  return nil
9
}

How to build this

go title="process.go" showLineNumbers focus={3-5}

html, err := engine.RenderWithMeta(code, `go title="process.go" showLineNumbers focus={3-5}`)

Inline Markers

Highlights matching text inside a line without losing the underlying syntax colors.

1
interface CacheEntry<T> {
2
  key: string;
3
  value: T;
4
  expiresAt: number;
5
}
6
7
function getOrSet<T>(cache: Map<string, CacheEntry<T>>, key: string, factory: () => T): T {
8
  const entry = cache.get(key);
9
  if (entry && entry.expiresAt > Date.now()) {
10
    return entry.value;
11
  }
12
  const value = factory();
13
  cache.set(key, { key, value, expiresAt: Date.now() + 3600_000 });
14
  return value;
15
}

How to build this

typescript title="cache.ts" showLineNumbers "CacheEntry" ins="factory"

html, err := engine.RenderWithMeta(code, `typescript title="cache.ts" showLineNumbers "CacheEntry" ins="factory"`)

Inline Markers (single quotes)

Uses single-quoted marker expressions when the highlighted text or meta string needs simpler escaping.

1
var query = context.Users
2
    .Where(u => u.IsActive)
3
    .OrderBy(u => u.CreatedAt)
4
    .Select(u => new UserDto(u.Name, u.Email));

How to build this

csharp title="UserQuery.cs" showLineNumbers 'context' ins='OrderBy' del='Select'

html, err := engine.RenderWithMeta(code, meta)

Combined (markers + inline + focus)

Layers line markers, inline matches, and focused ranges in the same code block.

1
func main() {
2
  db := connect()
3
  defer db.Close()
4
5
  users, err := db.Query("SELECT * FROM users")
6
  if err != nil {
7
    log.Fatal(err)
8
  }
9
10
  for _, u := range users {
11
    fmt.Println(u.Name)
12
  }
13
}

How to build this

go title="combined.go" showLineNumbers {4-5} ins={10-12} del={6-8} "db" focus={4-5,10-12}

html, err := engine.RenderWithMeta(code, meta)

Links

Clickable hyperlinks inside code blocks using @[text](url) syntax.

Inline Links

Wraps identifiers in clickable links using @[text](url) syntax. The link text keeps its syntax color and gains a dotted underline.

1
import (
2
  fmt
3
  net/http
4
)
5
6
func main() {
7
  http.HandleFunc("/", handler)
8
  http.ListenAndServe(":8080", nil)
9
}

How to build this

import (
	@[fmt](https://pkg.go.dev/fmt)
	@[net/http](https://pkg.go.dev/net/http)
)

func main() {
	@[http.HandleFunc](https://pkg.go.dev/net/http#HandleFunc)("/", handler)
	@[http.ListenAndServe](https://pkg.go.dev/net/http#ListenAndServe)(":8080", nil)
}

engine := kazari.New(kazari.WithLinks(true))
html, err := engine.Render(code, kazari.Options{Lang: "go", Title: "main.go"})

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.

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

How to build this

const root = @[createRoot](https://react.dev/reference/react-dom/client/createRoot)(
	document.getElementById("root")
)
root.render(<@[StrictMode](https://react.dev/reference/react/StrictMode)><App /></@[StrictMode](https://react.dev/reference/react/StrictMode)>)

jsx title="index.tsx" "createRoot" ins="StrictMode"

Collapsible Sections

Threshold and range-based strategies for keeping long examples compact.

Threshold-based (auto-collapses long blocks)

Automatically collapses long blocks when they exceed the engine's configured line threshold.

package main
import (
  "fmt"
  "net/http"
  "log"
  "encoding/json"
  "os"
)
type Server struct {
  addr    string
  handler http.Handler
  logger  *log.Logger
}
func NewServer(addr string) *Server {
  return &Server{
    addr:    addr,
    handler: http.DefaultServeMux,
    logger:  log.New(os.Stdout, "[server] ", log.LstdFlags),
  }
}
func (s *Server) Start() error {
  s.logger.Printf("Starting server on %s", s.addr)
  return http.ListenAndServe(s.addr, s.handler)
}

How to build this

Go

engine := kazari.New(kazari.WithCollapsible(kazari.CollapsibleConfig{
	LineThreshold: 12, PreviewLines: 6, DefaultCollapsed: true,
}))
html, err := engine.Render(code, kazari.Options{Lang: "go", Title: "server.go"})

Per-block threshold override

Overrides the engine threshold for a single block via collapseThreshold=N in the meta string.

package main
import (
  "fmt"
  "net/http"
  "log"
  "encoding/json"
  "os"
)
type Server struct {
  addr    string
  handler http.Handler
  logger  *log.Logger
}
func NewServer(addr string) *Server {
  return &Server{
    addr:    addr,
    handler: http.DefaultServeMux,
    logger:  log.New(os.Stdout, "[server] ", log.LstdFlags),
  }
}
func (s *Server) Start() error {
  s.logger.Printf("Starting server on %s", s.addr)
  return http.ListenAndServe(s.addr, s.handler)
}

How to build this

go title="server.go" collapseThreshold=20

threshold := 20
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "server.go",
	Collapse: &kazari.CollapseOptions{Threshold: &threshold},
})

Range-based (imports collapsed)

Hides a selected line range behind an expandable summary to keep the main logic visible.

1
package main
2
6 collapsed lines
3
import (
4
  "fmt"
5
  "os"
6
  "strings"
7
  "strconv"
8
)
9
10
func main() {
11
  args := os.Args[1:]
12
  if len(args) == 0 {
13
    fmt.Println("Usage: calc <expr>")
14
    os.Exit(1)
15
  }
16
17
  result := evaluate(strings.Join(args, " "))
18
  fmt.Printf("= %v\n", result)
19
}
20
21
func evaluate(expr string) float64 {
22
  val, _ := strconv.ParseFloat(expr, 64)
23
  return val
24
}

How to build this

go title="calc.go" showLineNumbers collapse={3-8}

html, err := engine.RenderWithMeta(code, `go title="calc.go" showLineNumbers collapse={3-8}`)

Multiple ranges

Collapses multiple independent ranges so distant supporting sections stay compact.

1
package api
2
5 collapsed lines
3
import (
4
  "encoding/json"
5
  "net/http"
6
  "log"
7
)
8
5 collapsed lines
9
type Response struct {
10
  Status  int
11
  Message string
12
  Data    interface{}
13
}
14
15
func handleGet(w http.ResponseWriter, r *http.Request) {
16
  data := fetchData(r.URL.Query())
17
  json.NewEncoder(w).Encode(Response{Status: 200, Message: "OK", Data: data})
18
}
19
20
func handlePost(w http.ResponseWriter, r *http.Request) {
21
  var body map[string]interface{}
22
  json.NewDecoder(r.Body).Decode(&body)
23
  result := processData(body)
24
  json.NewEncoder(w).Encode(Response{Status: 201, Message: "Created", Data: result})
25
}

How to build this

go title="api.go" showLineNumbers collapse={3-7,9-13}

html, err := engine.RenderWithMeta(code, meta)

Threshold + markers (gap indicators)

Shows omitted regions as gap indicators while preserving important marked lines around them.

1
package main
2
3
import (
4
  "fmt"
5
  "net/http"
6
  "log"
⋮Lines hidden
7
  "encoding/json"
8
  "os"
9
  "strings"
10
  "strconv"
11
)
12
13
func init() {
14
  log.SetFlags(log.LstdFlags | log.Lshortfile)
15
}
16
17
func main() {
18
  mux := http.NewServeMux()
19
  mux.HandleFunc("/health", healthHandler)
20
  mux.HandleFunc("/api/data", dataHandler)
21
  log.Fatal(http.ListenAndServe(":8080", mux))
22
}
23
24
func healthHandler(w http.ResponseWriter, r *http.Request) {
25
  w.WriteHeader(http.StatusOK)
26
  fmt.Fprint(w, "ok")
27
}
28
29
func dataHandler(w http.ResponseWriter, r *http.Request) {
30
  data := map[string]interface{}{"status": "success", "count": 42}
31
  json.NewEncoder(w).Encode(data)
32
}

How to build this

Go

enabled := true
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "server.go", LineNumbers: &enabled,
	LineMarkers: []kazari.LineMarker{{
		Type: kazari.MarkerIns,
		Lines: []kazari.Range{{Start: 10, End: 11}},
	}},
})

collapsible-start (re-collapsible, summary above)

Places the expansion summary above a range that can be collapsed again after opening.

1
package main
2
6 collapsed lines
3
import (
4
  "fmt"
5
  "os"
6
  "strings"
7
  "strconv"
8
)
9
10
func main() {
11
  args := os.Args[1:]
12
  if len(args) == 0 {
13
    fmt.Println("Usage: calc <expr>")
14
    os.Exit(1)
15
  }
16
17
  result := evaluate(strings.Join(args, " "))
18
  fmt.Printf("= %v\n", result)
19
}
20
21
func evaluate(expr string) float64 {
22
  val, _ := strconv.ParseFloat(expr, 64)
23
  return val
24
}

How to build this

go title="calc.go" showLineNumbers collapse={3-8} collapseStyle="collapsible-start"

enabled := true
style := kazari.CollapseCollapsibleStart
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "calc.go", LineNumbers: &enabled,
	Collapse: &kazari.CollapseOptions{
		Ranges: []kazari.Range{{Start: 3, End: 8}},
		Style:  &style,
	},
})

collapsible-end (re-collapsible, summary below)

Places the expansion summary below a range that can be collapsed again after opening.

1
package main
2
6 collapsed lines
3
import (
4
  "fmt"
5
  "os"
6
  "strings"
7
  "strconv"
8
)
9
10
func main() {
11
  args := os.Args[1:]
12
  if len(args) == 0 {
13
    fmt.Println("Usage: calc <expr>")
14
    os.Exit(1)
15
  }
16
17
  result := evaluate(strings.Join(args, " "))
18
  fmt.Printf("= %v\n", result)
19
}
20
21
func evaluate(expr string) float64 {
22
  val, _ := strconv.ParseFloat(expr, 64)
23
  return val
24
}

How to build this

go title="calc.go" showLineNumbers collapse={3-8} collapseStyle="collapsible-end"

enabled := true
style := kazari.CollapseCollapsibleEnd
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "calc.go", LineNumbers: &enabled,
	Collapse: &kazari.CollapseOptions{
		Ranges: []kazari.Range{{Start: 3, End: 8}},
		Style:  &style,
	},
})

collapsible-auto (auto start/end based on position)

Chooses the summary position from the collapsed range's location within the code block.

1
package main
2
6 collapsed lines
3
import (
4
  "fmt"
5
  "os"
6
  "strings"
7
  "strconv"
8
)
9
10
func main() {
11
  args := os.Args[1:]
12
  if len(args) == 0 {
13
    fmt.Println("Usage: calc <expr>")
14
    os.Exit(1)
15
  }
16
17
  result := evaluate(strings.Join(args, " "))
18
  fmt.Printf("= %v\n", result)
19
}
5 collapsed lines
20
21
func evaluate(expr string) float64 {
22
  val, _ := strconv.ParseFloat(expr, 64)
23
  return val
24
}

How to build this

go title="calc.go" showLineNumbers collapse={3-8,20-24} collapseStyle="collapsible-auto"

enabled := true
style := kazari.CollapseCollapsibleAuto
html, err := engine.Render(code, kazari.Options{
	Lang: "go", Title: "calc.go", LineNumbers: &enabled,
	Collapse: &kazari.CollapseOptions{
		Ranges: []kazari.Range{{Start: 3, End: 8}, {Start: 20, End: 24}},
		Style:  &style,
	},
})

Formats and Groups

Specialized formats, regex matching, diffs, and tabbed groups.

Mermaid Pass-Through (raw code for Mermaid.js)

Passes Mermaid source through unchanged so a diagram renderer can process it later.

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E

How to build this

mermaid

html, err := engine.Render(code, kazari.Options{Lang: "mermaid"})

Regex Markers

Marks text that matches regular expressions, including inserted and deleted match styles.

1
func fetchUsers() ([]User, error) {
2
  resp, err := http.Get("/api/users")
3
  if err != nil {
4
    return nil, fmt.Errorf("fetchUsers failed: %w", err)
5
  }
6
  defer resp.Body.Close()
7
  var users []User
8
  json.NewDecoder(resp.Body).Decode(&users)
9
  return users, nil
10
}

How to build this

go title="regex-markers.go" showLineNumbers /err\b/ ins=/func\s+\w+/ del=/fmt\.Errorf/

html, err := engine.RenderWithMeta(code, meta)

Regex Capture Group (/ye(s|p)/ marks only "s" or "p")

Highlights only the captured subgroup of a regular-expression match instead of the full match.

haystack = "yes"
confirm = "yep"
reject = "nope"

How to build this

python title="capture_group.py" /ye(s|p)/

html, err := engine.RenderWithMeta(code, `python title="capture_group.py" /ye(s|p)/`)

Hybrid Diff + Syntax Highlighting (diff lang="go")

Combines diff prefixes with syntax highlighting from the underlying source language.

1
import (
2
  "fmt"
3
  "log"
4
  "os"
5
)
6
7
func main() {
8
  fmt.Println("hello")
9
  log.Println("hello")
10
}

How to build this

diff lang="go" title="hybrid-diff.go" showLineNumbers

enabled := true
html, err := engine.Render(code, kazari.Options{
	Lang: "diff", DiffLang: "go",
	Title: "hybrid-diff.go", LineNumbers: &enabled,
})

Code Group (tabbed code blocks via Goldmark)

Presents related language examples as an accessible tabbed group generated from Markdown.

package main
import "fmt"
func main() {
  fmt.Println("Hello from Go!")
}

def main():
    print("Hello from Python!")
if __name__ == "__main__":
    main()

function main() {
  console.log("Hello from JavaScript!");
}
main();

How to build this

Markdown

:::code-group

```go title="main.go"
package main

import "fmt"

func main() {
	fmt.Println("Hello from Go!")
}
```

```python title="main.py"
def main():
    print("Hello from Python!")

if __name__ == "__main__":
    main()
```

```javascript title="index.js"
function main() {
  console.log("Hello from JavaScript!");
}

main();
```

:::

Code Group Tab Sync (tabs synced across groups)

Synchronizes matching tabs across separate code groups that share the same key.

go get github.com/example/pkg

pip install example-pkg

npm install example-pkg

import "github.com/example/pkg"

import example_pkg

const pkg = require('example-pkg');

Linux

sudo apt install build-essential

Windows

winget install Microsoft.VisualStudio.BuildTools

macOS

brew install gcc

How to build this

Markdown

:::code-group sync="language"

```go
go get github.com/example/pkg
```

```python
pip install example-pkg
```

```javascript
npm install example-pkg
```

:::

<p>Select a language above and the group below syncs automatically.</p>

:::code-group sync="language"

```go
import "github.com/example/pkg"
```

```python
import example_pkg
```

```javascript
const pkg = require('example-pkg');
```

:::

<p>This group uses a different sync key (<code>sync="platform"</code>) and syncs independently.</p>

:::code-group sync="platform"

```bash title="Linux"
sudo apt install build-essential
```

```powershell title="Windows"
winget install Microsoft.VisualStudio.BuildTools
```

```bash title="macOS"
brew install gcc
```

:::

ANSI Terminal Output

Renders ANSI SGR escape sequences into styled HTML with full color and text decoration support.

ANSI Escape Sequences (parsed SGR codes)

Converts ANSI SGR escape sequences into styled terminal colors and text treatments.

server.log

1
INFO  Server started on :8080
2
WARN  Cache miss for key "user:42"
3
ERROR Connection refused: db.example.com:5432
4
2024-01-15 10:30:45 DEBUG Retrying in 3s...

How to build this

ansi title="server.log" showLineNumbers

html, err := engine.RenderWithMeta(code, `ansi title="server.log" showLineNumbers`)

ANSI Git Diff (16-color foreground + background)

Renders git diff output with bold headers, cyan hunk markers, and red/green background strips for deleted and inserted lines.

git diff

1
diff --git a/api/handler.go b/api/handler.go
2
index 4e9d2a1..7c3f8b2 100644
3
--- a/api/handler.go
4
+++ b/api/handler.go
5
@@ -12,7 +12,9 @@ func ServeHTTP(w http.ResponseWriter, r *http.Request) {
6
    ctx := r.Context()
7
-   log.Printf("request: %s %s", r.Method, r.URL.Path)
8
+   spanCtx, span := tracer.Start(ctx, "ServeHTTP")
9
+   defer span.End()
10
+   log.Printf("trace: %s %s", r.Method, r.URL.Path)
11
    handler(w, r.WithContext(ctx))

How to build this

ansi title="git diff" showLineNumbers

html, err := engine.RenderWithMeta(code, `ansi title="git diff" showLineNumbers`)

ANSI Truecolor + Styles (24-bit RGB, italic, strikethrough, underline)

Demonstrates 24-bit truecolor foregrounds alongside italic, bold, strikethrough, and underline text styles.

cargo build

1
WARNING cargo build
2
  Compiling tokio v1.36.0
3
  deprecated: use tokio::task::spawn_local instead
4
ERROR[E0308] mismatched types
5
  expected &str
6
     found String
7
For more information: rustc --explain E0308

How to build this

ansi title="cargo build" showLineNumbers

html, err := engine.RenderWithMeta(code, `ansi title="cargo build" showLineNumbers`)

ANSI 256-Color Palette (cube, grayscale, background)

Exercises all three 256-color zones: the standard palette, the 6x6x6 color cube, and the grayscale ramp.

ls --color

1
/home/user/project
2
drwxr-xr-x  2 user user  4096 src/
3
drwxr-xr-x  2 user user  4096 tests/
4
-rwxr-xr-x  1 user user  8192 build.sh
5
-rw-r--r--  1 user user   512 ERROR.log
6
-rw-r--r--  1 user user  2048 config.yaml
7
-rw-r--r--  1 user user    64 .gitignore
8
-rw-r--r--  1 user user  1024 README.md
9
 Total: 7 items

How to build this

ansi title="ls --color" showLineNumbers

html, err := engine.RenderWithMeta(code, `ansi title="ls --color" showLineNumbers`)

Themes and Customization

Per-block themes, generated adjustments, and scoped CSS output.

Per-Block Theme Override (default vs dracula)

Selects an alternate theme for one block without changing the rest of the page.

1
func main() {
2
  fmt.Println("Same code, different theme")
3
}

1
func main() {
2
  fmt.Println("Same code, different theme")
3
}

How to build this

go title="default theme" showLineNumbers
go title="theme=dracula" showLineNumbers theme="dracula"

defaultHTML, err := engine.RenderWithMeta(code, `go title="default theme" showLineNumbers`)
draculaHTML, err := engine.RenderWithMeta(code, `go title="theme=dracula" showLineNumbers theme="dracula"`)

Per-Block Theme Override (dual: dracula + github-light)

Gives one block its own light and dark themes, switched by the page's dark mode toggle. Inverted here on purpose: dracula in light mode, github-light in dark mode.

1
func main() {
2
  fmt.Println("Same code, different theme")
3
}

How to build this

go title="theme=dracula,github-light" showLineNumbers theme="dracula,github-light"

html, err := engine.RenderWithMeta(code, `go showLineNumbers theme="dracula,github-light"`)

Theme Customizer (dark BG changed to #1a1b26)

Adjusts resolved theme colors through a callback before Kazari generates the CSS variables.

fmt.Println("Custom dark BG: #1a1b26")

How to build this

Go

engine := kazari.New(
	kazari.WithThemeCSSRoot(".kazari-customizer"),
	kazari.WithThemeCustomizer(func(name string, colors kazari.ThemeInfo) kazari.ThemeInfo {
		if name == "github-dark" { colors.BG = "#1a1b26" }
		return colors
	}),
)

Theme Adjustments (OKLCH teal tint)

Applies an OKLCH tint to generated theme colors while preserving their visual relationships.

fmt.Println("Backgrounds tinted toward teal in OKLCH space")

How to build this

Go

hue, chroma := 195.0, 0.04
engine := kazari.New(
	kazari.WithThemeCSSRoot(".kazari-tinted"),
	kazari.WithThemeAdjustments(kazari.ThemeAdjustments{
		Hue: &hue, Chroma: &chroma,
	}),
)

Scoped CSS Root (.kazari-scoped)

Emits theme variables beneath a custom selector so Kazari styles stay inside a chosen container.

fmt.Println("CSS vars scoped to .kazari-scoped")

How to build this

Go

engine := kazari.New(kazari.WithThemeCSSRoot(".kazari-scoped"))
css := engine.CSS()

Per-Block Theme Toggle

Adds a per-block toggle button that lets readers switch an individual code block between light and dark themes independently of the page.

func main() {
    fmt.Println("Toggle this block's theme!")
}

const greeting = "Each block toggles independently";
console.log(greeting);

How to build this

Go

engine := kazari.New(
    kazari.WithHighlighter(highlighter),
    kazari.WithThemeToggle(true),
)
html, err := engine.Render(code, kazari.Options{Lang: "go", Title: "theme-toggle.go"})

Localization and Assets

Localized controls and consumer-provided file icon resolution.

Locale: French (WithLocale("fr-FR"))

Localizes built-in copy and fullscreen controls through the engine's locale setting.

fmt.Println("Bonjour le monde !")

How to build this

Go

engine := kazari.New(kazari.WithLocale("fr-FR"))
html, err := engine.Render(code, kazari.Options{Lang: "go", Title: "locale-fr.go"})

File Icons (custom resolver)

Resolves a custom icon from each title's file extension and places it in the frame toolbar.

fmt.Println("Go")

print("Python")

console.log("JS")

fn main() {}

How to build this

Go

engine := kazari.New(kazari.WithFileIconResolver(func(ext string) string {
	icons := map[string]string{"go": "🔵", "py": "🐍", "js": "🟡", "rs": "🦀"}
	return fmt.Sprintf("<span class=\"kz-file-icon\">%s</span>", icons[ext])
}))

Language Icons: Icon Only (LangIconOnly)

Replaces the language text badge with a CSS icon slot that the consumer styles via [data-lang] selectors. Color SVG icons are available from Devicon.

fmt.Println("Go")

print("Python")

console.log("JS")

How to build this

Go

engine := kazari.New(kazari.WithLanguageIconMode(kazari.LangIconOnly))

Language Icons: Icon + Text (LangIconAndText)

Shows a language icon before the text label, giving both a visual cue and a readable name. Color SVG icons are available from Devicon.

fmt.Println("Go")

print("Python")

console.log("JS")

How to build this

Go

engine := kazari.New(kazari.WithLanguageIconMode(kazari.LangIconAndText))

Output Panel

Separate command output from highlighted source code.

Basic Output Panel

Separates terminal commands from their output in a linked panel below the highlighted code.

pwd
ls -la

/usr/home/boba-tan
total 24
drwxr-xr-x  3 boba boba 4096 Jun 28 14:30 .

How to build this

bash withOutput

html, err := engine.Render(code, kazari.Options{
	Lang:       "bash",
	WithOutput: boolPtr(true),
})

Editor Frame Output

Attaches program output beneath an editor-framed source block with an explicit file title.

package main
import "fmt"
func main() {
  fmt.Println("Hello, Kazari!")
  fmt.Println("Output panels are here.")
}

Hello, Kazari!
Output panels are here.

How to build this

go withOutput

html, err := engine.Render(code, kazari.Options{
	Lang:       "go",
	WithOutput: boolPtr(true),
})

Collapsed Output

Starts the output panel hidden so readers can focus on the code and reveal output on demand.

echo "Build complete"

Build complete

How to build this

bash withOutput outputCollapsed

html, err := engine.Render(code, kazari.Options{
	Lang:            "bash",
	WithOutput:      boolPtr(true),
	OutputCollapsed: boolPtr(true),
})

Custom Label

Replaces the default toggle label with a descriptive name that fits the example context.

node index.js

Server listening on port 3000

How to build this

bash withOutput outputLabel="Run result"

html, err := engine.Render(code, kazari.Options{
	Lang:        "bash",
	WithOutput:  boolPtr(true),
	OutputLabel: "Run result",
})

Post-Render Callbacks

Extend rendered output with WithPostRender callbacks.

TODO/FIXME Badges

Injects warning badges next to TODO and FIXME comments using a WithPostRender callback.

package main
import "net/http"
func main() {
  // TODO  add TLS configuration
  http.HandleFunc("/", handler)
  // FIXME  this ignores the returned error
  http.ListenAndServe(":8080", nil)
}

How to build this

Go

todoRe := regexp.MustCompile(`(>[^<]*?)(TODO:)`)
fixmeRe := regexp.MustCompile(`(>[^<]*?)(FIXME:)`)

todoCallback := func(html string, info kazari.BlockInfo) string {
	html = todoRe.ReplaceAllString(html,
		`${1}<span class="kz-todo-badge">TODO</span> `)
	html = fixmeRe.ReplaceAllString(html,
		`${1}<span class="kz-fixme-badge">FIXME</span> `)
	return html
}

engine := kazari.New(
	kazari.WithHighlighter(hl),
	kazari.WithPostRender(todoCallback),
)

Figure Caption

Wraps the code block in a figure element with a caption derived from the block title.

package config
type Server struct {
  Host string
  Port int
  TLS  bool
}

config.go

How to build this

Go

figcaptionCallback := func(html string, info kazari.BlockInfo) string {
	if info.Title == "" {
		return html
	}
	return fmt.Sprintf(
		"<figure>%s<figcaption>%s</figcaption></figure>",
		html, info.Title,
	)
}

engine := kazari.New(
	kazari.WithHighlighter(hl),
	kazari.WithPostRender(figcaptionCallback),
)

No examples found

Frames

Editor Frame (explicit title)

Editor Frame (file name extracted from comment)

Terminal Frame (auto-detected from language)

Terminal Frame (with title)

Terminal Frame (minimal dots)

Go

No Frame

Layout

Line Numbers

Line Numbers (custom start)

Word Wrap (long lines wrap, indent preserved)

Word Wrap (preserveIndent=false)

Word Wrap (hangingIndent=4)

Markers and Focus

Line Markers (mark, ins, del)

Labeled Range

Labeled Range (no line numbers)

Labeled Range (numbered)

Focus Lines

Inline Markers

Inline Markers (single quotes)

Combined (markers + inline + focus)

Links

Inline Links

Links + Inline Markers

Collapsible Sections

Threshold-based (auto-collapses long blocks)

Go

Per-block threshold override

Range-based (imports collapsed)

Multiple ranges

Threshold + markers (gap indicators)

Go

collapsible-start (re-collapsible, summary above)

collapsible-end (re-collapsible, summary below)

collapsible-auto (auto start/end based on position)

Formats and Groups

Mermaid Pass-Through (raw code for Mermaid.js)

Regex Markers

Regex Capture Group (/ye(s|p)/ marks only "s" or "p")

Hybrid Diff + Syntax Highlighting (diff lang="go")

Code Group (tabbed code blocks via Goldmark)

Markdown

Code Group Tab Sync (tabs synced across groups)

Markdown

ANSI Terminal Output

ANSI Escape Sequences (parsed SGR codes)

ANSI Git Diff (16-color foreground + background)

ANSI Truecolor + Styles (24-bit RGB, italic, strikethrough, underline)

ANSI 256-Color Palette (cube, grayscale, background)

Themes and Customization

Per-Block Theme Override (default vs dracula)

Per-Block Theme Override (dual: dracula + github-light)

Theme Customizer (dark BG changed to #1a1b26)

Go

Theme Adjustments (OKLCH teal tint)

Go

Scoped CSS Root (.kazari-scoped)

Go

Per-Block Theme Toggle

Go

Localization and Assets

Locale: French (WithLocale("fr-FR"))

Go

File Icons (custom resolver)

Go

Language Icons: Icon Only (LangIconOnly)

Go

Language Icons: Icon + Text (LangIconAndText)

Go

Output Panel

Basic Output Panel

Editor Frame Output

Collapsed Output

Custom Label

Post-Render Callbacks

TODO/FIXME Badges

Go