Create an uniformly typed SVG of a terminal recording using asciinema and svg-term-cli

good-asciinema.md

1. Install asciinema

2. Record a command line interaction

   asciinema rec /path/to/asciinema-file
   

3. When prompted, save locally with ctrl-c

4. Optionally, view the video

   asciinema play /path/to/asciinema-file
   

5. The file that asciinema creates is pure text and easy to understand. If you need to fix typing errors, do it now. Don't worry about timing information as that will be normalized in the next step

6. Run speed-up-asciicinema.js with the input file, the ms between each keystroke and the ms pause at the end of the script. The file is saved to /path/to/asciinema-file.updated

   node speed-up-asciicinema.js /path/to/asciinema-file 100 5000
   

7. Install svg-term-cli

   npm install -g svg-term-cli
   

8. Convert the modified asciinema document to an SVG. See the SVG Term docs for options

   cat /path/to/asciinema-file.updated | svg-term --out /path/to/asciinema-file.svg --window
   

speed-up-asciicinema.js

const fs = require('fs');

const args = process.argv;
const file = args[2];
const spaceInMs = parseInt(args[3], 10);
const endSpace = parseInt(args[4], 10) || 0;

const lines = fs.readFileSync(file).toString().trim().split('\n');

let time = 0;

const reformatted = lines.map(line => {
  const regex = /^\[[+-]?([0-9]+([.][0-9]*)?|[.][0-9]+),/;
  if (line.match(regex)) {
    const timeInSeconds = time/1000;
    line = line.replace(regex, `[${timeInSeconds},`);
  }

  time += spaceInMs;

  return line;
});

if (endSpace > 0) {
  reformatted.push(`[${(time + endSpace)/1000}, "o", ""]`);
}

const joinedLines = reformatted.join('\n');

const newFile = `${file}.updated`;

fs.writeFileSync(newFile, joinedLines);