davatron5000/microlighter

어떤 프로젝트인가요?

핵심 기능

• 01압축 기준 약 2 KiB이며 런타임 의존성이 없습니다
• 02DOM에 토큰 span 요소를 삽입하지 않고 코드를 강조합니다
• 03TextMate 문법을 바탕으로 필요할 때 로드되는 언어 37개를 지원합니다
• 04CSS 사용자 지정 속성으로 설정하는 테마 10개를 제공합니다
• 05프로그래밍 방식, 자동 실행 방식, 웹 컴포넌트 API를 제공합니다
• 06강조된 코드 블록을 일반 텍스트로 편집할 수 있습니다

활용 사례

• 문서 사이트나 블로그에 가벼운 구문 강조 기능을 추가할 때
• 편집 가능한 웹 컴포넌트나 브라우저 내 코드 편집기에서 코드를 강조할 때
• Shiki 같은 대형 의존성 없이 구문 강조를 원하는 프로젝트

빠른 시작

1. 1

   패키지를 설치합니다

   npm install microlighter
2. 2

   테마를 가져오고 JavaScript에서 하이라이터를 실행합니다

   import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();

사용 전 알아둘 점

• !언어 지원 범위와 문법 정확도가 Shiki와 같은 대규모 도구보다 제한적입니다.
• !CSS Custom Highlight API를 사용하므로 브라우저가 이를 지원해야 합니다.

토픽

자주 묻는 질문

microlighter은(는) 무엇인가요?

모든 토큰을 span 요소로 감싸는 대신 CSS Custom Highlight API를 사용하는, 의존성 없는 JavaScript 구문 강조 도구입니다. MicroLighter는 웹 페이지를 위한 작은 구문 강조 도구입니다. TextMate 문법을 읽고 브라우저의 CSS Custom Highlight API를 통해 색상을 적용하므로, 코드 블록 안에 토큰 span 요소를 넣지 않고 깔끔한 마크업을 유지합니다. 라이브러리 크기는 압축 기준 약 2 KiB이며 런타임 의존성이 없습니다.

microlighter은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

microlighter은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

microlighter은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. microlighter의 마지막 커밋은 2026년 9월 11일입니다.

microlighter은(는) 어디에 사용할 수 있나요?

문서 사이트나 블로그에 가벼운 구문 강조 기능을 추가할 때 편집 가능한 웹 컴포넌트나 브라우저 내 코드 편집기에서 코드를 강조할 때 Shiki 같은 대형 의존성 없이 구문 강조를 원하는 프로젝트

microlighter는 어떻게 설치하나요?

패키지를 설치합니다: npm install microlighter 테마를 가져오고 JavaScript에서 하이라이터를 실행합니다: import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();

microlighter은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/davatron5000/microlighter