# Highlight Gallery


# Highlight Styles

Highlights draw attention to specific regions of the terminal during playback. Each style creates a different visual effect. All examples below target a cell region and auto-play with loop.


## Style: Outline

A simple 2px border around the target region. Highlighted text: `Found 4 modules`


<img src="../termshow/hl-style-outline/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-outline" />

Terminal recording: hl-style-outline (requires JavaScript for playback)


## Style: Underline

A solid line beneath the target -- useful for drawing attention to specific text without obscuring it. Highlighted text: `src/core.py:42 -- unused import`


<img src="../termshow/hl-style-underline/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-underline" />

Terminal recording: hl-style-underline (requires JavaScript for playback)


## Style: Underline (Wavy)

A wavy underline, similar to spell-check or error indicators in code editors. Great for highlighting errors. Highlighted text: `TypeError: unsupported operand type(s)`


<img src="../termshow/hl-style-underline-wavy/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-underline-wavy" />

Terminal recording: hl-style-underline-wavy (requires JavaScript for playback)


## Style: Background

A subtle translucent background fill behind the target region. Highlighted text: `version = "2.1.0"`


<img src="../termshow/hl-style-background/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-background" />

Terminal recording: hl-style-background (requires JavaScript for playback)


## Style: Spotlight

Background fill with an outer glow, making the target "pop" against the surrounding content. Highlighted text: `✨ Build complete! Output: _site/`


<img src="../termshow/hl-style-spotlight/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-spotlight" />

Terminal recording: hl-style-spotlight (requires JavaScript for playback)


## Style: Glow

An animated neon-style glow around the target. This example also uses `pulse: true` for a breathing effect. Highlighted text: `v0.9.0`


<img src="../termshow/hl-style-glow/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-glow" />

Terminal recording: hl-style-glow (requires JavaScript for playback)


## Style: Box

Combines a border with a translucent fill -- the classic "selection rectangle" look. Highlighted text: `✓ 48 passed` and `✓ Coverage: 94%`


<img src="../termshow/hl-style-box/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-box" />

Terminal recording: hl-style-box (requires JavaScript for playback)


## Style: Badge (Before)

Border with a labeled badge above the target region. Use `badge_text` to set the label. Highlighted text: `✨ Live at https://docs.example.com`


<img src="../termshow/hl-style-badge-before/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-badge-before" />

Terminal recording: hl-style-badge-before (requires JavaScript for playback)


## Style: Badge (After)

Border with a labeled badge below the target region. Highlighted text: `~ init_project() -- signature changed`


<img src="../termshow/hl-style-badge-after/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-badge-after" />

Terminal recording: hl-style-badge-after (requires JavaScript for playback)


## Style: Bracket

A left-edge bracket marking a multi-line block of output. Great for grouping related lines. Highlighted text: the four build summary statistics lines


<img src="../termshow/hl-style-bracket/frame-000.svg" class="gd-termshow-poster" loading="lazy" alt="Terminal recording: hl-style-bracket" />

Terminal recording: hl-style-bracket (requires JavaScript for playback)


# YAML Example

``` yaml
highlights:
  - at: 2.0
    duration: 3.0
    style: glow
    color: '#cba6f7'
    pulse: true
    target:
      region: {row: 1, col: 11, width: 6, height: 1}
```


# Available Styles

| Style            | Effect                           |
|------------------|----------------------------------|
| `outline`        | 2px colored border               |
| `underline`      | Solid line beneath target        |
| `underline-wavy` | Wavy line beneath target         |
| `background`     | Translucent fill                 |
| `spotlight`      | Fill + outer glow                |
| `glow`           | Neon glow (inner + outer shadow) |
| `box`            | Border + translucent fill        |
| `badge-before`   | Border + label above             |
| `badge-after`    | Border + label below             |
| `bracket`        | Left-edge bracket                |


# Targeting Modes

Highlights support three targeting modes:

- **Region** -- explicit cell coordinates (`row`, `col`, `width`, `height`)
- **Pattern** -- regex match against the terminal buffer (`match`, `group`)
- **Lines** -- list of line numbers to highlight


# Animation Options

| Option     | Default   | Description                 |
|------------|-----------|-----------------------------|
| `fade_in`  | 0.3       | Seconds to fade in          |
| `fade_out` | 0.3       | Seconds to fade out         |
| `pulse`    | false     | Breathing animation         |
| `color`    | `#f1fa8c` | Hex color for the highlight |