Capturing terminal as HTML

06 Sep 2021

Here’s a little script to record terminal sessions. It uses script to neatly record the commands and their output, and then transforms that typescript with aha to HTML with some minimal styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/usr/bin/env bash
echo $(pwd) > ~/.capture_relative_prompt_base

prompter() {
  current=$(pwd)
  base=$(<~/.capture_relative_prompt_base)
  relative_with_slash=${current#"$base"}
  relative=${relative_with_slash#"/"}
  export PS1="$relative\$ "
}

export -f prompter
export PROMPT_COMMAND=prompter
script -q
cd $(<~/.capture_relative_prompt_base)
cat ./typescript | tail -n +2 | head -n -3 | aha --black --no-header > capture.html
rm ./typescript

This is very limited but it allows to capture text without full terminal prompt and marks parts that are different color, so that I can easily add slightly better styling classes for them. Here’s an example recording:

$ ls -al .
total 12
drwxrwxr-x  3 michal michal 4096 wrz  6 23:57 .
drwxr-xr-x 31 michal michal 4096 wrz  6 23:24 ..
drwxrwxr-x  3 michal michal 4096 wrz  6 23:57 directory
-rwxrwxr-x  1 michal michal    0 wrz  6 23:24 executable
-rw-rw-r--  1 michal michal    0 wrz  6 23:57 typescript
$ tree .
.
├── directory
│   ├── nested
│   └── other_file
├── executable
└── typescript

2 directories, 3 files
$ cd directory/nested/
directory/nested$ cd ../../
$ exit

More interactive programs like nano can look pretty messed up. But overall editing that HTML with search+replace seems better than copying text and then manually finding every single place to add style.

I’d like to automate more of that editing away, and maybe add more features, like e.g. showing Esc etc and marking prompt command somehow to add click-to-copy through javascript for them.