티스토리 블로그에 코드 하이라이터 prism.js 적용하기

블로그에 소스코드를 넣어야 하는 경우가 있습니다. 이러할 경우 코드 하이라이터를 사용해주면 좋은데, 그 중에서도 꽤나 나이스한 디자인을 보여주는 prismjs를 티스토리 블로그에 적용해보도록 하겠습니다.

prismjs 홈페이지 주소입니다.

http://prismjs.com/index.html

공식 홈페이지에 가서 DOWNLOAD라는 버튼을 누릅니다.

다운로드 페이지로 가면, 필요한 구성요소를 직접 골라서 다운로드를 받을 수 있습니다. Compresion Level에는 개발버전과 Minified 버전이 있는데, 개발 버전은 prism.js의 소스코드를 변경해서 자신의 입맛대로 만들어 쓸 경우 필요한 버전입니다. 저희는 그냥 있는 버전을 사용하기만 할 것이므로 Minified version을 선택합니다.

테마의 경우 오른쪽에 있는 원들을 눌러서 하단에서 실제 적용된 테마의 모습을 확인할 수 있습니다. 저 같은 경우에는 Okaidia 테마가 마음에 드므로 해당 테마를 선택했습니다.

그 외에도 하이라이팅을 지원하는 언어들과, 다양한 플러그인들을 제공합니다. 저는 기본 제공하는 언어 외에 C++ 언어를 추가하였고, 플러그인은 줄 번호를 표시해주는 플러그인을 선택했습니다.

하단으로 내려가면 적용될 테마의 모습이 보입니다. 다운로드 JS와 다운로드 CSS를 한번씩 눌러서 prism.js와 prism.css 파일을 다운로드 받습니다.

그리고 티스토리 관리 페이지로 가서 꾸미기 탭의 HTML/CSS 편집으로 들어갑니다.

우측 상단에 보이는 파일 업로드를 누릅니다.

여기에 추가 버튼을 눌러서 prism.js 파일과 prism.css 파일을 업로드 해 줍니다.

파일들이 추가된 모습들이 보입니다. 이 파일들이 추가된 경로를 확인해놓습니다. 저의 경우에는 images/prism.js와 images/script.js 의 경로에 추가되었습니다.

그리고 다시 HTML을 눌러서 태그를 추가해야 합니다.

head 닫는 태그, 즉 </head> 바로 위에 위와 같이 추가해줍니다.

<script src="./images/prism.js"></script>
<link rel="stylesheet" href="./images/prism.css">

그리고 저장 버튼을 눌러서 적용해 주면 됩니다.

이후 코드 하이라이팅이 필요한 경우 에디터에서 HTML 모드를 활성화 한 뒤 다음 태그를 입력해주면 됩니다.

<pre class="line-numbers language-cpp"> 
<code class="language-cpp">
//여기에 소스코드를 작성하시면 됩니다.
</code>
</pre>

HTML 모드에서 코드를 작성하려고 하면 <나 >와 같은 문자들을 또 수동으로 &gt; &lt; 등으로 이스케이프 처리해주어야 합니다. 따라서 추천하는 방법은 HTML모드에서 pre와 code 태그만 작성한 뒤, 위지윅 모드에서 소스코드를 붙여넣기하는 방법입니다.