코드 하이라이트 사용하는 방법

코드 하이라이트 기능을 포함한 스킨은 다음과 같습니다.

  • JB SKIN 113 V0.1.0 +
  • JB SKIN 127 V0.4.0 +

highlight.js

코드 하이라이트는 highlight.js로 구현했습니다.

2017년 8월 20일 현재 176개의 언어를 지원하는데, 티스토리 스킨에는 CDN으로 연결했기에 23개의 언어만 사용할 수 있습니다.

코드 넣는 방법

자동 감지

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

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

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

언어 지정

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

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

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

스타일 사용하지 않기

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

HTML 코드 넣는 방법

글 작성 시 HTML 모드에서

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

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

스타일 변경하기

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

skin.html에 다음과 같은 코드가 있습니다.

androidstudio.min.css를 변경하면 스타일이 바뀝니다.

예를 들어 Androidstudio 스타일을 적용하려면 androidstudio.min.css로 바꾸면 됩니다.

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

TISTORY SKIN

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