티스토리에 코드 하이라이트(SyntaxHighlighter) 기능 사용하기

SyntaxHighlighter

SyntaxHighlighter는 티스토리에서 프로그래밍 코드를 사용할 경우 보기 좋기 변환해 주는 플러그인 입니다. 현재(2011/12/12일 기준) 3.0.83 버전까지 릴리즈 되어있으면 다운로드는 아래의 링크에서 받으실 수 있습니다.

SyntaxHighlighter 다운로드 페이지 가기

 

SyntaxHighligter 티스토리에 설치

 
다운 받은 SyntaxHighliter를 티스토리에 적용시키는 것은 간단합니다. 먼저 다운받은 압축 파일을 해제 한 후 script, style 폴더에 있는 파일들만 티스토어의 HTML/CSS 편집의 파일업로드 메뉴에서 업로드 시킵니다. 그 다음 skin.html의 head 태그 안에 아래의 코드를 추가 합니다.

<!-- SyntaxHighlighter Start -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.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 -->

그리고 크롬 브라우저 사용자를 위해 css 편집창에 아래의 코드를 추가 합니다.

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

티스토리에서 SyntaxHighlighter 사용

글 작성시 코드 하이라이트를 적용하려면 글쓰기시 창의 상단 우측에 있는 html에 체크를 한 후 아래와 같이 pre 태그를 사용하여 코드 하이라이트 적용시킬 부분을 설정합니다.

<pre class="brush:코드이름">여기에 코드 작성</pre>

코드 이름에 코드 하이라이트를 적용하기 원하는 코드의 종류를 써 주면 됩니다. brush에 사용가능한 코드이름은 아래와 표와 같습니다. (brush 명을 사용하려면 필요 js 파일이 반드시 설치되어 있어야 합니다.)

분류	사용가능 brush명	필요 파일
Bash/shell	bash, shell	shBrushBash.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

테이블 출처 : 이런저런이야기


그 다음 html의 체크를 다시 해제한 후 위지웍 글쓰기 창에서 원하는 코드를 넣어주면 됩니다.



추가적으로 특정 줄에 하이라이트를 주고 싶다면 아래와 같이 pre 태그의 class 속성에 highlight 항목을 설정해 주면 됩니다.

    
   
       코드 들어가는 부분
    

<div class="title">
    <div class="wrapper">
        <h1>
            <a href="https://plasticradio.tistory.com/" title="플라스틱라디오's 크리에이티브 마인드">플라스틱라디오's 크리에이티브 마인드</a>
            <span class="blogCover">영화, 음악, 디자인, IT... 크리에이트한 마인드로 바라보기</span>
        </h1>
    </div>
</div>

또한 SyntaxHighlighter의 스타일을 변경하는 경우에는 skin.html에서 css를 바꿔주면 됩니다. SyntaxHighlighter의 스타일에는 shCore.css, shCoreFadeToGrey.css, shCoreEclipse.css, shCoreEmacs.css 등이 있습니다.


참고 : TistorySkin

SyntaxHighlighter Code Converter

티스토리에 SyntaxHighlighter를 이용해 코드를 올릴 시 원하는 대로 표시가 되지 않는 경우가 많은데 이러한 문제를 해결해주는 프로그램 입니다. 견족자K 님 께서 만드신 프리웨어로 코드 수정하지만 않는다면 자유롭게로 사용이 가능하다네요.

SHCC.exe

사용법은 아래의 출처의 링크를 참고하시면 됩니다.


출처 : '자유로운 그날을 위해' 블로그