코드를 이미지로 변환(코드 스크린샷 생성기)

코드를 슬라이드, 블로그 글, SNS에 공유할 때는 스크린샷이 가장 명확한 방법인 경우가 많지만, 실제 스크린샷에는 편집기의 잡다한 부분이 함께 찍힙니다. 이 도구는 코드를 직접 그려 줍니다. JavaScript/TypeScript, Python, Java/C/C#, Go, Rust, PHP, SQL, HTML, CSS, JSON, 셸의 구문 강조, 밝음·어두움·세피아 테마, 제목이 있는 창 프레임, 줄 번호, 그라데이션·단색·투명 배경을 지원합니다. 2배나 3배의 선명한 PNG 또는 SVG로 내려받으세요.

사용 방법

1. 코드를 붙여 넣고 언어를 고릅니다.
2. 테마와 배경을 고릅니다.
3. 창 제목, 프레임, 줄 번호를 정합니다.
4. 글꼴 크기, 여백, 배율을 조절합니다.
5. PNG 또는 SVG를 내려받습니다.

계산식

높이 = 2 × 여백 + 제목 표시줄 + 2 × 안쪽 여백 + 줄 수 × 1.5 × 글꼴 크기

각 글자는 고정폭 격자에 놓이므로(동아시아 전각 문자와 이모지는 두 칸), 시스템의 글꼴과 상관없이 열이 맞습니다. 탭은 공백 4칸이 됩니다. 구문 강조는 주석, 문자열, 숫자, 키워드, 함수 이름, 타입을 구분하는 가벼운 어휘 분석기로, 전체 파서가 아니라서 특이한 문법은 색이 입혀지지 않을 수 있습니다. 배율은 고해상도 화면을 위해 모든 픽셀 크기를 곱합니다.

예시

8줄짜리 debounce 함수를 16 px 글꼴, 48 px 여백으로 만들면 1배에서 높이가 48 + 36(제목 표시줄) + 20 + 8 × 24 + 20 + 48 = 364 px이고, 기본 2배에서는 728 px입니다. function, return, let 같은 키워드, 주석, 기본값 300, setTimeout 호출은 어두운 테마에서 각각 자기 색을 갖습니다.