티스토리에 코드강조플러그인 syntaxhighlighter 사용하기

내가 네이버블로그를 사용할때에 남편의 티스토리 블로그가 참 부러웠었다.

왜냐하면 티스토리는 syntaxhighlighter를 간단하게 추가시켜 사용할 수 있었기 때문~

부럽다 부럽다를 연발하며 남편에게 네이버에서도

프로그래밍언어를 이렇게 표현해달라고 찡찡거렸던게 생각난다.

 

syntaxhighlighter는 정말인지 프로그래밍 언어 표현의 가독성을 높혀주고, 사용에 용의하게 해준다.

이 기능때문에 스토리블로그는 IT관련 종사자들이 많이 운영하는게 아닐까 라는 생각도 해본다.

 

나중에 또 까먹을수도 있으므로,

티스토리에서 syntaxhighlighter를 추가하고 사용하는 방법에 대해 살짝 정리해본다.

 

다운로드

 

[http://alexgorbatchev.com/SyntaxHighlighter/download/]

 

티스토리에 추가하기

 

HTML/CSS편집 >파일업로드 에서 다운받은 syntaxhighlighter  파일의 script, style 폴더를 업로드 한다.

 

HTML/CSS 탭으로 가서 skin.html 에 아래 코드를 추가시킨다.

이때, js파일은 사용할 파일만 추가하는것이 좋다.

js파일에 대한 자세한 설명은 [syntaxhighlighter Bundled Brushes]에서 확인해 볼수 있다.

 

<!-- SyntaxHighlighter Start -->
<script type="text⁄javascript" src=".⁄images⁄shCore.js"><⁄script>
<script type="text⁄javascript" src=".⁄images⁄shAutoloader.js"><⁄script>
<script type="text⁄javascript" src=".⁄images⁄shBrushCss.js"><⁄script>
<script type="text⁄javascript" src=".⁄images⁄shBrushJava.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⁄shBrushSql.js"><⁄script>
<script type="text⁄javascript" src=".⁄images⁄shBrushXml.js"><⁄script>

<link type="text⁄css" rel="stylesheet" href=".⁄images⁄shCoreDefault.css"⁄>
<link type="text⁄css" rel="stylesheet" href=".⁄images⁄shCore.css"⁄>

<script type="text⁄javascript">
⁄⁄<![CDATA[
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
⁄⁄]]>
<⁄script>
<!-- SyntaxHighlighter End -->

 

크롬 브라우저 유저를 위해 style.css에 아래 코드도 추가해준다.

 

div .syntaxhighlighter { 
    overflow-y: hidden!important; overflow-x: auto!important; 
}

 

사용하기

 

[syntaxhighlighter configuration]

 

pre태그로 감싼후 사용할 프로그램언어를 기제한다.

<pre class="brush: js">
    ⁄**
     * SyntaxHighlighter
     *⁄
    function foo()
    {
        if (counter <= 10)
            return;
        ⁄⁄ it works!
    }
<⁄pre>

 

<pre class="brush:html; highlight:[2,5]">   
   	<article>
		<header>
			<h1>Camp Swing It 2012<⁄h1>
			<p><time datetime="2011-06-30T09:30+09:00" pubdate="pubdate">2011년 6월 30일<⁄time><⁄p>
		<⁄header>
		<p>제 3회 <time datetime="2011-03-25">CSI 2011<⁄time>을 성공적으로 끝났습니다. <⁄p>
		<p>그리고 <time datetime="2012-04-27">2012년 4월<⁄time> 제 4회 CSI 2012가 성대한 막을 올립니다. 기대해 주세요.<⁄p>
		......
	<⁄article>
<⁄pre>

 

Syntax Highlighter Code Converter

 

티스토리 에디터의 문제인지 잘 모르겠으나, '<'같은 문자때문에 syntaxhighlighter 코드 표현이 잘 안된다.

따라서 코드를 변경해주어야 한다.

[자유로운 그날을 위해] 블로거님이 공유해준 Syntax Highlighter Code Converter 를 이용하면,

문자를 수정해 주면 좀 더 편하게 사용할 수 있다. :)

 

SHCC_v0113.zip