MicroLighter: 구문 강조 표시기

자, 여기 있습니다! 복잡한 마크업, span, class, 그리고 무거운 JavaScript 없이 코드 블록에 대한 구문 강조 표시를 Uncle Dave가 제공합니다.

<pre>
<code class="language-javascript">const answer = 42;</code>
</pre>

MicroLighter는 Custom Highlights의 ::highlight() 가상 요소를 사용하며, 이는 올해 기준선(Baseline)이 됩니다!에 크게 의존하는 순수 CSS입니다.

이는 CSS-Tricks에서 필요한 모든 것—테마, 줄 번호, 다중 언어 지원, 의미론적 마크업 등—을 수행하지만, 우리가 의존하는 추가적인 종속성 없이 합니다.

Chris가 몇 년 전에 Prism.js를 플러그인으로 사용하는 사용자 지정 WordPress 블록을 만들었습니다. Prism도 결코 나쁜 것은 없습니다. 견고하고, 엄청나게 많은 언어를 지원하며, 또한 매우 가볍고 충분히 테스트되었습니다. 어느 쪽이든, 저는 이것을 저희의 WordPress 블록에 통합할 방법을 찾을 것입니다.

JavaScript가 전혀 관련되지 않는 것은 아닙니다. 단지 필요한 양이 적다는 것입니다. 그리고 현대 CSS에 너무 깊게 의존하여 light-dark() 지원과 사용자 정의 속성 같은 것들을 함께 가져오므로, 직접 테마를 만드는 것이 완전히 가능합니다.

--syntax-background: light-dark(#ffffff, #0d1117);
--syntax-foreground: light-dark(#24292f, #c9d1d9);
--syntax-comment: light-dark(#6e7781, #8b949e);
...

게다가, 원하는 것들을 아라카르트(à la carte) 방식으로 가져올 수 있다는 점에서 매우 모듈식입니다. 특정 테마, 지원해야 하는 필요한 언어만, 줄 번호, 웹 컴포넌트 등이 가능합니다.

import "microlighter/micro-lighter-element.min.js";

<micro-lighter language="javascript" controls="copy" line-numbers>
<pre>
<code
const answer = 42;</code>
...

이것은 구문 강조 표시를 함께 가져오는 이 영리한 작은 웹 폰트를 떠올리게 합니다. 저는 오랫동안 제 개인 사이트에서 아무 문제 없이 즐겁게 사용해 왔습니다.

업데이트 (2026년 8월 31일): Prism 대신 MicroLighter를 이 사이트에 추가하는 작업을 방금 마쳤습니다. 페이지 속도 등 성능에 대한 벤치마크는 하지 못했지만, 절감 효과가 상당히 크다고 말씀드릴 수 있습니다. Prism이 원본(raw) 기준으로 35 KB (gzip 압축 시 9.3 KB)였던 것에 비해, MicroLighter는 13.9 KB 원본(raw) (gzip 압축 시 5.2 KB)입니다. 워드프레스(WordPress) 전용 커스터마이징을 포함해야 했음을 고려하면 나쁘지 않은 수치입니다.