the IT Hustle
도구실전 매뉴얼소개

코드 스크린샷

코드를 아름다운 공유용 스크린샷으로 변환합니다. 8가지 테마, 구문 강조, 창 프레임, PNG 내보내기.

48px
12px
14px
줄 번호
윈도우 그림자
배경
실시간 미리보기Dracula · TypeScript
1import { useState, useEffect } from 'react';
2
3// Custom hook for debounced search
4function useDebounce<T>(value: T, delay: number): T {
5 const [debounced, setDebounced] = useState(value);
6
7 useEffect(() => {
8 const timer = setTimeout(() => {
9 setDebounced(value);
10 }, delay);
11
12 return () => clearTimeout(timer);
13 }, [value, delay]);
14
15 return debounced;
16}
17
18export default useDebounce;

코드 스크린샷 만드는 방법

The IT Hustle의 무료 Code Screenshot Generator로 코드를 아름답고 공유하기 좋은 이미지로 만들어 보세요.

  1. 1
    코드 붙여넣기에디터에 코드를 입력하거나 붙여넣으세요. 일반적인 언어는 자동으로 감지됩니다.
  2. 2
    테마 선택Monokai, Dracula, One Dark, Nord, GitHub Dark 등 8가지 색상 테마 중에서 선택하세요.
  3. 3
    모양 커스터마이즈배경색, 여백, 모서리 둥글기, 글자 크기, 줄 번호, 창 그림자를 조정하세요.
  4. 4
    다운로드 또는 복사Download PNG를 클릭해 스크린샷을 저장하거나, Copy Image로 Slack, Twitter, 문서에 바로 붙여넣으세요.

자주 묻는 질문

그렇습니다. 이 도구는 Carbon.sh와 비슷하게 코드를 아름다운 스크린샷으로 만들어 주지만, 서버 업로드 없이 브라우저에서 완전히 실행됩니다. 코드는 비공개로 유지됩니다.

JavaScript, TypeScript, Python, Go, Rust, Java, C++, HTML, CSS, SQL, Bash, JSON, YAML, Markdown, Ruby를 지원합니다. 구문 강조는 각 언어의 키워드, 문자열, 주석, 숫자를 다룹니다.

가능합니다. 배경 표시를 끄면 투명한 PNG를 얻을 수 있어 슬라이드나 블로그 게시물에 코드를 겹쳐 넣기에 완벽합니다.

관련 도구

JSON Formatter마크다운 에디터색상 팔레트 생성기