티스토리 강좌 | highlight.js로 코드 하이라이트 구현하기

highlight.js

highlight.js는 스크립트 파일 하나와 CSS 파일 하나, 두 개의 파일만으로 코드 하이라이트를 구현할 수 있습니다.

많은 언어와 다양한 스타일을 제공하고, 자동으로 언어를 감지하는 기능도 갖추고 있습니다.

  • 162 languages and 74 styles
  • automatic language detection
  • multi-language code highlighting
  • available for node.js
  • works with any markup
  • compatible with any js framework

언어 지원

highlight.js는 현재 162개의 언어를 지원합니다. 단, CDN을 이용하면 22개의 언어만 사용할 수 있습니다.

이 22개의 언어 이외의 언어 지원이 필요하다면, 다운로드 받아 사용해야 합니다. 필요한 언어만 선택하여 다운로드 받을 수 있습니다.

스타일

highlight.js는 현재 74개의 스타일을 제공하고 있습니다.

https://highlightjs.org/static/demo/에서 각 스타일을 살펴볼 수 있습니다. 언어를 선택하고 스타일을 선택해보세요.

CDN 이용하기

skin.html의 <head>와 </head> 사이에 다음 코드를 넣습니다.

또는 다음 코드를 넣습니다.

스타일을 변경하려면 첫 줄을 바꾸면 됩니다. 예를 들어 Androidstudio 스타일을 적용하려면

대신

를 사용하면 됩니다.

정확한 스타일 이름은 styles directory에서 확인할 수 있습니다. 주의할 점은 .min을 추가해야 한다는 것입니다.

다운로드 받아 사용하기

https://highlightjs.org/download/에서 원하는 언어를 선택하여 다운로드 받습니다.

highlight.pack.js 파일과 원하는 스타일의 css 파일을 티스토리에 업로드합니다.

skin.html의 <head>와 </head> 사이에 다음의 코드를 추가합니다. (androidstudio.css를 사용한다고 가정한 코드입니다.)

코드 넣는 방법

자동 감지

글 작성 시 HTML 모드로 들어가서 다음처럼 코드를 넣으면 자동으로 언어를 감지하여 하이라이트를 만듭니다.

주의할 점은 <code> 바로 다음부터 코드가 들어가야 한다는 것입니다. 만약

처럼 <code> 바로 뒤에서 줄바꿈을 하면 첫 줄이 빈 줄이 됩니다.

언어 지정

언어를 지정하려면 class를 부여합니다. 예를 들어 css라면

와 같이 합니다. (클래스 값으로 language-css 또는 lang-css도 가능합니다.)

언어별 클래스 값은 class reference에서 확인할 수 있습니다.

스타일 사용하지 않기

만약 스타일이 필요 없는 코드라면 nohighlight를 클래스 값으로 합니다.

예제

스타일은 Androidstudio를 사용했습니다.

HTML 코드 넣는 방법

글 작성 시 HTML 모드에서

를 입력하면 <p>와 </p>가 출력되지 않습니다. 문자열이 아닌 태그로 인식하기 때문입니다.

따라서 <는 &lt;로, >는 &gt;로 바꾸어서 입력해야 합니다.

TISTORY SKIN

상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 대표 : 주재범 TEL : 031-388-9261(874) E-MAIL : jb.jbfactory@gmail.com 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호
통신판매업신고번호 : 제2017-안양동안-0574호 사업자정보공개 호스팅서비스 : NAVER Business Platform 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침