ansi to svg 다운로드 -ANSI ansi to svg 소스 코드 다운로드

ansi-to-svg

? ANSI 탈출 된 CLI 현을 SVG로 변환하십시오

changelog

ANSI-to-SVG는 소프트웨어 문서에 node.js CLI 출력을 포함시키는 Markdown 친화적 인 방법을 제공합니다. 이 SVG와 마찬가지로 :

지원하다

Patreon이되어 Ansi-to-SVG의 개발을 지원하십시오.

특징

ANSI-to-SVG는 THA 기본 패키지 ANSI-to 위에 위치하고 있으며 ZDD 개발에 사용되는 도구 모음의 일부입니다.

Ansi-to에는 다음 플러그인이 있습니다.

SVG- ANSI를 확장 가능한 벡터 그래픽으로 내 보냅니다
PNG, JPG- ANSI를 래스터 이미지로 내보내기 (JPG, PNG)
~~HTML~~ (곧 출시)

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 >

ITERM2 색상 지원

사용 : ./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를 파일에 버리면 픽스처 .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
} )

결합 된 Strikethrough와 밑줄

 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
} )