ansi to svg
1.0.0
？將ANSI逃脫的CLI字符串轉換為SVG
ChangElog
ANSI到SVG提供了一種將node.js cli輸出包含在軟件文檔中的降價友好方式；像這樣的SVG在這裡：
通過成為Patreon來支持ANSI到SVG的發展。
ANSI到SVG位於Tha Base-Package ANSI-TO上，是用於ZDD開發的工具集合的一部分。
ANSI-TO具有以下插件：
SVGS輸出已通過Chrome，Firefox和Sketch進行了測試。
$ yarn add ansi-to-svg
const ansiToSVG = require ( 'ansi-to-svg' )
// Returns an SVG string
ansiToSVG ( ansiText , {
// Defaults to 2x for Retina compatibility
scale : 2 ,
// Font settings
fontFace : 'Courier' ,
fontSize : 14 ,
lineHeight : 18 ,
// Padding
paddingTop : 0 ,
paddingLeft : 0 ,
paddingBottom : 0 ,
paddingRight : 0 ,
// Supply an iTerm2 Color file
colors : './base16-flat-dark-f1lt3r-256.itermcolors' ,
// Or override the default colors
// (all defaults shown here)
colors : {
black : '#000000' ,
red : '#B22222' ,
green : '#32CD32' ,
yellow : '#DAA520' ,
blue : '#4169E1' ,
magenta : '#9932CC' ,
cyan : '#008B8B' ,
white : '#D3D3D3' ,
gray : '#A9A9A9' ,
redBright : '#FF4500' ,
greenBright : '#ADFF2F' ,
yellowBright : '#FFFF00' ,
blueBright : '#87CEEB' ,
magentaBright : '#FF00FF' ,
cyanBright : '#00FFFF' ,
whiteBright : '#FFFFFF' ,
bgBlack : '#000000' ,
bgRed : '#B22222' ,
bgGreen : '#32CD32' ,
bgYellow : '#DAA520' ,
bgBlue : '#4169E1' ,
bgMagenta : '#9932CC' ,
bgCyan : '#008B8B' ,
bgWhite : '#D3D3D3' ,
bgGray : '#A9A9A9' ,
bgRedBright : '#FF0000' ,
bgGreenBright : '#ADFF2F' ,
bgYellowBright : '#FFFF00' ,
bgBlueBright : '#87CEEB' ,
bgMagentaBright : '#FF00FF' ,
bgCyanBright : '#00FFFF' ,
bgWhiteBright : '#FFFFFF' ,
backgroundColor : '#000000' ,
foregroundColor : '#D3D3D3'
}
} )}））
## 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)
將此結果保存到.SVG文件並在瀏覽器中打開它會顯示：
將結果記錄到控制台將顯示：
< svg xmlns = " http://www.w3.org/2000/svg " viewBox = " 0, 0, 126.02, 40.45 " font-family = " SauceCodePro Nerd Font, Source Code Pro, Courier " font-size = " 14 " >< g fill = " #D3D3D3 " >< rect x = " 0 " y = " 0 " width = " 126.02 " height = " 40 " >< svg xmlns = " http://www.w3.org/2000/svg " viewBox = " 0, 0, 126.02, 40.45 " font-family = " SauceCodePro Nerd Font, Source Code Pro, Courier " font-size = " 14 " >
< g fill = " #D3D3D3 " >
< rect x = " 0 " y = " 0 " width = " 126.02 " height = " 40.45 " fill = " #000000 " />
< text x = " 0 " y = " 14.55 " >Your </ text >
< text x = " 42.01 " y = " 14.55 " fill = " #B22222 " >$wish</ text >
< text x = " 8.4 " y = " 33.55 " > is </ text >
< rect x = " 33.61 " y = " 19 " width = " 16.8 " height = " 19 " fill = " #DAA520 " opacity = " 1 " />
< text x = " 33.61 " y = " 33.55 " fill = " #008B8B " >my</ text >
< text x = " 58.81 " y = " 33.55 " > command.</ text >
</ g >
</ svg >使用：./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'
ansiToSVG ( ansiText , { color : colorFile } ) const ansiText = chalk . bgRed ( '?' ) +
chalk . bgYellow ( '?' ) +
chalk . bgGreen ( '?' ) +
chalk . bgCyan ( '?' ) +
chalk . bgBlue ( '?' ) +
chalk . bgMagenta ( '?' ) +
chalk . bgRed ( '?' ) +
chalk . bgYellow ( '?' ) +
chalk . bgGreen ( '?' ) +
chalk . bgCyan ( '?' ) +
chalk . bgBlue ( '?' ) +
chalk . bgMagenta ( '?' ) +
chalk . bgRed ( '?' ) +
chalk . bgYellow ( '?' ) +
chalk . bgGreen ( '?' ) +
chalk . bgCyan ( '?' )
ansiToSVG ( ansiText , {
colors : 'base16-flat-dark-f1lt3r-256.itermcolors'
} ) 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}`
ansiToSVG ( ansiText , {
colors : 'base16-flat-dark-f1lt3r-256.itermcolors' ,
fontFamily : 'SauceCodePro Nerd Font'
} )注意：您將需要SauceCodePro Nerd font才能正確渲染。您可以在這裡找到書呆子字體：https：//nerdfonts.com/
如果我們將一些ANSI轉移到文件：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
我們可以用ansiToSVG渲染它：
const ansiText = fs . readFileSync ( 'all-supported-styles.ansi' )
ansiToSVG ( String ( ansiText ) , { colors : 'base16-flat-dark-f1lt3r-256.itermcolors' } )導致以下輸出：
注意：此示例使用粉筆作為編寫ANSI逃生序列的基礎。
const result = ansiToSVG ( String ( ansiText ) , { colors : 'base16-tomorrow-256.itermcolors' } ) const ansiText = chalk `{red.bold padding} {green.italic woo!}`
const colorFile = './fixtures/base16-flat-dark-f1lt3r-256.itermcolors'
const result = ansiToSVG ( String ( ansiText ) , {
colors : colorFile ,
paddingTop : 14 ,
paddingLeft : 14 ,
paddingRight : 14 ,
paddingBottom : 14
} ) const ansiText = chalk `{bgCyan.yellow.strikethrough.underline woo!}`
const colorFile = './fixtures/base16-flat-dark-f1lt3r-256.itermcolors'
const result = ansiToSVG ( String ( ansiText ) , {
colors : colorFile ,
paddingTop : 1 ,
paddingLeft : 1 ,
paddingBottom : - 2.5 ,
paddingRight : 1
} )
