Line Decorations

Four fields on CodeToHTMLOptions apply CSS classes to specific lines without magic comments.

Line ranges

1
html, err := h.CodeToHTML(ctx, code, nuri.CodeToHTMLOptions{
2
  Lang:           "go",
3
  Theme:          "github-dark",
4
  HighlightLines: []nuri.LineRange{nuri.Range(3, 5), nuri.Range(10, 10)},
5
  FocusLines:     nuri.Lines(1, 2, 3),
6
  InsertedLines:  nuri.Lines(7),
7
  DeletedLines:   nuri.Lines(8),
8
})

Constructors

• nuri.Range(start, end) returns a LineRange covering lines start through end (1-based, inclusive)
• nuri.Lines(nums...) returns a []LineRange where each number becomes a single-line range

Line numbers are 1-based throughout.

Decoration classes

Highlight

1
html, err := h.CodeToHTML(ctx, code, nuri.CodeToHTMLOptions{
2
  Lang:           "go",
3
  Theme:          "github-dark",
4
  HighlightLines: []nuri.LineRange{nuri.Range(2, 4)},
5
})

Lines 2, 3, and 4 get class highlighted. This is the same class produced by [!code highlight] and transformers.Meta().

Focus

1
html, err := h.CodeToHTML(ctx, code, nuri.CodeToHTMLOptions{
2
  Lang:       "go",
3
  Theme:      "github-dark",
4
  FocusLines: nuri.Lines(3, 4, 5),
5
})

When FocusLines is non-empty:

• The <pre> element gets class has-focused
• Lines in the range get class focused
• All other lines get class dimmed

Style the dimmed lines with reduced opacity for a spotlight effect:

1
.nuri.has-focused .line:not(.focused) {
2
  opacity: 0.3;
3
  transition: opacity 0.3s;
4
}
5
.nuri.has-focused:hover .line:not(.focused) {
6
  opacity: 1;
7
}

Diff

1
html, err := h.CodeToHTML(ctx, code, nuri.CodeToHTMLOptions{
2
  Lang:          "go",
3
  Theme:         "github-dark",
4
  InsertedLines: nuri.Lines(3),
5
  DeletedLines:  nuri.Lines(5),
6
})

• Inserted lines get classes diff and add
• Deleted lines get classes diff and remove

These are the same classes produced by [!code ++] and [!code --].

1
.nuri .line.diff.add {
2
  background-color: rgba(16, 185, 129, 0.14);
3
}
4
.nuri .line.diff.remove {
5
  background-color: rgba(244, 63, 94, 0.14);
6
}

Interaction with transformers

Decorations and the Notation transformer produce the same CSS classes. Both can be used in the same call. A line matched by both HighlightLines and [!code highlight] gets the class once (AddClass is idempotent).

The Meta transformer also uses HighlightLines internally. It appends parsed ranges to CodeToHTMLOptions.HighlightLines during its Preprocess hook.

Next steps

• Custom Languages & Themes to register custom grammars and themes
• Transformers for notation comments and meta string highlighting