ANSI 시퀀스를 사용하여 터미널의 텍스트 음영처리
8995 단어 denotypescriptjavascriptascii
만약 당신이 나처럼 정성스럽게 설계된 CLI나 터미널 도구를 사용한다면 당신은 어떤 만족감을 느낄 것이다.
특히 그들이 컬러를 사용하거나 터미널을 다시 그릴 때
한 https://github.com/erroneousboat/slack-term.
아니면, 이것:https://github.com/fdehau/tui-rs
또는 https://github.com/wtfutil/wtf
"우리는 어떻게 이런 것들을 이해합니까?"너 자신에게 묻고 있니?(이렇게 됐으면 좋겠어)--오늘이 틀림없이 너의 행운의 날이야. 왜냐하면
이 동영상의 주제입니다!>ANSI 시퀀스 <
이 글은 Youtube video I made의 사본이다.
ANSI 시퀀스는 커서 위치에서 스타일, 색상에 이르는 모든 것을 제어하는 표준 신호입니다.
다시 말하면, 그것은 단말기에 명령을 내리는 일련의 문자이다.
제가 이 인터랙티브 스크립트를 만든 것은 핵심 개념을 보여드리기 위해서입니다.JavaScript와 Deno를 사용하지만
어떤 언어를 사용하거나 실행할 때 변경하지 마십시오.
나는 이 스크립트를 실행할 것이다. 이것은 키보드에서 터미널의 출력으로 간단하게 원시 입력을 바꿀 것이다.
deno run --unstable echo.js
나는 무엇이든 입력할 수 있다...
hello
이제 첫 번째 ANSI 시퀀스를 입력하여 들어오는 모든 입력을 빨간색으로 표시합니다.ESC + [ + 3 + 1 + m
world
만약 내가 텍스트를 파란색으로 나타내고 싶다면, 나는 파란색의 적당한 숫자 34를 입력하기만 하면 된다.ESC + [ + 3 + 4 + m
Now everything is blue ~~
배경색도 설정할 수 있습니다.ESC + [ + 4 + 3 + m
It's like IKEA
다음에 나는 색깔을 다시 설정할 수 있다.ESC + [ + 0 + m
Back to basics.
터미널의 경계 안에서 나는 커서를 이동할 수 있다.ESC + [ + H
I'm typing here!
ESC + [ + 2 + 0 + ; + 2 + 0 + H
Now, I'm typing here.
만약 내가 커서를 왼쪽 상단으로 돌린다면, 나는 화면의 나머지 부분을 지우고, 나에게 공백의 석판을 줄 수 있다.ESC + [ + 0 + H + ESC + [ + J
나는 너에게 그림을 좀 그려 주겠다고 약속했으니, 내가 타자를 치게 해라.ESC[45m
ESC[2;2H
space
space
space
ESC[2;6H
space
space
space
ESC[3;3H
space
space
space
space
space
ESC[4;5H
space
읊다, 읊조리다마음 하나!이것은 나에게 만약 네가 나를 따라온다면, 나는 너를 사랑한다는 것을 일깨워 준다.우리가 진일보한 토론을 하기 전에 중요한 것은 모든 터미널 클라이언트가 ANSI 서열을 설명할 수 있는 것은 아니기 때문에 귀하는
흥분하기 전에 테스트해 보려고요.말은 그렇지만 그럴 가능성이 높아...
확인하려면 터미널로 돌아가서
echo $TERM
을 입력하십시오.이 값이 단어 중 하나를 포함한다면 계속할 수 있습니다.이 가능하다, ~할 수 있다,...
xterm
rxvt
eterm
screen
tmux
vt100
vt102
vt220
vt320
ansi
scoansi
cygwin
linux
konsole
bvterm
현재 PowerShell을 실행하는 경우 ANSI 시퀀스를 지원한다고 생각하지만 기본적으로 기능이 해제되어 있습니다.우리가 터미널에 있을 때, 다른 놀고 싶은 것은
tput
이라는 명령이다. 검색이 필요할 때 이 명령은 매우 유용하다터미널의 상태와 기능.
다음은 당신이 흥미를 느낄 수 있는 명령입니다.
내보낼 열 수
tput cols
행 또는 행 수를 내보내려면tput lines
마지막 출력 색상 수tput colors
현재 우리는 나의 단말기에 80열 25줄이 있고 256가지 색을 표시할 수 있다는 것을 안다.경탄할 만한!그래서 이 영상은'자바스크립트의 기초'로 홍보되기 때문에 자바스크립트를 쓰는 게 좋을 것 같아요.
먼저, JavaScript에서 ANSI 시퀀스를 입력하는 가장 간단한 방법은
\x1b
을 시작하는 것입니다. 이것은 이스케이프 키의 16진수입니다.그래서 우리는 이렇게 할 수 있다.
console.log("\x1b[31mSomething went wrong.\x1b[0m");
이것은 모든 종류의 서열에 적용됩니다.console.log("\x1b[H\x1b[J\x1b[36mAh! so clean\x1b[0m");
이런 식으로 ANSI 시퀀스를 사용하면 시끄러워지는 것은 분명하다.우리가 사용하고자 하는 명령을 함수로 포장합시다.이 프레젠테이션에 대해 문자열 대신 TypedArray를 사용하겠습니다.TypedArray에 익숙하지 않다면기다릴게요.
어쨌든 여기에 복습이 하나 있다. 유형화 수조는 하나의 수조로 항목마다 특정한 수량의 위치만 수용할 수 있다.
문자를 처리할 때 보통 기호가 없는 8자리 정수를 사용합니다.왜 그런지 모르면, 이 글을 다시 읽어라.
간단하게 설명해 드릴게요. 여기서 최종 결과를 볼 수 있어요. https://github.com/sebastienfilion/i-y/blob/main/fundamentals/ANSI/generate.js.
여기서 자신에게 예술품 한 부를 사다: https://raw.githubusercontent.com/sebastienfilion/i-y/main/fundamentals/ANSI/logo.js
watch the video을 사용하여 더 많은 설명과 간격을 얻을 수 있습니다.
먼저 다음과 같은 유틸리티 함수를 생성하여 프로세스를 단순화했습니다.
const clear = () => new Uint8Array([ 27, 91, 72, 27, 91, 74 ]);
함수는 다음 문자의 TypedArray \x1b
, [
, H
, \x1b
, [
, J
- \x1b
은 "escape"키의 16진수입니다.일단 내가 모든 실용 프로그램 함수를 준비하고 TypedArray로 돌아오면 나는 1KB의 버퍼를 만들 것이다.
const xs = new Uint8Array(1024);
그런 다음 모든 명령을 버퍼로 줄입니다.[
clear(),
inverse(),
fill(10)
]
.reduce(
(i, ys) => xs.set(ys, i) || i + ys.byteLength,
0
);
최종적으로 나의 달리기 예술을 보여줘야 한다.await Deno.write(Deno.stdout.rid, xs);
ANSI 시퀀스는 모든 CLI 또는 터미널 도구의 상호 작용과 매력을 제공하는 강력한 방법입니다.나는 네가 모든 다른 서열과 그 영향에 대한 참고를 얻기 위해 위키백과 페이지를 찾아보는 것을 건의한다.
궁금하면 Typed Array, 읽기, 쓰기 흐름, ANSI 서열에 대한 정보를 더 알고 싶으면 이 채널을 구독해야 합니다.
나는 곧 다가올 비디오 시리즈에서 이러한 개념을 사용할 것이다.
그렇지 않으면 무엇을 배웠는지'좋아요'버튼을 눌러서 댓글을 공유하거나 남기는 것을 잊지 마세요.
네, 안녕히 계세요.
https://en.wikipedia.org/wiki/ANSI_escape_code
Reference
이 문제에 관하여(ANSI 시퀀스를 사용하여 터미널의 텍스트 음영처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sebastienfilion/drawing-to-the-terminal-4kah텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)