Syntax Highlighter — 온라인 구문 강조 도구

소스 코드

프로그래밍 언어

코드 미리보기

const palette = ['graphite', 'mint'];

function createSnippet(language) {
  return {
    language,
    theme: palette[0],
    accent: palette[1],
  };
}

console.log(createSnippet('javascript'));

{
  "language": "javascript",
  "theme": "github-dark",
  "output": "inline",
  "highlight": [],
  "highlightColor": "#60a5fa",
  "highlightOpacity": 25,
  "focusColor": "#60a5fa",
  "focusOpacity": 25,
  "addColor": "#22c55e",
  "addOpacity": 20,
  "removeColor": "#b91c1c",
  "removeOpacity": 30,
  "lineNumbers": false,
  "lineNumbersStart": 1,
  "lineNumberColor": "#888888",
  "focus": [],
  "add": [],
  "remove": [],
  "collapse": [],
  "diffIndicators": true,
  "diffInGutter": false,
  "autolink": false,
  "summary": "…"
}

온라인 구문 강조로 읽기 쉽고 공유하기 좋은 코드

문서, 블로그, 수업 자료에 넣을 코드 예제를 준비하세요. 코드를 붙여넣거나 텍스트 파일을 열고, 언어별 예제로 시작할 수도 있습니다. 밝은 테마와 어두운 테마 중 하나를 고르면 Syntax Highlighter가 들여쓰기와 줄바꿈을 유지하면서 키워드, 문자열, 주석을 색으로 구분합니다.

중요한 줄을 강조하거나 특정 부분에 초점을 맞추고, 추가한 줄과 삭제한 줄을 표시하세요. 각각의 색상과 불투명도를 조절하고 줄 번호를 추가하거나 긴 구간을 접으면 미리보기에 바로 반영됩니다. 구문 강조와 내보내기는 브라우저 안에서 이루어지며, 강조 처리를 위해 코드를 서버로 보내지 않습니다.

강조된 줄이 있는 코드와 HTML 문서 및 코드 이미지 출력을 보여 주는 일러스트

검색 가능한 언어 목록
TypeScript, Java, C++, Go, Rust, JSON, YAML 등 242개 언어와 형식 중 선택하세요. 이름이나 별칭으로 검색하고 아래 카드에서 예제를 불러올 수 있습니다.
실시간 미리보기와 색상 테마
소스를 수정하면 강조 결과도 업데이트됩니다. 색상 테마를 검색하거나 밝고 어두운 테마로 필터링해 같은 코드를 다른 배경에서 비교하세요.
HTML 또는 이미지로 저장
HTML을 복사하거나 인라인 스타일, 별도 CSS, Tailwind CSS를 사용하는 파일을 다운로드하세요. 렌더링 결과를 PNG 이미지로 저장할 수도 있습니다. 미리보기는 선택한 출력 형식을 사용하므로 공유하기 전에 모양을 확인할 수 있습니다.

온라인으로 코드를 강조하는 방법

코드 붙여 넣기 또는 예제 사용
소스 편집기에 코드를 입력하세요. 다른 언어를 탐색하려면 아래 카드를 클릭해 해당 언어의 예제로 내용을 바꾸세요.
알맞은 언어 선택
JavaScript나 js처럼 이름 또는 별칭으로 검색하세요. 선택기를 바꿔도 입력은 유지됩니다. 올바른 문법을 선택해야 알맞은 구문 규칙이 적용됩니다.
미리보기에서 테마 비교
색상 테마를 선택하고 편집하면서 결과를 확인하세요. 긴 코드는 미리보기 안에서 스크롤되므로 원래 배치를 유지하면서 각 줄을 볼 수 있습니다.

일상적인 코드 읽기에 활용

