코드 이미지 만들기
Code Screenshot
코드 조각을 문법 강조·창 프레임·테마를 적용한 이미지로 만듭니다.
코드 조각을 슬라이드·이슈·게시물에 넣을 수 있는 PNG로 만듭니다. 문법 강조가 들어가고, 창 프레임이 붙고, 원하는 배율로 내보냅니다. 캔버스에 여기서 직접 그립니다. 아무것도 올리지 않고 외부 하이라이터도 불러오지 않습니다.
코드
미리보기
이 도구가 하는 일
- · 문법 강조는 이 사이트의 정렬기들이 쓰는 토크나이저(JavaScript·TypeScript·CSS·HTML·SQL)와 여기서 만든 작은 토크나이저(JSON·Python·Go·Rust·Shell)가 합니다. 외부 하이라이터를 불러오지 않습니다.
- · 글자는 기기에 있는 고정폭 글꼴로 캔버스에 직접 그립니다. 한글은 시스템의 한글 글꼴로 대체되어 네모 상자 대신 글자로 나오고, 한글·이모지는 두 칸으로 세어 줄을 접습니다. 글꼴이 기기마다 다르므로 같은 코드도 기기에 따라 조금 다르게 보입니다.
- · PNG는 1×·2×·3× 배율로 만들고, 어디에도 올라가지 않습니다.
사용 방법
코드를 붙여넣습니다
언어는 알아서 판별하고 직접 고를 수도 있습니다. 강조는 JS·TS·CSS·HTML·SQL에는 이 사이트 정렬기들의 토크나이저를, JSON·Python·Go·Rust·Shell에는 여기서 만든 작은 토크나이저를 씁니다.
프레임을 정합니다
테마, 글자 크기, 여백, 창 제목, 신호등 유무, 줄 번호, 그림자를 정합니다. 미리보기가 1× 배율의 결과 그대로입니다.
긴 줄의 접기 폭을 정합니다
줄을 접을 때 한글과 이모지를 터미널처럼 두 칸으로 셉니다. 그래서 여러 문자가 섞인 줄도 보이는 대로 접힙니다.
크기가 바뀔 곳에는 2×로 내보냅니다
폭이 고정된 블로그면 1×, 슬라이드나 레티나 화면이면 2×, 확대할 것이라면 3×입니다. 아니면 이미지를 클립보드로 바로 복사해도 됩니다.
자주 묻는 질문
다른 컴퓨터에서는 왜 다르게 보이나요?
글자를 그 기기에 있는 고정폭 글꼴로 그리는데, 기기마다 그 글꼴이 같지 않기 때문입니다. 특히 한글은 설치된 시스템 한글 글꼴로 대체됩니다. 대신 아무것도 내려받지 않고 즉시 그려집니다.
SVG로도 받을 수 있나요?
아니요, PNG만 됩니다. SVG가 어디서나 같아 보이려면 글꼴을 박아 넣어야 하는데, 한글 글꼴을 박으면 메가바이트 단위가 됩니다. 2× PNG가 더 작고 어디서나 똑같이 보입니다.
코드를 스크린숏으로 올려도 될까요?
슬라이드나 소셜 게시물이라면 괜찮습니다. 버그 리포트나 풀 리퀘스트라면 텍스트로 붙여넣으세요. 이미지는 검색도 복사도 diff도 안 되고 스크린 리더도 읽지 못합니다. 이 도구는 앞쪽 경우를 위한 것입니다.
이 도구로 이어지는 것
자바스크립트 정렬·압축
JavaScript Beautifier & Minifier
자바스크립트·타입스크립트의 주석과 공백만 지워 압축하고, 한 줄로 뭉친 번들을 다시 들여써서 읽을 수 있게 만듭니다. 이름을 바꾸거나 구문을 다시 쓰지는 않습니다.
아스키 표 생성
ASCII Table Generator
표를 고정폭 아스키·마크다운·선 문자 테두리로 그려 README나 주석에 붙일 수 있게 합니다.
아스키 아트 글자
ASCII Text Art
진짜 FIGfont 렌더러로 텍스트를 큰 아스키 글자로 그립니다. 내장 서체 두 벌과 직접 불러오는 .flf 자리가 있습니다.
아스키 다이어그램 편집기
ASCII Diagram Editor
문자 격자 위에 상자·선·화살표·이름표를 그립니다. 모서리와 이음새는 이웃 칸이 차 있는지로 스스로 정해지며, 유니코드 박스 문자와 순수 ASCII 중에 고를 수 있습니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
아스키 표 생성
ASCII Table Generator
표를 고정폭 아스키·마크다운·선 문자 테두리로 그려 README나 주석에 붙일 수 있게 합니다.
기기 목업 생성
Device Mockup
스크린샷을 휴대폰·태블릿·노트북·브라우저 프레임에 넣고 배경과 그림자를 더합니다.
자바스크립트 정렬·압축
JavaScript Beautifier & Minifier
자바스크립트·타입스크립트의 주석과 공백만 지워 압축하고, 한 줄로 뭉친 번들을 다시 들여써서 읽을 수 있게 만듭니다. 이름을 바꾸거나 구문을 다시 쓰지는 않습니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
Base64 인코딩·디코딩
Base64 Encoder & Decoder
텍스트와 파일을 Base64·Base64URL로 인코딩·디코딩하며 UTF-8을 올바르게 처리합니다.
JSON CSV 변환
JSON ⇄ CSV
중첩 JSON을 점 표기 열 이름으로 펼치거나, 표에서 객체를 다시 만듭니다.