← GDG /

#300 gdtest_termshow

#300 gdtest_termshow OK CONFIG
Terminal player demo with CLI/TUI recordings
Terminal player showcase demonstrating the termshow shortcode for embedding interactive SVG-based terminal recordings in documentation. Features CLI command demos (install, init, build), TUI interface recordings with box-drawing and ANSI colors, chapter navigation, floating annotations, and recording tips user guide.
View Site → Build Log ๐Ÿงช Test Coverage

Build Mode

● Has great-docs.yml

This package ships a pre-supplied config. The great-docs init step is skipped and great-docs build uses the spec-defined configuration directly. Tests specific config options and their rendered output.

Dimensions

A1 B1 C4 D2 E4 F1 G1 H3
A1Flat layoutlayout
B1Explicit __all__exports
C4Mixed class+funcobjects
D2Googledocstrings
E4%nodocdirectives
F1Auto-discoveruser_guide
G1README.mdlanding
H3CONTRIBUTING.mdextras

Source Files

๐Ÿ“ demos/
๐Ÿ“„ ann-pos-bottom-left.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-bottom-left.termshow.yml
source: demos/ann-pos-bottom-left.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at bottom-left"
    position: bottom-left
    style: callout
๐Ÿ“„ ann-pos-bottom-right.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-bottom-right.termshow.yml
source: demos/ann-pos-bottom-right.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at bottom-right"
    position: bottom-right
    style: callout
๐Ÿ“„ ann-pos-bottom.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-bottom.termshow.yml
source: demos/ann-pos-bottom.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at bottom"
    position: bottom
    style: callout
๐Ÿ“„ ann-pos-left.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-left.termshow.yml
source: demos/ann-pos-left.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at left"
    position: left
    style: callout
๐Ÿ“„ ann-pos-right.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-right.termshow.yml
source: demos/ann-pos-right.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at right"
    position: right
    style: callout
๐Ÿ“„ ann-pos-top-left.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-top-left.termshow.yml
source: demos/ann-pos-top-left.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at top-left"
    position: top-left
    style: callout
๐Ÿ“„ ann-pos-top-right.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-top-right.termshow.yml
source: demos/ann-pos-top-right.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at top-right"
    position: top-right
    style: callout
๐Ÿ“„ ann-pos-top.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Position Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-pos-top.termshow.yml
source: demos/ann-pos-top.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Annotation at top"
    position: top
    style: callout
๐Ÿ“„ ann-width-large.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Width Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-width-large.termshow.yml
source: demos/ann-width-large.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Large width annotation that takes up more horizontal space for longer explanations"
    position: top-right
    style: callout
    width: large
๐Ÿ“„ ann-width-medium.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Width Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-width-medium.termshow.yml
source: demos/ann-width-medium.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Medium width annotation with more text content"
    position: top-right
    style: callout
    width: medium
