Line Markers

Line markers highlight entire lines with a colored background and a left-edge accent border. Three marker types are available: mark (neutral highlight), ins (insertion), and del (deletion).

Mark lines

Add line numbers or ranges in curly braces after the language:

1
```go {2, 4-6}
2
func main() {
3
    name := "world"
4
    greeting := greet(name)
5
    fmt.Println(greeting)
6
    fmt.Println("done")
7
    fmt.Println("bye")
8
}
9
```

1
func main() {
2
    name := "world"
3
    greeting := greet(name)
4
    fmt.Println(greeting)
5
    fmt.Println("done")
6
    fmt.Println("bye")
7
}

→ Lines 2, 4, 5, and 6 have a yellow background with a left accent border.

Lines are 1-based and inclusive. Comma-separated values accept single numbers and ranges. A range like 4-6 covers lines 4, 5, and 6.

Insertion and deletion markers

Use ins= and del= to mark lines as added or removed. Insertion lines show a green background with a + indicator. Deletion lines show red with a - indicator.

1
```go title="diff.go" showLineNumbers {3} del={5-7} ins={9-11}
2
func process(items []string) ([]string, error) {
3
    var results []string
4
    for _, item := range items {
5
        val := item
6
        result, err := transform(val)
7
        if err != nil {
8
            return nil, err
9
        }
10
        cleaned := strings.TrimSpace(item)
11
        result := convert(cleaned)
12
        results = append(results, result)
13
    }
14
    return results, nil
15
}
16
```

1
func process(items []string) ([]string, error) {
2
    var results []string
3
    for _, item := range items {
4
        val := item
5
        result, err := transform(val)
6
        if err != nil {
7
            return nil, err
8
        }
9
        cleaned := strings.TrimSpace(item)
10
        result := convert(cleaned)
11
        results = append(results, result)
12
    }
13
    return results, nil
14
}

→ Line 3 is highlighted (mark), lines 5-7 show red deletion markers, and lines 9-11 show green insertion markers.

The add= and rem= aliases work identically to ins= and del=.

Labeled ranges

Add a label to any marker by placing a quoted string before the colon inside the braces. The label appears as a pill badge on the first line of each range.

1
```go showLineNumbers {"Config":2-4} ins={"Added":7-9}
2
func NewServer(opts ...Option) *Server {
3
    cfg := defaultConfig()
4
    cfg.apply(opts)
5
    cfg.validate()
6
7
    return &Server{
8
        router: chi.NewRouter(),
9
        logger: cfg.logger,
10
        port:   cfg.port,
11
    }
12
}
13
```

1
func NewServer(opts ...Option) *Server {
2
    cfg := defaultConfig()
3
    cfg.apply(opts)
4
    cfg.validate()
5
6
    return &Server{
7
        router: chi.NewRouter(),
8
        logger: cfg.logger,
9
        port:   cfg.port,
10
    }
11
}

→ Lines 2-4 have a "Config" badge, lines 7-9 have an "Added" badge with insertion styling.

Both double and single quotes work for labels. On labeled ins/del lines, the label badge replaces the +/- diff indicator.

Compact numeric labels work well for step-by-step annotations:

1
```go title="handler.go" showLineNumbers {"1":2-3} del={"2":5-6} ins={"3":8-9}
2
func handle(w http.ResponseWriter, r *http.Request) {
3
    ctx := r.Context()
4
    id := chi.URLParam(r, "id")
5
6
    data, err := fetchByID(id)
7
    if err != nil { http.Error(w, err.Error(), 500); return }
8
9
    result, err := svc.Process(ctx, id)
10
    if err != nil { http.Error(w, "processing failed", 500); return }
11
12
    json.NewEncoder(w).Encode(result)
13
}
14
```

1
func handle(w http.ResponseWriter, r *http.Request) {
2
    ctx := r.Context()
3
    id := chi.URLParam(r, "id")
4
5
    data, err := fetchByID(id)
6
    if err != nil { http.Error(w, err.Error(), 500); return }
7
8
    result, err := svc.Process(ctx, id)
9
    if err != nil { http.Error(w, "processing failed", 500); return }
10
11
    json.NewEncoder(w).Encode(result)
12
}

→ Three labeled ranges show a step-by-step code evolution: step 1 (mark), step 2 (deleted), step 3 (inserted).

Overlap priority

When multiple marker types overlap on the same line, the highest-priority marker wins:

For example, {1-10} ins={5} marks lines 1-4 and 6-10 as mark, but line 5 becomes ins. Labels from a lower-priority marker are cleared when a higher-priority marker overwrites the line.

Go API

Use the Options.LineMarkers field to set markers programmatically:

1
html, err := engine.Render(code, kazari.Options{
2
    Lang: "go",
3
    LineMarkers: []kazari.LineMarker{
4
        {Type: kazari.MarkerMark, Lines: []kazari.Range{{Start: 3, End: 5}}},
5
        {Type: kazari.MarkerIns, Lines: []kazari.Range{{Start: 8, End: 10}}, Label: "New"},
6
        {Type: kazari.MarkerDel, Lines: []kazari.Range{{Start: 6, End: 6}}},
7
    },
8
})

Syntax reference

CSS variables

See the CSS Variables reference for the complete list.

Edge cases

• The left accent border uses box-shadow: inset rather than CSS border-left to avoid layout shift.
• Labeled lines have a stronger background than unlabeled lines of the same type (--kz-label-mark-bg vs --kz-mark-bg).
• On highlighted lines, line numbers become more prominent (brighter color, higher opacity). See Line Numbers for details.
• Line markers are purely visual. They do not affect the copied code.