'티스토리' 태그의 글 목록

tistory에 code highlight 적용 하는 방법.

먼저 해당 사이트에서 syntaxhighlighter를 다운 받는다.

(http://alexgorbatchev.com/SyntaxHighlighter/)

혹은 현재 최신 버전을 다운로드 받는다.

syntaxhighlighter_3.0.83.zip

그리고 압축을 풀어서 scripts, styles 폴더를 모두 업로드 한다.

이후 몇가지 셋팅을 해줘야 하는데.

skin.html 파일에 업로드한 scripts의 파일들중 사용하려는 js파일과 기본 core파일을 로드해줘야한다.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

또한 코드 노출시 사용하고 싶은 스타일을 따로 적용할수 있는데 styles에 포함된 파일들중 하나를 선택해서 로드하면 된다.

<link type="text/css" href="./images/shCore.css" rel="stylesheet" />
<link type="text/css" href="./images/shThemeDefault.css" rel="stylesheet" />