๐Ÿ“„ ann-width-small.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Annotation Width Demo"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "e"]
[0.06, "o", "c"]
[0.07, "o", "h"]
[0.06, "o", "o"]
[0.1, "o", " "]
[0.07, "o", "\""]
[0.06, "o", "H"]
[0.07, "o", "e"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.06, "o", "o"]
[0.08, "o", " "]
[0.06, "o", "f"]
[0.07, "o", "r"]
[0.06, "o", "o"]
[0.08, "o", "m"]
[0.06, "o", " "]
[0.07, "o", "G"]
[0.06, "o", "r"]
[0.08, "o", "e"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.06, "o", " "]
[0.08, "o", "D"]
[0.06, "o", "o"]
[0.07, "o", "c"]
[0.06, "o", "s"]
[0.08, "o", "\""]
[0.5, "o", "\r\n"]
[0.2, "o", "Hello from Great Docs\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ ann-width-small.termshow.yml
source: demos/ann-width-small.termshow

settings:
  window_chrome: colorful

annotations:
  - at: 1.0
    duration: 5.0
    text: "Small"
    position: top-right
    style: callout
    width: small
๐Ÿ“„ getting-started.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20, "type": "xterm-256color"}, "title": "Getting Started"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "p"]
[0.06, "o", "i"]
[0.07, "o", "p"]
[0.1, "o", " "]
[0.07, "o", "i"]
[0.06, "o", "n"]
[0.08, "o", "s"]
[0.06, "o", "t"]
[0.07, "o", "a"]
[0.06, "o", "l"]
[0.08, "o", "l"]
[0.1, "o", " "]
[0.07, "o", "m"]
[0.06, "o", "y"]
[0.08, "o", "-"]
[0.06, "o", "t"]
[0.07, "o", "o"]
[0.06, "o", "o"]
[0.08, "o", "l"]
[0.6, "o", "\r\n"]
[0.3, "o", "\u001b[2K\u001b[33mCollecting my-tool...\u001b[0m\r\n"]
[0.8, "o", "\u001b[2K\u001b[33mDownloading my_tool-1.0.0-py3-none-any.whl (12 kB)\u001b[0m\r\n"]
[0.5, "o", "\u001b[2K\u001b[32mSuccessfully installed my-tool-1.0.0\u001b[0m\r\n"]
[1.0, "m", "Installation complete"]
[0.8, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "m"]
[0.06, "o", "y"]
[0.08, "o", "-"]
[0.06, "o", "t"]
[0.07, "o", "o"]
[0.06, "o", "o"]
[0.08, "o", "l"]
[0.1, "o", " "]
[0.07, "o", "i"]
[0.06, "o", "n"]
[0.08, "o", "i"]
[0.06, "o", "t"]
[0.6, "o", "\r\n"]
[0.2, "o", "\u001b[36m\u001b[1m\u2728 Initializing new project...\u001b[0m\r\n"]
[0.5, "o", "\r\n"]
[0.1, "o", "  \u001b[1mProject name:\u001b[0m my-awesome-project\r\n"]
[0.1, "o", "  \u001b[1mTemplate:\u001b[0m     default\r\n"]
[0.1, "o", "  \u001b[1mDirectory:\u001b[0m    ./my-awesome-project/\r\n"]
[0.3, "o", "\r\n"]
[0.2, "o", "\u001b[32m\u2714 Project created successfully!\u001b[0m\r\n"]
[1.0, "m", "Project initialized"]
[0.8, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "m"]
[0.06, "o", "y"]
[0.08, "o", "-"]
[0.06, "o", "t"]
[0.07, "o", "o"]
[0.06, "o", "o"]
[0.08, "o", "l"]
[0.1, "o", " "]
[0.07, "o", "r"]
[0.06, "o", "u"]
[0.08, "o", "n"]
[0.1, "o", " "]
[0.06, "o", "-"]
[0.08, "o", "-"]
[0.06, "o", "v"]
[0.07, "o", "e"]
[0.06, "o", "r"]
[0.08, "o", "b"]
[0.06, "o", "o"]
[0.07, "o", "s"]
[0.06, "o", "e"]
[0.6, "o", "\r\n"]
[0.2, "o", "\u001b[36m\u2699\ufe0f  Running task: build\u001b[0m\r\n"]
[0.4, "o", "  \u001b[90m[1/4]\u001b[0m Collecting sources...\r\n"]
[0.5, "o", "  \u001b[90m[2/4]\u001b[0m Compiling...\r\n"]
[0.6, "o", "  \u001b[90m[3/4]\u001b[0m Running tests...\r\n"]
[0.4, "o", "  \u001b[90m[4/4]\u001b[0m Packaging...\r\n"]
[0.3, "o", "\r\n\u001b[32m\u2714 Build complete (1.2s)\u001b[0m\r\n"]
[1.0, "m", "Build finished"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
๐Ÿ“„ getting-started.termshow.yml
source: demos/getting-started.termshow

settings:
  window_chrome: colorful

chapters:
  - at: 0.0
    label: "Install"
  - at: 4.5
    label: "Initialize"
  - at: 10.0
    label: "Build"

annotations:
  - at: 0.5
    duration: 3.0
    text: "Install from PyPI with pip"
    position: top-right
    style: callout
  - at: 5.0
    duration: 3.5
    text: "Creates project structure with sensible defaults"
    position: bottom-right
    style: subtle
  - at: 11.0
    duration: 3.0
    text: "Verbose mode shows each build step"
    position: top-right
    style: callout

snippets:
  - at: 0.0
    duration: 4.0
    text: "pip install my-tool"
    label: "Install"
  - at: 4.5
    duration: 5.0
    text: "my-tool init"
    label: "Initialize"
  - at: 10.0
    duration: 4.5
    match: "\\$ (.+)"
    label: "Run"
๐Ÿ“„ great-docs-cli.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 24, "type": "xterm-256color"}, "title": "Great Docs CLI"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "-"]
[0.06, "o", "-"]
[0.06, "o", "v"]
[0.07, "o", "e"]
[0.06, "o", "r"]
[0.08, "o", "s"]
[0.06, "o", "i"]
[0.07, "o", "o"]
[0.06, "o", "n"]
[0.5, "o", "\r\n"]
[0.2, "o", "great-docs, version 0.10.0\r\n"]
[1.0, "m", "version"]
[0.6, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "s"]
[0.06, "o", "c"]
[0.08, "o", "a"]
[0.06, "o", "n"]
[0.5, "o", "\r\n"]
[0.3, "o", "\r\n"]
[0.1, "o", "\u001b[36m\u001b[1mPackage:\u001b[0m gdtest_termshow\r\n"]
[0.1, "o", "\u001b[36m\u001b[1mVersion:\u001b[0m 1.0.0\r\n"]
[0.1, "o", "\r\n"]
[0.1, "o", "\u001b[1mDiscovered Exports (3):\u001b[0m\r\n"]
[0.05, "o", "\r\n"]
[0.05, "o", "  \u001b[33mFunctions:\u001b[0m\r\n"]
[0.05, "o", "    \u001b[32m\u2022\u001b[0m greet(name)\r\n"]
[0.05, "o", "    \u001b[32m\u2022\u001b[0m init_project(path, *, template)\r\n"]
[0.05, "o", "    \u001b[32m\u2022\u001b[0m run_task(task_name, *, verbose)\r\n"]
[0.1, "o", "\r\n"]
[0.1, "o", "\u001b[90m\u2139 All 3 exports have docstrings.\u001b[0m\r\n"]
[1.2, "m", "scan complete"]
[0.6, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "l"]
[0.06, "o", "i"]
[0.08, "o", "n"]
[0.06, "o", "t"]
[0.5, "o", "\r\n"]
[0.3, "o", "\r\n"]
[0.1, "o", "\u001b[36m\u001b[1mLinting:\u001b[0m gdtest_termshow\r\n"]
[0.2, "o", "\r\n"]
[0.15, "o", "  \u001b[32m\u2714\u001b[0m docstrings \u001b[90m........\u001b[0m 3/3 documented\r\n"]
[0.15, "o", "  \u001b[32m\u2714\u001b[0m cross-refs \u001b[90m........\u001b[0m no broken references\r\n"]
[0.15, "o", "  \u001b[32m\u2714\u001b[0m style \u001b[90m.............\u001b[0m consistent (numpy)\r\n"]
[0.15, "o", "  \u001b[32m\u2714\u001b[0m directives \u001b[90m........\u001b[0m all valid\r\n"]
[0.15, "o", "  \u001b[32m\u2714\u001b[0m stale-versions \u001b[90m....\u001b[0m none found\r\n"]
[0.2, "o", "\r\n"]
[0.1, "o", "\u001b[32m\u001b[1m\u2728 All checks passed!\u001b[0m No issues found.\r\n"]
[1.2, "m", "lint complete"]
[0.6, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "t"]
[0.06, "o", "e"]
[0.08, "o", "r"]
[0.06, "o", "m"]
[0.1, "o", " "]
[0.07, "o", "r"]
[0.06, "o", "e"]
[0.08, "o", "n"]
[0.06, "o", "d"]
[0.07, "o", "e"]
[0.06, "o", "r"]
[0.1, "o", " "]
[0.06, "o", "d"]
[0.07, "o", "e"]
[0.06, "o", "m"]
[0.08, "o", "o"]
[0.06, "o", "s"]
[0.07, "o", "/"]
[0.06, "o", "g"]
[0.07, "o", "e"]
[0.06, "o", "t"]
[0.08, "o", "t"]
[0.06, "o", "i"]
[0.07, "o", "n"]
[0.06, "o", "g"]
[0.08, "o", "-"]
[0.06, "o", "s"]
[0.07, "o", "t"]
[0.06, "o", "a"]
[0.07, "o", "r"]
[0.06, "o", "t"]
[0.08, "o", "e"]
[0.06, "o", "d"]
[0.6, "o", "\r\n"]
[0.3, "o", "\r\n"]
[0.1, "o", "\u001b[36m\u001b[1mRendering:\u001b[0m demos/getting-started.termshow\r\n"]
[0.2, "o", "  \u001b[90mScript:\u001b[0m  demos/getting-started.termshow.yml\r\n"]
[0.1, "o", "  \u001b[90mChrome:\u001b[0m  colorful\r\n"]
[0.1, "o", "  \u001b[90mSize:\u001b[0m    80\u00d720\r\n"]
[0.2, "o", "\r\n"]
[0.4, "o", "  \u001b[33m\u25cf\u001b[0m Parsing recording (24 events)...\r\n"]
[0.5, "o", "  \u001b[33m\u25cf\u001b[0m Rendering keyframes...\r\n"]
[0.2, "o", "    \u001b[90mframe-000.svg\u001b[0m (0.00s)\r\n"]
[0.15, "o", "    \u001b[90mframe-001.svg\u001b[0m (0.50s)\r\n"]
[0.15, "o", "    \u001b[90mframe-002.svg\u001b[0m (2.08s)\r\n"]
[0.15, "o", "    \u001b[90mframe-003.svg\u001b[0m (3.28s)\r\n"]
[0.15, "o", "    \u001b[90mframe-004.svg\u001b[0m (4.50s)\r\n"]
[0.15, "o", "    \u001b[90mframe-005.svg\u001b[0m (5.10s)\r\n"]
[0.15, "o", "    \u001b[90mframe-006.svg\u001b[0m (7.60s)\r\n"]
[0.15, "o", "    \u001b[90mframe-007.svg\u001b[0m (10.00s)\r\n"]
[0.15, "o", "    \u001b[90mframe-008.svg\u001b[0m (10.60s)\r\n"]
[0.15, "o", "    \u001b[90mframe-009.svg\u001b[0m (14.20s)\r\n"]
[0.2, "o", "  \u001b[33m\u25cf\u001b[0m Writing manifest.json\r\n"]
[0.1, "o", "\r\n"]
[0.1, "o", "\u001b[32m\u001b[1m\u2714 Done!\u001b[0m 10 frames, 3 chapters, 16.6s duration\r\n"]
[0.1, "o", "  \u001b[90mOutput: termshow/getting-started/\u001b[0m\r\n"]
[1.0, "m", "render complete"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
๐Ÿ“„ great-docs-cli.termshow.yml
source: demos/great-docs-cli.termshow

settings:
  window_chrome: colorful

chapters:
  - at: 0.0
    label: "Version"
  - at: 3.5
    label: "Scan Exports"
  - at: 9.0
    label: "Lint Docs"
  - at: 14.5
    label: "Render Recording"

annotations:
  - at: 0.5
    duration: 2.5
    text: "Check your installed version"
    position: top-right
    style: subtle
  - at: 4.0
    duration: 4.0
    text: "Discovers all public exports with docstring coverage"
    position: top-right
    style: callout
  - at: 9.5
    duration: 4.0
    text: "Checks docs quality: docstrings, cross-refs, style, and more"
    position: top-right
    style: callout
  - at: 15.5
    duration: 4.0
    text: "Renders .termshow recordings into SVG keyframes for embedding"
    position: top-right
    style: highlight

snippets:
  - at: 0.0
    duration: 3.0
    match: "\\$ (.+)"
    label: "Version"
  - at: 3.5
    duration: 5.0
    match: "\\$ (.+)"
    label: "Scan"
  - at: 9.0
    duration: 5.0
    match: "\\$ (.+)"
    label: "Lint"
  - at: 14.5
    duration: 6.0
    match: "\\$ (.+)"
    label: "Render"
๐Ÿ“„ hl-style-background.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Background"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "c"]
[0.06, "o", "a"]
[0.07, "o", "t"]
[0.1, "o", " "]
[0.07, "o", "c"]
[0.06, "o", "o"]
[0.07, "o", "n"]
[0.06, "o", "f"]
[0.08, "o", "i"]
[0.06, "o", "g"]
[0.07, "o", "."]
[0.06, "o", "t"]
[0.08, "o", "o"]
[0.06, "o", "m"]
[0.07, "o", "l"]
[0.5, "o", "\r\n"]
[0.2, "o", "\u001b[36m[project]\u001b[0m\r\n"]
[0.2, "o", "name = \"my-tool\"\r\n"]
[0.2, "o", "version = \"2.1.0\"\r\n"]
[0.2, "o", "description = \"A fast CLI utility\"\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-background.termshow.yml
source: demos/hl-style-background.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: background
    color: '#89b4fa'
    target:
      region: {row: 3, col: 0, width: 17, height: 1}
๐Ÿ“„ hl-style-badge-after.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Badge After"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "d"]
[0.06, "o", "i"]
[0.07, "o", "f"]
[0.06, "o", "f"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36mComparing v0.8 \u2192 v0.9...\u001b[0m\r\n"]
[0.4, "o", "\u001b[32m+ greet()\u001b[0m  โ€” new function\r\n"]
[0.3, "o", "\u001b[33m~ init_project()\u001b[0m  โ€” signature changed\r\n"]
[0.3, "o", "\u001b[31m- old_helper()\u001b[0m  โ€” removed\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-badge-after.termshow.yml
source: demos/hl-style-badge-after.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: badge-after
    color: '#f38ba8'
    badge_text: "BREAKING"
    target:
      region: {row: 3, col: 0, width: 37, height: 1}
๐Ÿ“„ hl-style-badge-before.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Badge Before"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "d"]
[0.06, "o", "e"]
[0.07, "o", "p"]
[0.06, "o", "l"]
[0.08, "o", "o"]
[0.06, "o", "y"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36mDeploying to production...\u001b[0m\r\n"]
[0.5, "o", "\u001b[32m\u2713\u001b[0m Uploaded 24 files\r\n"]
[0.3, "o", "\u001b[32m\u2713\u001b[0m CDN cache invalidated\r\n"]
[0.3, "o", "\u001b[1m\u001b[32m\u2728 Live at https://docs.example.com\u001b[0m\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-badge-before.termshow.yml
source: demos/hl-style-badge-before.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: badge-before
    color: '#89b4fa'
    badge_text: "NEW"
    target:
      region: {row: 4, col: 0, width: 34, height: 1}
๐Ÿ“„ hl-style-box.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Box"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "p"]
[0.06, "o", "y"]
[0.07, "o", "t"]
[0.06, "o", "e"]
[0.08, "o", "s"]
[0.06, "o", "t"]
[0.1, "o", " "]
[0.07, "o", "-"]
[0.06, "o", "-"]
[0.07, "o", "c"]
[0.06, "o", "o"]
[0.08, "o", "v"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36mRunning tests with coverage...\u001b[0m\r\n"]
[0.5, "o", "\u001b[32m\u2713\u001b[0m 48 passed\r\n"]
[0.3, "o", "\u001b[32m\u2713\u001b[0m Coverage: \u001b[1m94%\u001b[0m\r\n"]
[0.3, "o", "\u001b[33m\u26a0\u001b[0m  Uncovered: utils.py:102-108\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-box.termshow.yml
source: demos/hl-style-box.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: box
    color: '#a6e3a1'
    target:
      region: {row: 2, col: 0, width: 20, height: 2}
๐Ÿ“„ hl-style-bracket.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Bracket"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "s"]
[0.06, "o", "t"]
[0.07, "o", "a"]
[0.06, "o", "t"]
[0.08, "o", "s"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36m\u2500\u2500 Build Summary \u2500\u2500\u001b[0m\r\n"]
[0.3, "o", "  Pages rendered:  24\r\n"]
[0.3, "o", "  Assets copied:   18\r\n"]
[0.3, "o", "  Total time:      1.3s\r\n"]
[0.3, "o", "  Output size:     2.4 MB\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-bracket.termshow.yml
source: demos/hl-style-bracket.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: bracket
    color: '#f9e2af'
    target:
      region: {row: 2, col: 0, width: 30, height: 4}
๐Ÿ“„ hl-style-glow.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Glow"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "v"]
[0.06, "o", "e"]
[0.07, "o", "r"]
[0.06, "o", "s"]
[0.08, "o", "i"]
[0.06, "o", "o"]
[0.07, "o", "n"]
[0.5, "o", "\r\n"]
[0.3, "o", "great-docs \u001b[1mv0.9.0\u001b[0m\r\n"]
[0.2, "o", "Python 3.12.4\r\n"]
[0.2, "o", "Platform: macOS-14.5-arm64\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-glow.termshow.yml
source: demos/hl-style-glow.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: glow
    color: '#cba6f7'
    target:
      region: {row: 1, col: 11, width: 6, height: 1}
    pulse: true
๐Ÿ“„ hl-style-outline.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Outline"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "s"]
[0.06, "o", "c"]
[0.07, "o", "a"]
[0.06, "o", "n"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36mScanning project...\u001b[0m\r\n"]
[0.4, "o", "\u001b[32m\u2713\u001b[0m Found 4 modules\r\n"]
[0.3, "o", "\u001b[32m\u2713\u001b[0m Found 12 functions\r\n"]
[0.3, "o", "\u001b[32m\u2713\u001b[0m Found 3 classes\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-outline.termshow.yml
source: demos/hl-style-outline.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: outline
    target:
      region: {row: 2, col: 2, width: 15, height: 1}
๐Ÿ“„ hl-style-spotlight.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Spotlight"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "b"]
[0.06, "o", "u"]
[0.07, "o", "i"]
[0.06, "o", "l"]
[0.08, "o", "d"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36mBuilding documentation...\u001b[0m\r\n"]
[0.5, "o", "\u001b[32m\u2713\u001b[0m Rendered 24 pages\r\n"]
[0.3, "o", "\u001b[32m\u2713\u001b[0m Generated search index\r\n"]
[0.3, "o", "\u001b[1m\u001b[32m\u2728 Build complete!\u001b[0m Output: _site/\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-spotlight.termshow.yml
source: demos/hl-style-spotlight.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: spotlight
    color: '#a6e3a1'
    target:
      region: {row: 4, col: 0, width: 32, height: 1}
๐Ÿ“„ hl-style-underline-wavy.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Underline Wavy"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "p"]
[0.06, "o", "y"]
[0.07, "o", "t"]
[0.06, "o", "h"]
[0.08, "o", "o"]
[0.06, "o", "n"]
[0.1, "o", " "]
[0.07, "o", "a"]
[0.06, "o", "p"]
[0.07, "o", "p"]
[0.06, "o", "."]
[0.08, "o", "p"]
[0.06, "o", "y"]
[0.5, "o", "\r\n"]
[0.3, "o", "Traceback (most recent call last):\r\n"]
[0.2, "o", "  File \"app.py\", line 7, in <module>\r\n"]
[0.2, "o", "    result = compute(data)\r\n"]
[0.2, "o", "\u001b[31mTypeError: unsupported operand type(s)\u001b[0m\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-underline-wavy.termshow.yml
source: demos/hl-style-underline-wavy.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: underline-wavy
    color: '#f38ba8'
    target:
      region: {row: 4, col: 0, width: 38, height: 1}
๐Ÿ“„ hl-style-underline.termshow
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 12, "type": "xterm-256color"}, "title": "Highlight: Underline"}
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[0.08, "o", "g"]
[0.06, "o", "r"]
[0.07, "o", "e"]
[0.06, "o", "a"]
[0.08, "o", "t"]
[0.06, "o", "-"]
[0.07, "o", "d"]
[0.06, "o", "o"]
[0.08, "o", "c"]
[0.06, "o", "s"]
[0.1, "o", " "]
[0.07, "o", "l"]
[0.06, "o", "i"]
[0.07, "o", "n"]
[0.06, "o", "t"]
[0.5, "o", "\r\n"]
[0.3, "o", "\u001b[36mLinting sources...\u001b[0m\r\n"]
[0.4, "o", "\u001b[33m\u26a0\u001b[0m  src/core.py:42 โ€” unused import\r\n"]
[0.3, "o", "\u001b[33m\u26a0\u001b[0m  src/utils.py:8 โ€” line too long\r\n"]
[0.3, "o", "\u001b[32m\u2713\u001b[0m 2 warnings, 0 errors\r\n"]
[0.5, "o", "\u001b[32m\u001b[1m$\u001b[0m "]
[5.0, "o", ""]
๐Ÿ“„ hl-style-underline.termshow.yml
source: demos/hl-style-underline.termshow

settings:
  window_chrome: colorful

highlights:
  - at: 1.5
    duration: 5.0
    style: underline
    color: '#f9e2af'
    target:
      region: {row: 2, col: 3, width: 30, height: 1}
๐Ÿ“„ tui-demo.termshow
{"version": 1, "format": "termshow", "term": {"cols": 60, "rows": 18, "type": "xterm-256color"}, "title": "TUI Interface"}
[0.3, "o", "\u001b[2J\u001b[H"]
[0.2, "o", "\u001b[34m\u001b[1m\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m                                                \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m   \u001b[36m\u001b[1m\u2728 my-tool v1.0\u001b[0m                               \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m                                                \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m   \u001b[33m\u276f\u001b[0m \u001b[1mNew Project\u001b[0m                              \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m     Open Existing                            \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m     Recent Files                             \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m     Settings                                 \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m     \u001b[90mQuit\u001b[0m                                     \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m                                                \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m   \u001b[90m\u2191/\u2193 navigate  \u23ce enter  q quit\u001b[0m             \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m                                                \u001b[34m\u001b[1m\u2502\u001b[0m\r\n"]
[0.02, "o", "\u001b[34m\u001b[1m\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\u001b[0m\r\n"]
[2.0, "m", "Main menu"]
[0.8, "o", "\u001b[9;1H"]
[0.05, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m     New Project                              \u001b[34m\u001b[1m\u2502\u001b[0m"]
[0.05, "o", "\u001b[10;1H"]
[0.05, "o", "\u001b[34m\u001b[1m\u2502\u001b[0m   \u001b[33m\u276f\u001b[0m \u001b[1mOpen Existing\u001b[0m                            \u001b[34m\u001b[1m\u2502\u001b[0m"]
[1.5, "m", "Navigate to Open"]
[0.5, "o", "\u001b[2J\u001b[H"]
[0.2, "o", "\u001b[36m\u001b[1m\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u2594\u001b[0m\r\n"]
[0.05, "o", "  \u001b[1mOpen Project\u001b[0m\r\n"]
[0.05, "o", "\u001b[36m\u001b[1m\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u2581\u001b[0m\r\n"]
[0.1, "o", "\r\n"]
[0.1, "o", "  \u001b[90mPath:\u001b[0m ~/projects/\u001b[4mmy-app\u001b[0m\r\n"]
[0.3, "o", "\r\n"]
[0.2, "o", "  \u001b[32m\u2714\u001b[0m Loaded \u001b[1m3 files\u001b[0m, \u001b[1m2 configs\u001b[0m\r\n"]
[0.5, "o", "  \u001b[32m\u2714\u001b[0m Project ready\r\n"]
[1.5, "m", "Project loaded"]
๐Ÿ“„ tui-demo.termshow.yml
source: demos/tui-demo.termshow

settings:
  window_chrome: colorful

chapters:
  - at: 0.0
    label: "Main Menu"
  - at: 3.0
    label: "Navigation"
  - at: 5.5
    label: "Open Project"

annotations:
  - at: 0.5
    duration: 2.5
    text: "Full-screen TUI with keyboard navigation"
    position: top-right
    style: callout
  - at: 3.2
    duration: 2.0
    text: "Arrow keys move the selection cursor"
    position: bottom-right
    style: subtle
  - at: 6.0
    duration: 2.5
    text: "Enter confirms and opens the sub-view"
    position: top-left
    style: callout
๐Ÿ“ gdtest_termshow/
๐Ÿ“„ __init__.py
"""A sample CLI/TUI tool for demonstrating termshow recordings."""

__version__ = "1.0.0"
__all__ = ["greet", "init_project", "run_task"]


def greet(name: str) -> str:
    """Greet a user by name.

    Parameters
    ----------
    name
        The name to greet.

    Returns
    -------
    str
        A greeting string.
    """
    return f"Hello, {name}!"


def init_project(path: str, *, template: str = 'default') -> dict:
    """Initialize a new project at the given path.

    Parameters
    ----------
    path
        Directory to create the project in.
    template
        Project template to use.

    Returns
    -------
    dict
        Project metadata.
    """
    return {'path': path, 'template': template}


def run_task(task_name: str, *, verbose: bool = False) -> int:
    """Run a named task.

    Parameters
    ----------
    task_name
        Name of the task to execute.
    verbose
        Enable verbose output.

    Returns
    -------
    int
        Exit code (0 for success).
    """
    return 0
๐Ÿ“ user_guide/
๐Ÿ“„ 01-quick-start.qmd
---
title: Quick Start
---

## Installation & First Run

Watch this quick demo to see `my-tool` in action โ€” from installation
through your first build:

{{< termshow file="demos/getting-started" pause_on_chapters="true" >}}

### What just happened?

The recording above shows three steps:

1. **Install** โ€” `pip install my-tool` fetches the package from PyPI
2. **Initialize** โ€” `my-tool init` scaffolds a new project
3. **Build** โ€” `my-tool run --verbose` executes the build pipeline

You can click any chapter marker in the timeline to jump directly
to that step, or use keyboard shortcuts:

| Key | Action |
|-----|--------|
| Space | Play/Pause |
| โ† / โ†’ | Seek 5 seconds |
| . | Next chapter |
| , | Previous chapter |

## Next Steps

Now that you have `my-tool` installed, check out the
[TUI Interface](02-tui-interface.qmd) guide for the interactive mode.
๐Ÿ“„ 02-tui-interface.qmd
---
title: TUI Interface
---

## Interactive Mode

`my-tool` includes a full-screen terminal interface for visual
project management. Launch it with:

```bash
my-tool --interactive
```

Here's how it looks:

{{< termshow file="demos/tui-demo" pause_on_chapters="true" >}}

### Navigation

The TUI uses standard terminal navigation:

- **โ†‘/โ†“** arrows to move between items
- **Enter** to select/confirm
- **q** to quit
- **Esc** to go back one level

### Features

The interactive mode provides:

- Project creation wizard
- File browser with preview
- Live build output
- Configuration editor
๐Ÿ“„ 03-recording-tips.qmd
---
title: Recording Tips
---

## Creating Your Own Recordings

Great Docs makes it easy to record, edit, and embed terminal
sessions in your documentation.

### Recording

```bash
# Start recording
great-docs termshow record demos/my-demo.termshow

# Perform your CLI actions...
# Press Ctrl+D or type 'exit' to stop
```

### Editing with Scripts

Create a `.termshow.yml` file alongside your recording to add
chapters, annotations, and timing adjustments:

```yaml
source: demos/my-demo.termshow

settings:
  window_chrome: colorful

chapters:
  - at: 0.0
    label: Introduction
  - at: 10.0
    label: Main Feature

annotations:
  - at: 2.0
    duration: 3.0
    text: This step installs dependencies
    position: top-right
    style: callout

cuts:
  - from: 5.0
    to: 8.0
    type: ellipsis
```

### Rendering

```bash
# Render SVG frames
great-docs termshow render demos/my-demo.termshow
```

### Embedding

Use the `termshow` shortcode in your `.qmd` files:

```markdown
{{< termshow file="demos/my-demo" pause_on_chapters="true" >}}
```

### Importing Existing Recordings

Already have recordings from asciinema?

```bash
# Import from asciinema
great-docs termshow import-cast recording.cast demos/my-demo
```
๐Ÿ“„ 04-termshow-guide.qmd
---
title: Termshow Guide
---

## Overview

The **termshow** is Great Docs' built-in terminal recording player.
It renders pre-recorded terminal sessions as interactive, frame-accurate
SVG animations directly in your documentation pages โ€” no JavaScript
framework dependencies, no external services.

Key capabilities:

- Frame-accurate SVG rendering of terminal output
- Chapter-based navigation with labeled markers
- Contextual annotations that appear at specific timestamps
- Keyboard shortcuts for power users
- Adjustable playback speed (0.5ร— to 3ร—)
- Works offline and with `file://` protocol (all data embedded inline)
- Responsive layout that scales to any viewport width
- Light/dark theme support (follows the site theme)

### Live Demo

Here's a recording of real Great Docs CLI commands โ€” `scan`, `lint`,
and `term render` โ€” running against this very package:

{{< termshow file="demos/great-docs-cli" pause_on_chapters="true" >}}

## The Recording Format

Termshow uses a two-file system for each recording:

### The `.termshow` File

This is the raw terminal recording in NDJSON format. Each line is
a JSON array with `[delay, event_type, data]`:

```json
{"version": 1, "format": "termshow", "term": {"cols": 80, "rows": 20}}
[0.5, "o", "$ "]
[0.1, "o", "echo hello"]
[0.6, "o", "\r\nhello\r\n"]
[1.0, "m", "Command executed"]
```

Event types:

| Type | Meaning |
|------|---------|
| `"o"` | Output โ€” terminal data written to stdout |
| `"i"` | Input โ€” user keystrokes (for display purposes) |
| `"m"` | Marker โ€” internal marker used for chapter sync |

The header line sets terminal dimensions and metadata.

### The `.termshow.yml` Script File

This companion file defines chapters, annotations, timing adjustments,
and visual settings:

```yaml
source: demos/my-recording.termshow

settings:
  window_chrome: colorful   # Window decoration style
  theme: monokai            # Terminal color scheme
  font_size: 14             # Font size in pixels

chapters:
  - at: 0.0
    label: Introduction
  - at: 5.0
    label: Configuration
  - at: 12.0
    label: Running Tests

annotations:
  - at: 1.0
    duration: 3.0
    text: This installs all required dependencies
    position: top-right
    style: callout
  - at: 6.0
    duration: 2.5
    text: Configuration is auto-detected
    position: bottom-right
    style: subtle

cuts:
  - from: 8.0
    to: 11.0
    type: ellipsis   # Shows 'โ€ฆ' for the cut section

snippets:
  - at: 0.0
    duration: 5.0
    text: pip install my-package
    label: Install
  - at: 12.0
    duration: 4.0
    match: "\\$ (.+)"   # Regex: captures command after $ prompt
    label: Run
```

## Snippets

Snippets add a **copy button** to the player that appears during a time range.
Readers can click it to copy text to their clipboard without manual retyping.

### Literal Text

Use `text` when you know the exact string to copy:

```yaml
snippets:
  - at: 0.5
    duration: 7.0
    text: pip install my-tool
    label: Install
```

### Regex Match

Use `match` to extract text dynamically from the terminal buffer:

```yaml
snippets:
  - at: 0.5
    duration: 7.0
    match: "\\$ (.+)"
    label: Copy Command
```

The regex runs against the visible terminal text when the reader clicks
the copy button. If it has a capture group, group 1 is copied; otherwise
the full match is used. This is useful when the terminal shows a typed
command and you want to extract it without hardcoding.

### Snippet Fields

| Field | Default | Description |
|-------|---------|-------------|
| `at` | *(required)* | Time in seconds when the button appears |
| `duration` | `5.0` | How long the button stays visible |
| `text` | `""` | Literal text copied on click |
| `match` | `""` | Regex matched against visible terminal text |
| `label` | `"Copy"` | Button label shown alongside the copy icon |

At least one of `text` or `match` must be provided. If both are set,
`match` takes priority (with `text` as fallback).

## Settings Reference

| Setting | Default | Description |
|---------|---------|-------------|
| `window_chrome` | `colorful` | Window decoration: `colorful`, `plain`, `none` |
| `theme` | (auto) | Terminal color scheme |
| `font_size` | `14` | Font size in rendered SVG (px) |
| `line_height` | `1.2` | Line height multiplier |
| `padding` | `12` | Inner padding of the terminal area (px) |

## Annotation Styles

Annotations appear as overlays on the terminal at specified times.
Three styles are available:

| Style | Appearance |
|-------|------------|
| `callout` | Semi-opaque dark card with accent border |
| `subtle` | Lighter, smaller text โ€” less intrusive |
| `highlight` | Amber-tinted with warm border โ€” draws attention |

Positions: `top-left`, `top`, `top-right`, `left`, `right`,
`bottom-left`, `bottom`, `bottom-right`.

Widths: `small` (25%), `medium` (50%, default), `large` (75%).

## Embedding in Pages

Use the `termshow` Quarto shortcode in any `.qmd` file:

````markdown
## Basic usage

{{< termshow file="demos/getting-started" >}}

## With chapter pausing

{{< termshow file="demos/workflow" pause_on_chapters="true" >}}

## Autoplay with custom speed

{{< termshow file="demos/quick" autoplay="true" speed="1.5" >}}
````

### Shortcode Options

| Option | Default | Description |
|--------|---------|-------------|
| `file` | (required) | Path to `.termshow` file (without extension) |
| `autoplay` | `false` | Start playing automatically on page load |
| `loop` | `false` | Loop playback when reaching the end |
| `speed` | `1` | Initial playback speed multiplier |
| `pause_on_chapters` | `false` | Auto-pause at each chapter boundary |
| `controls` | `true` | Show the control bar |
| `theme` | `auto` | Player theme: `auto`, `dark`, or `light` |

## Player Controls

The player provides a full set of interactive controls:

### Control Bar

From left to right:

1. **Play/Pause button** โ€” Toggles playback. Shows โ†บ (replay) at the end.
2. **Current time** โ€” Elapsed time counter.
3. **Timeline scrub bar** โ€” Click anywhere to seek. Chapter markers
   appear as gold ticks with wider hit targets for easy clicking.
4. **Remaining time** โ€” Counts down to zero during playback.
5. **Speed button** โ€” Cycles through 0.5ร—, 1ร—, 1.5ร—, 2ร—, 3ร—.

### Chapter Bar

A thin overlay at the top of the player shows the name of the
current chapter, updating as playback progresses.

### Center Overlay

A semi-transparent button in the center of the viewport:

- **Before playback** โ€” Shows โ–ถ as a call-to-action.
- **After playback ends** โ€” Shows โ†บ to indicate replay. Clicking
  returns the player to its initial state (frame 0, ready to play).
- **During chapter pauses** โ€” Hidden, so the terminal content
  remains fully visible.

### Keyboard Shortcuts

Click the player viewport first to give it focus, then use:

| Key | Action |
|-----|--------|
| `Space` | Play / Pause (or reset from ended state) |
| `โ†’` | Seek forward 5 seconds |
| `โ†` | Seek backward 5 seconds |
| `.` | Jump to next chapter |
| `,` | Jump to previous chapter |

## Workflow

The full termshow workflow from recording to rendered page:

```text
1. Record          great-docs termshow record demos/my-demo.termshow
2. Edit script     Create/edit demos/my-demo.termshow.yml
3. Preview         great-docs termshow play demos/my-demo.termshow
4. Embed           Add {{< termshow ... >}} to your .qmd
5. Build           great-docs build (renders SVG frames automatically)
```

### Step 1: Record

```bash
great-docs termshow record demos/install-guide.termshow
```

This launches a recording session. Everything you type and see in
the terminal is captured with precise timing. Press `Ctrl+D` or
type `exit` to end the recording.

### Step 2: Create the Script

Create `demos/install-guide.termshow.yml` alongside the recording.
Define chapters at logical breakpoints in your workflow, and add
annotations to explain what's happening:

```yaml
source: demos/install-guide.termshow

settings:
  window_chrome: colorful

chapters:
  - at: 0.0
    label: Setup
  - at: 8.0
    label: Install
  - at: 15.0
    label: Verify

annotations:
  - at: 1.0
    duration: 3.0
    text: Start by activating the virtual environment
    position: top-right
    style: callout
```

### Step 3: Preview

```bash
great-docs termshow play demos/install-guide.termshow
```

This plays the recording in your terminal so you can verify
timing and check that chapter boundaries feel natural.

### Step 4: Embed

Add the shortcode to any user guide or documentation page:

```markdown
{{< termshow file="demos/install-guide" pause_on_chapters="true" >}}
```

### Step 5: Build

```bash
great-docs build
```

During the build, Great Docs:

1. Finds all `.termshow` files in your project
2. Renders each recording into a series of SVG keyframes
3. Generates a `manifest.json` with timing, chapters, and annotations
4. The Lua shortcode filter embeds the manifest and all SVG frames
   inline in the HTML โ€” no runtime fetches needed

## Importing Existing Recordings

Already have terminal recordings from asciinema? Import them:

```bash
# From asciinema (.cast files)
great-docs termshow import-cast recording.cast demos/my-demo
```

The import preserves timing and terminal dimensions. You'll still
want to create a `.termshow.yml` script to add chapters and
annotations.

## Tips & Best Practices

- **Keep recordings short** โ€” 15โ€“30 seconds is ideal. Split longer
  workflows into multiple recordings.
  waiting through your thinking time.
- **Place chapters at logical transitions** โ€” Each chapter should
  represent one distinct step in the workflow.
- **Use `pause_on_chapters`** for tutorials โ€” Gives readers time
  to absorb each step before the next one plays.
- **Annotations are brief** โ€” One sentence max. They complement
  the terminal output, not replace it.
- **Test at different speeds** โ€” Make sure annotations are still
  readable at 1.5ร— and 2ร— speed.
- **80 columns, 20 rows** works well for most CLI recordings.
  Use 60 columns for narrower TUI demos.

## Architecture

Under the hood, termshow works in two phases:

**Build time** (Python + Lua):

1. `core.py` discovers `.termshow` files and calls the renderer
2. The renderer parses the NDJSON recording + YAML script
3. It produces SVG keyframes at each visual change point
4. A `manifest.json` captures timing, chapters, and annotation data
5. The Lua shortcode embeds everything inline as `<script>` JSON blocks

**Page load** (JavaScript):

1. `termshow.js` finds `.gd-termshow` containers
2. Reads inline manifest and SVG frame data from `<script>` elements
3. Builds the player UI (viewport, controls, chapter bar, overlays)
4. On play: advances time via `requestAnimationFrame`, swaps SVG
   frames at the correct timestamps

This architecture means:

- Zero network requests at runtime
- Works with `file://` protocol (offline docs)
- No CORS or fetch issues
- SVGs scale perfectly at any zoom level
๐Ÿ“„ 05-annotation-gallery.qmd
---
title: Annotation Gallery
---

## Annotation Positions

Annotations can be placed at any edge or corner of the terminal
viewport. All examples below use the default `medium` width
and `callout` style.

### Position: Top-Left

{{< termshow file="demos/ann-pos-top-left" autoplay="true" loop="true" >}}

### Position: Top

{{< termshow file="demos/ann-pos-top" autoplay="true" loop="true" >}}

### Position: Top-Right

{{< termshow file="demos/ann-pos-top-right" autoplay="true" loop="true" >}}

### Position: Left

{{< termshow file="demos/ann-pos-left" autoplay="true" loop="true" >}}

### Position: Right

{{< termshow file="demos/ann-pos-right" autoplay="true" loop="true" >}}

### Position: Bottom-Left

{{< termshow file="demos/ann-pos-bottom-left" autoplay="true" loop="true" >}}

### Position: Bottom

{{< termshow file="demos/ann-pos-bottom" autoplay="true" loop="true" >}}

### Position: Bottom-Right

{{< termshow file="demos/ann-pos-bottom-right" autoplay="true" loop="true" >}}

## Annotation Widths

The `width` field controls how wide an annotation can grow as
a fraction of the player viewport. All examples below use
`top-right` position and `callout` style.

### Small (25%)

{{< termshow file="demos/ann-width-small" autoplay="true" loop="true" >}}

### Medium (50%) โ€” Default

{{< termshow file="demos/ann-width-medium" autoplay="true" loop="true" >}}

### Large (75%)

{{< termshow file="demos/ann-width-large" autoplay="true" loop="true" >}}

## Choosing Settings

| Goal | Recommended |
|------|-------------|
| Brief label next to code | `position: right`, `width: small` |
| Step explanation avoiding left-aligned output | `position: top-right`, `width: medium` |
| Long description with room to breathe | `position: top`, `width: large` |
| Warning banner across the top | `position: top`, `width: large`, `style: highlight` |
| Subtle aside | `position: bottom-right`, `width: small`, `style: subtle` |

## YAML Example

```yaml
annotations:
  - at: 2.0
    duration: 3.0
    text: This step installs all dependencies
    position: top-right
    style: callout
    width: large
```

Available positions: `top-left`, `top`, `top-right`, `left`, `right`,
`bottom-left`, `bottom`, `bottom-right`.

Available widths: `small` (25%), `medium` (50%, default), `large` (75%).
๐Ÿ“„ 06-highlight-gallery.qmd
---
title: 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`

{{< termshow file="demos/hl-style-outline" autoplay="true" loop="true" >}}

### 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`

{{< termshow file="demos/hl-style-underline" autoplay="true" loop="true" >}}

### 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)`

{{< termshow file="demos/hl-style-underline-wavy" autoplay="true" loop="true" >}}

### Style: Background

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

{{< termshow file="demos/hl-style-background" autoplay="true" loop="true" >}}

### Style: Spotlight

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

{{< termshow file="demos/hl-style-spotlight" autoplay="true" loop="true" >}}

### 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`

{{< termshow file="demos/hl-style-glow" autoplay="true" loop="true" >}}

### Style: Box

Combines a border with a translucent fill โ€” the classic
"selection rectangle" look.
Highlighted text: `โœ“ 48 passed` and `โœ“ Coverage: 94%`

{{< termshow file="demos/hl-style-box" autoplay="true" loop="true" >}}

### 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`

{{< termshow file="demos/hl-style-badge-before" autoplay="true" loop="true" >}}

### Style: Badge (After)

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

{{< termshow file="demos/hl-style-badge-after" autoplay="true" loop="true" >}}

### 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

{{< termshow file="demos/hl-style-bracket" autoplay="true" loop="true" >}}

## 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 |
๐Ÿ“„ great-docs.yml
package_name: gdtest_termshow
display_name: My Tool
description: A demo showing terminal recordings in documentation
user_guide: true