#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.
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: calloutann-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: calloutann-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: calloutann-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: calloutann-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: calloutann-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: calloutann-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: calloutann-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: calloutann-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: largeann-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: mediumann-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: smallgetting-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: truehl-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: calloutgdtest_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 0user_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 editor03-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 level05-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