Softonic

코드를 이미지로

단계 1 / 2

코드 조각을 붙여 넣고 네 가지 기본 테마 중 하나를 고른 뒤 색상, 글꼴 크기, 여백, 선택형 헤더, 줄 번호를 조정하고 브라우저 canvas에서 그린 PNG를 다운로드하세요. 이 도구는 일반 텍스트를 그리므로 깔끔한 코드 이미지에는 적합하지만, 언어를 분석하거나 구문 강조를 추가하지는 않습니다.

코드 PNG 만드는 방법

  1. 1

    코드 조각 붙여 넣기

    JavaScript, HTML, CSS, JSON, shell 명령 또는 다른 일반 텍스트를 코드 입력란에 넣으세요. 렌더러는 처음 400줄까지만 사용합니다.

  2. 2

    모양 설정하기

    Dark, Light, Dracula, Solarized 중에서 선택한 다음 제목, 글꼴 크기, 여백, 배경, 텍스트, 강조 색상을 조정하세요.

  3. 3

    canvas 확인하기

    브라우저가 각 줄을 canvas 텍스트로 그립니다. 창 스타일 헤더와 줄 번호는 선택 사항입니다. 긴 줄은 canvas를 내장 최대 너비까지 넓힐 수 있습니다.

  4. 4

    PNG 다운로드

    현재 canvas를 문서, 메모, 슬라이드 또는 게시물에 쓸 PNG 이미지로 내보냅니다. SVG, JPEG, HTML 내보내기는 없습니다.

렌더러가 하는 일

컨트롤 바꿀 수 있는 항목 참고
테마 Dark, Light, Dracula, Solarized 각 테마는 배경, 텍스트, 강조 색상의 초기값을 설정합니다.
텍스트 스타일 제목, 글꼴 크기, 여백 글꼴 크기는 10–40 px, 여백은 20–200 px로 제한됩니다.
색상 배경, 텍스트, 강조 강조 색상은 줄 번호에 사용됩니다.
헤더 창 스타일 헤더 켜기 또는 끄기 켜면 제목이 헤더에 표시됩니다.
줄 번호 표시 또는 숨기기 번호는 일반 canvas 텍스트로 그려집니다.
내보내기 PNG 다운로드 다운로드 버튼은 현재 canvas를 PNG 이미지로 저장합니다.

실제 제한

  • 브라우저는 Canvas API로 코드 조각을 일반 텍스트로 그립니다. JavaScript, Python, HTML 또는 다른 언어를 감지하지 않습니다.
  • 매우 큰 파일이 페이지를 멈추지 않도록 미리보기는 처음 400줄을 사용합니다.
  • canvas 너비는 420 px에서 2200 px 사이로 유지됩니다. 매우 긴 줄은 최대 너비에 도달할 수 있습니다.
  • 두 단계 버전은 편집에서 다운로드로 이동하는 동안 현재 브라우저 탭의 입력값을 sessionStorage에 저장합니다.

접근성 참고

이미지 안의 코드는 검색하거나 복사할 수 없고 화면 읽기 프로그램에서도 읽을 수 없습니다. PNG는 시각 자료로 사용하고, 문서나 튜토리얼 또는 버그 리포트를 게시할 때 실제 코드 조각은 선택 가능한 텍스트로 함께 제공하세요.

자주 묻는 질문

아니요. 붙여 넣은 텍스트를 그대로 canvas에 그립니다. 색상과 테마는 바꿀 수 있지만 언어 선택기나 구문 파서는 없습니다.

메뉴에는 Dark, Light, Dracula, Solarized가 있습니다. 테마를 고른 뒤에도 배경, 텍스트, 강조 색상은 직접 바꿀 수 있습니다.

아니요. 출력은 canvas에서 만든 PNG 다운로드뿐입니다. SVG, JPEG 또는 HTML로 복사하는 기능은 없습니다.

브라우저 반응성을 유지하기 위해 미리보기는 처음 400줄을 그립니다. 공개용 이미지는 핵심을 설명하는 몇 줄로 줄이는 편이 보통 더 좋습니다.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

FPS 카운터

requestAnimationFrame으로 브라우저 FPS를 측정하세요. 스무딩, 최소/최대 프레임레이트, 경고 임계값, 선택형 그래프를 제공합니다. 업로드나 API 없이 로컬에서 실행됩니다.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

색상 혼합기

두 HEX 색상을 2-20개의 균등한 색상 견본으로 섞습니다. 양 끝 색상을 포함해 각 중간 색상을 대문자 HEX 코드로 확인하세요.

ASCII 이진수 변환기

ASCII 문자열을 이진수 표현으로 변환하세요. 각 문자는 8비트가 되고 공백으로 구분되어 프로토콜 추적이나 과제에 바로 붙여넣기 좋습니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이 도구는 다른 언어로도 제공됩니다