Highlight.js 코드 블록 테마 변경하는 방법

Highlight

하이라이트 JS (Highlight.js)는 코드 문법을 감지하고 색상을 부여하여 코드를 강조 표시하는 JavaScript 라이브러리입니다. 이 라이브러리는 다양한 프로그래밍 언어와데이터 형식에 대해 문법 감지를 지원하며,웹 페이지나 앱에서 코드 조각을 보기 좋게 표시할 수 있도록 도와줍니다.

Highlight.js를 사용하면 코드 조각을 감지하고 자동으로 색상을 지정하여 문법적으로 올바르게 표시할 수 있습니다. 이는 코드의 가독성을 향상하고 사용자에게 코드의 의미를 빠르게 이해할 수 있도록 돕습니다.

그래서 Highlight.js는 프로그래밍 블로그, 온라인 문서, 개발자 커뮤니티 등 다양한 곳에서 널리 사용되고 있습니다.

기본설정

티스토리 html편집으로 이동하여 head 사이에 아래 코드를 붙여 넣기 합니다.

<!--codeblock highlight-->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/원하는-스타일-이름.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

스타일 선택

아래 Highlight 공식 사이트에서 자신이 원하는 테마를 천천히 찾아보고 선택하도록 합니다.

highlight.js - Demo

진행과정을 보여드리기 위해 안드로이드 스튜디오 테마를 선택하였습니다.

이제 선택한 테마의 css코드를 확인하기 위해 아래 깃허브로 이동하여 스타일 테마명을 확인합니다.

highlight.js/src/styles at main · highlightjs/highlight.js

자신이 선택한 테마를 확인하셨다면 해당 파일명을 복사합니다.

확장자(css)까지 복사하지 않습니다. 파일 이름만 복사하시면 됩니다.

코드수정

선택한 테마의 css코드 네임을 확인하셨다면 이제 처음 head 사이엡 입력했던 코드를 수정합니다.

이렇게 수정을 마치고 상단에 저장 버튼을 클릭하면 테마변경이 완료됩니다.

마무리

간단하게 코드블록의 테마를 변경할 수 있습니다. 만약 적용이 잘 안 된다면, 티스토리 플러그인 Syntax highlight 적용을 해제하시면 됩니다.