code-line-style

Named visual treatments for code blocks in Quarto

A Quarto extension that decorates code blocks with named styles — diff, emphasis, custom — applied to regions (lines, columns, regex tokens) across steps (revealjs fragments).

Diff is one preset. The engine doesn’t know what a diff is.

Install

quarto add EmilHvitfeldt/quarto-code-line-style

Then in your document’s YAML:

filters:
  - code-line-style

Quick taste

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))

Examples

Each embedded deck demonstrates one concept end-to-end. Click into a frame and use → / ← to walk through progressive specs. Each title links to the standalone page.

diff — the 5 built-in styles

emphasis — focus / dim / strong

custom-styles — define your own

transitions — timing, modes, presence

annotations — margin labels

code-line-numbers — emulating the built-in

html-format — outside revealjs

Authoring forms

Compact attribute (any code block)

{.r code-line-style="add:2-3, rem:5"}                # static
{.r code-line-style="|hi:2|rem:3,add:4-7|hi:8"}      # progressive

YAML cell option (executable chunks)

#| code-line-style:
#|   preset: emphasis
#|   styles:
#|     warn: { bg: "#fff3bf", gutter: "#f08c00", marker: "!" }
#|   transition: { duration: 400, mode: slide }
#|   steps:
#|     - focus: 3
#|     - warn: { line: 4, match: "bug", label: "this one" }

Concepts

  • Style — name → CSS class (preset) or inline primitives (bg, fg, gutter, opacity, weight, marker, duration, easing).
  • Region — at: 2-3, at: { line, label }, or short keys: add: 2-3.
  • Step — top-level list = reveal.js fragments. Single object = static.

Accessibility

  • Transitions wrap @media (prefers-reduced-motion: reduce).
  • Every style ships a gutter marker character so colorblind / monochrome viewers can still read the decoration.
  • Step labels are announced via an aria-live region.

Debugging

Append ?cls-debug=1 to any rendered URL to surface inline error banners above blocks with malformed specs, unknown style names, or out-of-range line numbers.