Table of Contents
Code Highlighter / Syntax Highlighter
티스토리에 코드 하이라이터 를 적용해 볼까 해서 글을 남깁니다.
하이라이터 선택
먼저 몇가지 코드 하이라이터를 찾아보면 여러가지가 있습니다. 본인의 취향에 맞게 쓰시면 됩니다.
제 경우 pre와 code를 둘 다 붙여야하는 번거로움에도 불구하고 이것저것 커스텀도 가능한 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
