터미널을 SVG에 기록

문제

이 사용 사례는 pos-cli 소개를 기록하고 마케팅 웹 사이트에 포함하기 위해 SVG로 저장한 방법을 설명합니다.

화면을 녹화하여 인터넷에서 공유하는 방법에는 몇 가지가 있습니다.

애니메이션 GIF - Kap 과 같은 도구를 사용하면 매우 쉽지만 큰 단점이 있습니다. 최대 256색, FPS와 파일 크기 사이의 균형은 매우 미묘하며 gif 파일은 일반적으로 큽니다.

비디오(mp4, webm) - Kap 과 같은 도구를 사용하면 매우 쉽지만 항상 가능한 것은 아닌 비디오 태그를 사용해야 합니다(마크다운 readme가 큰 것임).

Animated PNG - 브라우저 지원이 있음에도 불구하고 누구도 사용하는 것을 본 적이 없습니다. 이것은 실험하기에 좋은 후보입니다.

마지막으로, SVG — 위의 모든 솔루션은 전체 화면을 이미지로 모든 것을 기록할 수 있으므로 더 보편적입니다. 우리에게 필요한 것은 주로 텍스트인 터미널만 기록하는 것입니다. 즉, 녹음 파일은 가장 가까운 대안인 gif보다 훨씬 작으며 비디오보다 더 많은 위치에 삽입하기가 더 쉽습니다.

그렇다면 CLI 기록을 웹 사이트의 이미지로 표시하기 위해 어떤 솔루션을 선택했습니까?

해결책

웹 사이트에 포함하지 않고 터미널 녹음을 누군가와 공유하기만 하면 되는 경우 우수asciinema를 권장합니다.

그러나 녹음을 웹 사이트에서 이미지로 보여주려면 브라우저에서 기본적으로 이해할 수 있는 이미지 형식이 필요합니다.

입력: termtosvg

그것이 무엇을 하는지에 대해 이야기하는 대신 look at some examples .

터미널에 표시되는 내용을 기록하는 것 외에도 터미널이 많이 사용자 정의되어 더 단순한 모양과 느낌을 원하는 경우를 대비하여 change the theme 을(를) 수행할 수도 있습니다.

설치

Python 3 스크립트이므로 시스템에 Python이 있어야 합니다.

pip3 install termtosvg

용법

termtosvg를 사용하면 즉시 기록을 시작합니다.

pos-cli|master ⇒ termtosvg helloworld.svg
Recording started, enter "exit" command or Control-D to end

녹음하고 싶은 것을 할 때입니다.

pos-cli|master ⇒ echo "Hello world"
Hello world

녹음을 종료하고 저장할 준비가 되면 Ctrl-D를 누르십시오.

pos-cli|master ⇒
Rendering ended, SVG animation is hello.svg

기록을 중첩할 수도 있으므로 위의 모든 명령을 SVG 파일에 기록했습니다.




(미리보기 클릭)

추가 옵션

더 복잡한 작업을 수행해야 하는 경우 제공되는 옵션에 대한 정보를 제공하는 termtosvg -h를 입력하십시오.

pos-cli|master ⇒ termtosvg -h
usage: termtosvg [output_path] [-c COMMAND] [-D DELAY] [-g GEOMETRY]
                 [-m MIN_DURATION] [-M MAX_DURATION] [-s] [-t TEMPLATE] [-h]

Record a terminal session and render an SVG animation on the fly

positional arguments:
  output_path           optional filename of the SVG animation. If --still-
                        frame is specified, output_path should be the path of
                        the directory where still frames will be stored. If
                        missing, a random path will be automatically
                        generated.

optional arguments:
  -h, --help            show this help message and exit
  -c COMMAND, --command COMMAND
                        specify the program to record with optional arguments
                        (default: /bin/zsh)
  -D DELAY, --loop-delay DELAY
                        duration in milliseconds of the pause between two
                        consecutive loops of the animation (default: 1000ms)
  -g GEOMETRY, --screen-geometry GEOMETRY
                        geometry of the terminal screen used for rendering the
                        animation. The geometry must be given as the number of
                        columns and the number of rows on the screen separated
                        by the character "x". For example "82x19" for an 82
                        columns by 19 rows screen.
  -m MIN_DURATION, --min-frame-duration MIN_DURATION
                        minimum duration of a frame in milliseconds (default:
                        1ms)
  -M MAX_DURATION, --max-frame-duration MAX_DURATION
                        maximum duration of a frame in milliseconds (default:
                        No maximum value)
  -s, --still-frames    output still frames instead of an animation.
  -t TEMPLATE, --template TEMPLATE
                        set the SVG template used for rendering the SVG
                        animation. TEMPLATE may either be one of the default
                        templates (base16_default_dark, dracula, gjm8_play,
                        gjm8_single_loop, gjm8, powershell, progress_bar,
                        putty, solarized_dark, solarized_light, terminal_app,
                        ubuntu, window_frame_js, window_frame_powershell,
                        window_frame, xterm) or a path to a valid template.

See also 'termtosvg record --help' and 'termtosvg render --help'

결과

SVG가 준비되면 선호하는 이미지 구문을 사용하여 원하는 위치에 삽입할 수 있습니다.





(클릭하면 새 탭에서 열립니다)

이 게시물은 브루노 파즈(Bruno Paz)가 asciinema와 변환기를 사용하여 유사한 결과를 얻는 방법을 보여주면서 영감을 받았습니다. 또한 개발 워크플로에서 이 접근 방식을 사용할 수 있습니다. asciinema 기록을 기록 및 공유하여 팀의 피드백을 받고, 충분할 때 SVG로 변환하여 배송합니다.