syntaxhighlighter보다 간단 티스토리 블로그에 소스 코드 컬러 넣기 highlight.js

개발자나 소스 코드 위주의 블로그를 운영한다면 코드가 한눈에 보이도록 하는 것은 중요한 것이다. 간단하게 소스 코드 주위를 <pre></pre>코드로 감싸기만 하면 자동으로 색을 넣어주는 highlight.js의 사용법에 대해 소개한다.

 

highlight.js는 무엇인가?

• JavaScript 라이브러리
• HTML 태그 안의 소스 코드를 자동으로 하이라이트
• 언어를 자동 감별
• 여러가지 언어 및 테마 사용 가능

 

링크 및 다운로드

• 공식 사이트
• 데모 사이트
• GitHub
• 지원 css 리스트

 

사용방법

html에 아래 코드를 추가하여 라이브러리 및 css를 로드시킨다.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/monokai.min.css">  
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>  
<script>  
window.addEventListener("DOMContentLoaded", function() {  
    hljs.initHighlightingOnLoad();
}, false)
</script>  

참고로 사용된 테마인 monokai.min.css 의 부분을 위의 지원 css리스트에서 찾아 .min.css의 앞부분만 바꾸면 된다. 적용후 사용 방법은 <pre> 소스 코드 </pre> 로 감싸주기만 하면 된다.