Focus Lines

Focus lines dim everything except the specified lines, drawing attention to the code that matters. Non-focused lines fade to reduced opacity while focused lines remain fully visible.

Focus a range

Add focus={N-M} to the meta string:

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

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
    }
7
    return nil
8
}

→ Lines 3-5 render at full opacity. All other lines fade to reduced opacity.

The syntax accepts comma-separated line numbers and ranges, the same format as line markers: focus={1-3,7,10-12}.

Multiple ranges

Focus non-contiguous sections of code:

1
```go title="server.go" showLineNumbers focus={2-3,7-8}
2
func main() {
3
    cfg := loadConfig()
4
    db := connectDB(cfg)
5
    defer db.Close()
6
7
    router := chi.NewRouter()
8
    router.Get("/health", healthHandler)
9
    router.Get("/api/users", usersHandler(db))
10
11
    http.ListenAndServe(":8080", router)
12
}
13
```

1
func main() {
2
    cfg := loadConfig()
3
    db := connectDB(cfg)
4
    defer db.Close()
5
6
    router := chi.NewRouter()
7
    router.Get("/health", healthHandler)
8
    router.Get("/api/users", usersHandler(db))
9
10
    http.ListenAndServe(":8080", router)
11
}

→ Lines 2-3 and 7-8 render at full opacity. All other lines are dimmed.

Combined with markers

Focus and line markers are independent. Both can appear on the same block. Non-focused lines are always dimmed, including lines with markers.

A marked line in the focus set retains full opacity. A marked line outside the focus set is dimmed along with all other non-focused lines.

1
```go title="combined.go" showLineNumbers {4-5} ins={10-12} del={6-8} focus={4-5,10-12}
2
func main() {
3
    ctx := context.Background()
4
5
    db, err := sql.Open("postgres", dsn)
6
    if err != nil { log.Fatal(err) }
7
    defer db.Close()
8
    cache := newCache()
9
    cache.Warm(ctx)
10
11
    svc := newService(db, cache)
12
    srv := newServer(svc, db)
13
    srv.Run(ctx)
14
}
15
```

1
func main() {
2
    ctx := context.Background()
3
4
    db, err := sql.Open("postgres", dsn)
5
    if err != nil { log.Fatal(err) }
6
    defer db.Close()
7
    cache := newCache()
8
    cache.Warm(ctx)
9
10
    svc := newService(db, cache)
11
    srv := newServer(svc, db)
12
    srv.Run(ctx)
13
}

→ Lines 4-5 show highlighted backgrounds at full opacity. Lines 6-8 have deletion markers but are dimmed (outside the focus set). Lines 10-12 have insertion markers at full opacity.

Configuration

Go API equivalent via the Options.FocusLines field:

1
html, err := engine.Render(code, kazari.Options{
2
    Lang:       "go",
3
    FocusLines: []kazari.Range{{Start: 3, End: 5}},
4
})

There is no engine-level default for focus. It is always a per-block setting.

CSS variables

Lower values create more contrast between focused and unfocused lines.

See the CSS Variables reference for the complete list.

Edge cases

• Focus is purely visual. It does not affect the copied code.
• Focus can be combined with inline markers. Inline highlights on dimmed lines are dimmed along with the rest of the line.
• Line numbers on dimmed lines inherit the reduced opacity.