[TISTORY] SyntaxHighlighter 3.0.83 설치 및 사용방법

SyntaxHighlighter 설치

SyntaxHighlighter는 블로그나 웹사이트에서 사용할 수 있는 코드 구문 하이라이터입니다.

HTML, Javascript, Python, C 등 여러 언어에 사용할 수 있고 스크린샷 같은 방식보다 가독성이 좋습니다.

다운로드

syntaxhighlighter-3.0.83.zip

혹은

https://github.com/syntaxhighlighter/syntaxhighlighter/archive/3.0.83.zip

다운로드를 완료하면 압축을 풀고 파일을 적용시켜야 합니다.

SyntaxHighlighter 적용

블로그관리 - 꾸미기 - 스킨 편집으로 이동합니다.

이후 HTML 편집 버튼을 누르고 파일업로드에 들어가 +추가 버튼을 눌러줍니다.

scripts 폴더와 styles 폴더에 있는 파일들을 전부 업로드합니다.

업로드한 파일을 적용시키기 위해 HTML로 들어가 </head>태그 위로 소스 코드를 작성합니다.

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

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

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shLegacy.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/shBrushPhp.js"></script>

<script type="text/javascript" src="./images/shBrushSass.js"></script>

<script type="text/javascript" src="./images/shBrushXml.js"></script>

<script type="text/javascript" src="./images/shBrushCpp.js"></script>

<script type="text/javascript" src="./images/shBrushPython.js"></script>

<script type="text/javascript">SyntaxHighlighter.all();</script>

소스 코드 작성을 완료하고 적용을 누르면 SyntaxHighlighter가 적용됩니다.

SyntaxHighlighter 사용

적용을 완료했으면 이제 사용하도록 하겠습니다.

글쓰기로 들어가서 HTML을 선택하고

<pre class="brush:사용할 언어>

소스 코드

</pre>

위와 같은 형식으로 사용하면 됩니다.

예제

<pre class="brush:c">

#include &lt;stdio.h&gt;

void main(){

printf("hello world!");

}

</pre>

#include <stdio.h>
void main(){
printf("hello world!");
}

C언어를 사용한 예제입니다. <,>는 각각 &lt,&gt로 변환해서 사용해야 합니다.