블로그에 소스코드 하이라이팅 기능 넣기

블로그 스킨을 손본다고 한참 업로드를 하지 못했습니다. 앞으로 몇 개의 글은 이번 스킨에서 추가한 기능들을 다룹니다.

티스토리에서 소스코드 입력

티스토리의 마크다운 에디터를 사용하면 손쉽게 소스코드 블록을 만들 수 있습니다. 마크다운 에디터에서는 주로 아래와 같은 방식으로 작성합니다.

```js
var a;
function func(arg) {
  let c = arg + 3;
  return c;
}
```\

마크다운에서는 이것을 코드 블럭이라고 하며, 변환 결과는 다음과 같습니다.

<pre><code class="language-js">
var a;
function func(arg) {
  let c = arg + 3;
  return c;
}
</code></pre>

highlight.js

highlight.js는 마크다운으로 작성한 코드 블럭의 언어에 맞는 방식으로 내용물을 해석하여 색상을 입힙니다. 여러 스타일을 제공하고 있으며, 이 스타일은 해당하는 css파일을 불러 표시할 수 있습니다.

이 스킨은 cdnjs에서 제공하는 cdn을 불러와 사용했습니다.

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js" onload="hljs.initHighlightingOnLoad()"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/" />

위는 html코드입니다. 저는 head태그에서 불러오지만 개발자는 body태그가 끝나는 지점에서 불러오는 것을 추천합니다.

는 테마 옵션에서 불러오는 코드 하이라이팅 스타일입니다. 적당한 스타일을 골라 직접 github-gist.min.css등을 넣으면 됩니다. 스타일 시트까지 함께 불러오지 않으면 하이라이트 효과가 작동하지 않습니다.