Skip to content
Tools/코드 스냅샷

코드 스냅샷

Code Snapshot

코드를 문법 하이라이팅과 그라디언트 배경이 적용된 아름다운 PNG 이미지로 만들어 공유하세요.

쉼표로 구분한 줄 번호를 입력하면 해당 줄이 강조됩니다.

배경

인디고 퍼플

코드 테마

패딩

너비

내보내기 1114 × 1108px (2x 레티나 · 미리보기 557 × 554px)
example.ts
1// 코드 스냅샷 데모
2interface User {
3 id: number
4 name: string
5 role: 'admin' | 'member'
6}
7
8const users: User[] = [
9 { id: 1, name: 'Ada Lovelace', role: 'admin' },
10 { id: 2, name: 'Grace Hopper', role: 'member' },
11]
12
13/** 사용자 인사말을 만듭니다 */
14function greet(user: User): string {
15 const badge = user.role === 'admin' ? '[ADMIN]' : ''
16 return `Hello, ${user.name} ${badge}`.trim()
17}
18
19for (const u of users) {
20 console.log(greet(u))
21}
youngju.dev

사용 팁

  • 모든 처리는 브라우저에서만 이루어지며 코드가 서버로 전송되지 않습니다.
  • 라인 하이라이트에 3,5-7 형식으로 입력하면 3번, 5~7번 줄이 강조됩니다.
  • 긴 줄은 자동으로 줄바꿈되며, 탭은 공백 2칸으로 변환됩니다.
  • PNG는 2x 해상도로 내보내져 레티나 디스플레이에서도 선명합니다.
  • 배경을 없음으로 선택하면 투명 배경 PNG로 저장됩니다.