Blogger에 코드 구문 강조 적용

이 블로그(http://sk8erchoi-tech.blogspot.com/)에 쓰는 글에는 프로그램 소스 코드라든지, 명령행에서 입력하는 내용이 종종 포함된다. 본문과 코드가 뒤섞이다보면 읽기가 불편하고, 글을 쓰는 입장에서도 어떻게 처리해야할 지 난감하다. 그래서 검색을 좀 해보니 구문 강조(syntax highlighting)를 해주는 JavaScript 패키지가 몇 가지 있다.

이번에 적용한 것은 highlight.js이다. 다음과 같이 블로거에 적용했다.

1. 블로거의 템플릿 메뉴에서 HTML 편집 버튼 클릭. </head> 윗줄에 다음의 코드를 삽입.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>

 2. 게시물의 코드 부분을 다음과 같이 pre와 code 태그를 사용하여 감싸기.

<pre><code class="python">print("hello")</code></pre>

3. 스타일(테마)을 변경하고 싶으면, 데모 페이지에서 원하는 스타일의 이름을 알아둔 다음, 스타일 디렉터리에서 해당되는 파일명을 확인하고, 1.의 템플릿 HTML을 수정. 예를 들어, Tomorrow Night 스타일을 적용하려면 default.min.css를 tomorrow-night.min.css로 변경한다.