웹 페이지에서 코드를 보기 좋게 보여주려면 구문 강조(Syntax Highlighting)가 필수입니다. JavaScript로 이 기능을 직접 구현하는 것도 가능하지만, Google이 제공하는 오픈소스 라이브러리인 prettify를 사용하면 단 몇 줄만으로 손쉽게 적용할 수 있습니다.
1. prettify 라이브러리 불러오기
가장 먼저 HTML 문서에 아래와 같이 스크립트 태그를 추가해 구문 강조 라이브러리를 로드합니다.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
참고: 위 예시의 RawGit CDN은 현재 서비스가 종료되어 안정성이 떨어질 수 있습니다. 실무에서는 cdnjs처럼 유지보수가 잘 되는 CDN을 사용하는 것을 권장합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
2. 코드 블록에 prettyprint 클래스 적용하기
라이브러리를 로드했다면, 강조하고 싶은 코드를 감싸는 <pre> 태그에 prettyprint 클래스를 추가하기만 하면 됩니다.
<pre class="prettyprint">
여기에 코드가 들어갑니다
</pre>
유용한 활용 팁
- 언어 자동 인식: prettify는 JavaScript, Python, C++, HTML 등 대부분의 주요 언어를 자동으로 감지합니다.
- 언어 명시 지정: 자동 인식이 어렵다면
lang-*클래스를 함께 사용하세요. 예:class="prettyprint lang-js" - 테마 변경: 스크립트 URL 뒤에
?skin=sunburst와 같은 파라미터를 붙이면 다양한 색상 테마를 손쉽게 적용할 수 있습니다.
이처럼 prettify는 별도의 빌드 과정 없이 CDN 한 줄과 클래스 하나만으로 전문적인 코드 하이라이팅을 완성할 수 있는 가볍고 실용적인 라이브러리입니다.