Syntax Highlighter

2011.09.24 09:05 티스토리

코드 하일라이팅으로 매우 유명한 Syntax Highlighter을 티스토리에 적용해 보도록 합시다. 역시 BLUEnLIVE님이 만드신거..

SH_TiStory.zip

위 파일을의 압축을 풀고 shCore.js, shCoreEclipse.css 파일을 HTML/CSS 편집→파일 업로드에 올립니다. 그리고 Brush 폴더 안에서 자신에게 필요한 브러쉬 파일들을 찾아서 그 파일들도 업로드합니다. 예를 들어서 HTML은 shBrushXml.js, C++은 shBrushCpp.js 파일을 업로드하시면 됩니다. 다른 브러쉬 파일이나 업데이트된 파일들은 여기나 인터넷에서 더 받으실 수 있습니다.

업로드 완료 후 아래 내용을 skin.html의 <head>~</head> 사이에 넣으시고

<script src="./images/shCore.js"></script>
<script src="./images/브러쉬 파일명.js"></script>
<link rel="stylesheet" href="./images/shCoreEclipse.css"/>
<script>
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.all();
</script>

강조된 줄 부분을 업로드한 브러쉬 수만큼 맞게 고쳐서 넣어야합니다. 그리고 아래 내용을 style.css에 추가해주세요.

div.syntaxhighlighter {overflow-y: hidden!important;}
div.syntaxhighlighter div.container:before {display:none;}

사용법!

<pre class="brush:html">
내용
</pre>
<script type="syntaxhighlighter" class="brush:html">
내용
</script>

위와 같은 방식으로 사용하시면 됩니다. 첫째줄에 html를 수정해서 다른 브러쉬를 사용하실 수 있고요. <pre> 방식이랑 <script> 방식이 각각 장단점이 있습니다.

<pre> 방식은 페이지 로딩 중엔 알맹이(?)만 보이다가 로딩이 끝나면 하일라이팅이 되는 대신에 모종의 이유로 Syntax Highlighter가 작동하지 않아도 알맹이(?)는 볼수 있고 <script> 방식은 로딩중엔 아무것도 안보이다가 로딩이 끝나면 뿅하고 나타나는 대신에 Syntax Highlighter가 작동하지 않으면 코드를 볼 수 없습니다.

이것 말고도 class를 수정해서 다른 기능을 추가할 수 있습니다.

1. 줄강조

<pre class="brush:html;highlight:[1,3]">
첫째와 셋째줄 하일라이팅~
</pre>

2. 코드 접기

<pre class="brush:html;collapse:true">
코드 접기~
</pre>

3. 줄시작 번호 설정

<pre class="brush:html;first-line:5">
줄이 5부터 시작하죠?ㅋ
</pre>

4. 줄번호 끄기

<pre class="brush:html;gutter:false">
줄번호가 없습돠..
</pre>

5. 탭 길이 설정

<pre class="brush:html;tab-size:3">
탭길이 3	3	3
</pre>
<pre class="brush:html;tab-size:5">
탭길이 5	5	5
</pre>

6. 툴바 없애기

<pre class="brush:html;toolbar:false">
오른쪽 위에 ?가 없어짐요. 3버전부터는 쓸모 없어진듯?
</pre>

출처 : http://zoc.kr/970

이 댓글을 비밀 댓글로

티스토리 툴바