가독성과 복사를 위한 소스 하이라이터 prism.js 추가하기
아무래도 개발자나 퍼블리셔가 블로그를 운영하다보면 소스 코드를 추가 하는 기능을 필요로 합니다. 하지만 아직 티스토리에는 추가 될 여력이 없는지 공식적으로 지원하지 않는데요. 그렇다고 그냥 소스코드를 텍스트 형태로 집어넣기에는 사용자나 블로거나 불편하기는 마찬가지 입니다.
그렇기 때문에 텍스트 하이라이터는 필수적인 요소라고 해도 과언이 아닌데요.
재미나게도 js 전체를 다운받는것이 아니라 필요한 언어에 한해 다운 받을 수 있게 되어 있더라고요. 나중을 대비해서 대충 이름 들어봤었던 랭귀지를 전부 추가하더라도 js와 css 파일을 합쳐도 30kb도 안하니 하이라이터를 추가하는데 큰 무리가 없어보였습니다.
티스토리에 prism 추가하기
다운을 받았다면 이제 티스토리에 추가를 해야하는데요. 설정 - 꾸미기 - HTML/CSS 편집으로 들어가서 파일업로드에 일단 파일을 넣으시면 됩니다. 그리고 나서는 css와 js 파일을 넣으시면 되는데요.
보이는 것과 같이 헤더에는 css를 추가하고 </body> 위쪽에는 js 파일을 추가하면 됩니다. 이렇게 되면 일단 prism 하이라이터를 쓸 준비가 얼추되었는데요. 티스토리에서 공식으로 지원하는 플러그인이 아니기 때문에 사용방법은 살짝 까다롭습니다. 바로 HTML 부분을 건들여줘야 하기 때문인데요.
<pre><code class="language-xxxx">소스코드</code></pre>
이런식으로 작업을 진행하시면 됩니다. language-xxxx 의 xxx부분은 사용할 언어의 약어를 사용하시면 그 언어의 특성에 맞춰서 태그가 표시될 것 이고요.
<!DOCTYPE html>
<html>
<head>
...
<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>
처음에는 사실 익숙치 않은 작업이 될텐데요. 사용하다보면 소스 코드를 그대로 붙일 수 있는 장점 때문에 많이 사용하게 될 것 같아요. 그리고 저 처럼 개발 블로그를 운영하는 사람이라면 꼭 필요한 플러그인이기도 하지요.
