티스토리 코드 하이라이터 적용하기 Prismjs

Table of Contents

Code Highlighter / Syntax Highlighter

티스토리에 코드 하이라이터 를 적용해 볼까 해서 글을 남깁니다.

하이라이터 선택

먼저 몇가지 코드 하이라이터를 찾아보면 여러가지가 있습니다. 본인의 취향에 맞게 쓰시면 됩니다.

제 경우 pre와 code를 둘 다 붙여야하는 번거로움에도 불구하고 이것저것 커스텀도 가능한 prismjs로 선택했습니다.

hightlightjs

SyntaxHighlighter

Prismjs

PrismJS

다운로드

해당 사이트에서 다운로드 할때 옵션을 선택할 수 있습니다. 현재 제 스킨이 문제인지 Coy 말고는 제대로 동작을 안하네요. 

Skin은 Coy 선택, 언어는 필요한 bash, php, python 등등 이래저래 선택하고

Plugin은 Line number, remove initial feed, copy to clipboard(선택시 toolbar는 자동선택됨)

** 2017.09.27 추가 내용 **

Remove Initial Feed의 경우 현재 Deprecated(사라질) 상태입니다. 그러므로 대신 Normalize Whitespace를 사용하라고 합니다.

티스토리 업데이트 이후인지 잘 모르겠지만 copy to clipboard도 정상적으로 작동하는 것 같지 않아서 삭제했습니다.

그래서 현재 line number와 normalize whitespace만 사용중입니다.

이렇게 선택하고 아래 css, js 다운로드를 눌러서 파일 두개를 받습니다.

파일 업로드

받은 prism.js 파일과 prism.css 파일을 티스토리 관리자 페이지의 HTML/CSS 편집으로 들어가서 파일을 업로드 해줍니다.

파일을 올리면 images 폴더에 올라가게 됩니다.

HTML 코드 추가

파일을 업로드 하고 html로 가서 제일 아래 </body> 윗 부분에 아래와 같이 삽입합니다.

<!--Code Highlighter-->
<link href="./images/prismv2.css" rel="stylesheet" />
<script src="./images/prism.js"></script>

하이라이터 확인

<pre class="line-numbers"><code class="language-markup">
<div>code here</div>
</code></pre>

code here