튜토리얼과 기술 문서
가이드나 수업을 준비하기 전에 예제의 가독성을 비교하세요. 주석, 문자열, 키워드가 있는 같은 코드로 밝고 어두운 테마를 시험할 수 있습니다.
설정 파일과 구조화된 데이터
구문 색상으로 JSON, YAML, SQL, 셸 코드의 구조를 살펴보세요. 패턴을 찾기 쉽게 하지만 데이터를 검증하거나 명령을 실행하지는 않습니다.
낯선 언어 익히기
언어의 예제, 별칭, 참고 자료를 확인하고 코드를 수정해 색상 표시를 살펴보세요. 카드를 클릭하면 현재 작업 공간으로 바로 불러옵니다.

전체 242개 언어와 예제 보기

구문 강조에 관한 질문

구문 강조란 무엇인가요?

키워드, 문자열, 주석 같은 코드 요소에 다른 색상을 지정하는 기능입니다. 코드 구조를 읽기 쉽게 하지만 코드가 올바르다는 보장은 아닙니다.

어떤 언어를 지원하나요?

현재 목록에는 242개 언어와 형식이 있습니다. 선택기에서 검색하거나 전체 목록을 보세요. js, py 같은 별칭은 기존 언어를 가리키며 별도 언어로 세지 않습니다.

코드가 업로드되거나 실행되나요?

강조는 브라우저에서 동작하며 소스를 서버로 보내지 않습니다. 문법, 테마, 엔진 파일은 필요할 때 다운로드합니다. 입력 코드는 텍스트로 표시되며 실행되지 않습니다.

코드 포매터나 구문 검사기인가요?

아닙니다. 들여쓰기와 줄바꿈을 포함한 입력을 보존하며 색상만 추가합니다. 코드 정리, 컴파일, 검증, 디버깅은 하지 않습니다. 원하는 강조를 위해 언어를 직접 선택하세요.

강조된 HTML을 복사하거나 다운로드할 수 있나요?

네. 인라인 스타일, 별도 CSS 파일, Tailwind CSS 중 선택할 수 있습니다. 생성된 파일을 개별 복사하거나 전체 묶음을 다운로드하세요. 미리보기와 출력은 같은 HTML과 스타일을 사용합니다.

줄을 강조하거나 파일을 가져올 수 있나요?

네. 강조할 줄에 번호나 범위를 입력하고 색상과 불투명도를 고르세요. 내용이 있는 1 MiB 이하 UTF-8 파일도 브라우저에서 직접 읽을 수 있습니다.

코드 예제 살펴보기

지원하는 242개 언어와 형식을 살펴보세요. 카드를 클릭해 예제를 불러오거나 참고 자료에서 자세히 알아보세요.

ABAP

ABAP 은 SAP 애플리케이션을 개발하고 SAP 시스템을 사용자 정의하는 데 사용되는 SAP 의 독점 프로그래밍 언어입니다.

온라인 구문 강조로 읽기 쉽고 공유하기 좋은 코드

검색 가능한 언어 목록

실시간 미리보기와 색상 테마

HTML 또는 이미지로 저장

온라인으로 코드를 강조하는 방법

코드 붙여 넣기 또는 예제 사용

알맞은 언어 선택

미리보기에서 테마 비교

일상적인 코드 읽기에 활용

튜토리얼과 기술 문서

설정 파일과 구조화된 데이터

낯선 언어 익히기

구문 강조에 관한 질문

코드 예제 살펴보기

ABAP

ActionScript

Ada

AutoHotkey

AutoHotkey2

Angular HTML

Angular TypeScript

Apache Conf

Apex

APL

AppleScript

Ara

AsciiDoc

Assembly

Astro

AWK

Ballerina

Batch File

Beancount

Berry

BibTeX

Bicep

BIRD2 Configuration

Blade

1C (Enterprise)

C

C3

Cadence

Cairo

Chapel

Clarity

Clojure

CMake

COBOL

CODEOWNERS

CodeQL

CoffeeScript

Common Lisp

Rocq

C++

Crystal

C#

CSS

CSV

CUE

Cypher

D

Dart

DAX

Desktop

Diff

Dockerfile

dotEnv

Dream Maker

Edge

Elixir

Elm

Emacs Lisp

ERB

Erlang

Fennel

Fish

Fluent

Fortran (Fixed Form)

Fortran (Free Form)

F#