SyntaxHighlighter 웹 구문 강조 라이브러리

SyntaxHighlighter 는 웹에서 각종 소스 코드에 색을 입혀주는 구문 강조 javascript 라이브러리이다.

직접 업로드해서 코드를 추가해주는 방법도 있지만...
제작자가 직접 호스팅 해주는 것을 이용하면 javascript 코드 추가만 하면 이용할 수 있다.

HTML/CSS 편집의 skin.html에서 head가 끝나는 부분에 아래의 코드를 삽입하자.

<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></SCRIPT>
<LINK href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css">
<LINK href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">

<SCRIPT language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</SCRIPT>

이렇게 하면 코드 하이라이트 기능을 이용할 수 있다.

우선 아래 주소에서 파일을 다운받자.
http://alexgorbatchev.com/wiki/SyntaxHighlighter

파일을 다운 받고 압축을 풀면 다음과 같은 폴더들이 생겼을 것이다.

홈페이지 또는 블로그에 적용하기 위해서는 파일들을 업로드해야 한다.
Tistory에서도 HTML/CSS편집 탭에서 파일업로드와 스킨 편집이 가능하기 때문에 설정이 가능하다.
파일을 업로드하자.(scripts폴더와 styles폴더를 올려야 한다.)

업로드 후 HTML/CSS 편집의 skin.html에서 head가 끝나는 부분에 아래의 코드를 삽입하자.

<SCRIPT src="./images/shCore.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushBash.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushCpp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushCSharp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushCss.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushDelphi.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushDiff.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushGroovy.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushJava.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushJScript.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushPhp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushPlain.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushPython.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushRuby.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushScala.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushSql.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushVb.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./images/shBrushXml.js" type="text/javascript"></SCRIPT>
<LINK href="./images/shCore.css" type="text/css" rel="stylesheet">
<LINK href="./images/shThemeDefault.css" type="text/css" rel="stylesheet">

<SCRIPT language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</SCRIPT>

설정 완료 !!

<테마 적용법>
이 라이브러리는 몇개의 테마를 제공한다.
제공되는 테마는 다음 주소에서 확인할 수 있다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes

<LINK href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
이 부분의 shThemaDefault.css 대신에 변경할 테마 파일 이름을 지정하면 된다.

직접 제작한 테마는 업로드하여 업로드된  css파일을 지정하면 된다.


<사용법>
글쓰기에서 HTML모드로 들어가 아래와 같은 형식으로 코드를 작성하면 된다.(C++ 의 경우)

<PRE class="brush:cpp">

   코드내용

</PRE>

다른 언어를 사용하고 싶을 경우 참고하자.

언어	명칭
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

SyntaxHighlighter 꺽쇠 < > 오류(http://www.donghuna.com/112 참고)

코딩에서 크기비교 <, > 꺽쇠사용을 자주 하게 되는데 이러한 코드들을 블로그에 게시할때
SyntaxHighlighter를 사용하여 올리게 되면 아래와 같이 이상하게 출력이 되게 된다.

보통 반복문을 쓰면 이런 오류가 나길래 반복문을 쓰면 안되는줄;;

다음과 같이 입력했을 경우 바르게 나오지 않는다.

<PRE class="brush:cpp">
#include <IOSTREAM>
using namespace std;
int main(void){
    int a, i;
    scanf("%d",&a);
    for(i=0;i<a;i++){
        printf("*");
    }
    return 0;
}
</PRE>

아래와 같이 수정해야 제대로 나온다.

<PRE class="brush:cpp">
#include <IOSTREAM>
using namespace std;
int main(void){
    int a, i;
    scanf("%d",&a);
    for(i=0;i &lt; a;i++){
        printf("*");
    }
    return 0;
}
</PRE>

<  대신 &lt;
 
> 대신 &gt;

위와 같이 수정해야 제대로 표시된다.