1 min read

Retrieve Terminal Output in ANSI Format

I wonder how to obtain the terminal output and preserve the colors when inserting it into a blog post. This concept is illustrated below, taken from https://rehype-pretty-code.netlify.app/

ANSI Highlighting

By default, when you copy and paste the terminal output, this is the result:

 astro  v4.1.1 ready in 1528 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

14:24:26 watching for file changes...

To overcome this, we need to use the script command included in bsdutils package. Wrap your command with the following:

script -q -c "your-command-here" command.txt

Then open file command.txt, and viola, you now have the terminal output in ANSI format.

Now you can include it in your blog post and highlight it as ansi as shown below:

 astro  v4.1.1 ready in 746 ms
 
 Local    http://localhost:4321/
 Network  use --host to expose
 
14:24:26 watching for file changes...

I utilize rehype-pretty-code to highlight my Astro site. If you wish to learn how to integrate it, please refer to this post.

Alternatively, if you prefer to use a pre-made Astro template, you can use the AstroMon template.