ANSI-to-SVG
😹 convert ANSI Escaped CLI strings to SVGs
ANSI-to-SVG provides a Markdown friendly way to include Node.js CLI output in your software documentation; like this SVG here:
Support
Support the development of ANSI-to-SVG by becoming a patreon.
Features
ANSI-to-SVG sits on top of tha base-package ANSI-to and is part of a collection of tools used for ZDD development.
ANSI-to has the following plugins available:
- SVG - Export ANSI to Scalable Vector Graphics
- PNG, JPG - Export ANSI to raster image (JPG, PNG)
HTML(coming soon)
The SVGs output have been tested with Chrome, Firefox and Sketch.
Install
$ yarn add ansi-to-svg
Usage
const ansiToSVG = // Returns an SVG string
})
## Basic Text
```js
const antoToSVG = require('ansi-to-svg')
const chalk = require('chalk')
const ansiText = chalk`Your {red $wish}\n is {bgYellow.cyan my} command.`
const result = ansiToSVG(ansiText)
Saving this result to an .SVG
file and opening it in your browser would reveal:
Logging the result to console would show:
Your $wish is my command.
iTerm2 Color Support
Using: ./fixtures/base16-flat-dark-f1lt3r-256.itermcolors
const ansiText = chalk`Your {red $wish}\n is {bgYellow.cyan my} command.`const colorFile = 'base16-flat-dark-f1lt3r-256.itermcolors'
Emoji Support
const ansiText = chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk + chalk
Powerline Font Compatability
const ansiText = chalk` {bgGreen.white Testing background colors } butting adjacent lines. \n` + chalk` {red ✘ }{bgBlue.black ~/repos/minkjs/ansi-to }{bgYellow.blue }{bgYellow.black svg-image-plugins ● }{yellow } ava powerline-fonts.test.js \n` + chalk` {green 1 passed}`
Note: you will need SauceCodePro Nerd font
for the following example to render correctly. You can find Nerd Fonts here: https://nerdfonts.com/
All Styles
If we dump some ANSI to a file: fixture.chalk-styles.ansi
[1mbold [22m [2mdim [22m [3mitalic [23m [4munderline [24m [7minverse [27m [9mstrikethrough [29m [1m[30mblack [39m[22m [1m[31mred [39m[22m [1m[32mgreen [39m[22m [1m[33myellow [39m[22m [1m[34mblue [39m[22m [1m[35mmagenta [39m[22m [1m[36mcyan [39m[22m [1m[37mwhite [39m[22m [1m[90mgray [39m[22m [30m[91mredBright [30m[39m [30m[92mgreenBright [30m[39m [30m[93myellowBright [30m[39m [30m[94mblueBright [30m[39m [30m[95mmagentaBright [30m[39m [30m[96mcyanBright [30m[39m [30m[97mwhiteBright [30m[39m [37m[1m[40mbgBlack [49m[22m[39m [30m[1m[41mbgRed [49m[22m[39m [30m[1m[42mbgGreen [49m[22m[39m [30m[1m[43mbgYellow [49m[22m[39m [30m[1m[44mbgBlue [49m[22m[39m [30m[1m[45mbgMagenta [49m[22m[39m [30m[1m[46mbgCyan [49m[22m[39m [30m[1m[47mbgWhite [49m[22m[39m [37m[3m[100mbgBlackBright [49m[23m[39m [30m[3m[101mbgRedBright [49m[23m[39m [30m[3m[102mbgGreenBright [49m[23m[39m [30m[3m[103mbgYellowBright [49m[23m[39m [30m[3m[104mbgBlueBright [49m[23m[39m [30m[3m[105mbgMagentaBright [49m[23m[39m [30m[3m[106mbgCyanBright [49m[23m[39m [30m[3m[107mbgWhiteBright [49m[23m[39m
We can render it with ansiToSVG
:
const ansiText = fs
Resulting in the following output:
Note: this example uses Chalk as a base to write the ANSI Escape sequences.
Light Color Scheme
const result =
Padding
const ansiText = chalk`{red.bold padding} {green.italic woo!}`const colorFile = './fixtures/base16-flat-dark-f1lt3r-256.itermcolors' const result =
Combined Strikethrough and Underline
const ansiText = chalk`{bgCyan.yellow.strikethrough.underline woo!}`const colorFile = './fixtures/base16-flat-dark-f1lt3r-256.itermcolors' const result =