[Syntaxhighlighter] 테마 설정하기

THINK_PRO 2013. 9. 24. 14:54

이전에 Syntaxhighlighter를 설치하고 적용한 후 사용하는 방법에 대한 포스트를 올렸는데,

이번에는 조금 더 나아가서 Syntaxhighlighter의 테마를 설정하는 방법에 대해서 알려드리겠습니다.

Syntaxhighlighter를 적용할 때, HTML/CSS 탭의 skin.html 파일을 수정해야 했었는데요.

그 때 , <head>와 </head> 태그 사이에 다음 소스 코드를 집어넣었습니다.


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

위 소스 코드를 보면 알겠지만 크게 두 가지 부분으로 나뉘어집니다.

바로, <script 로 시작하는 부분과 <link 로 시작하는 부분입니다.

1.<script로 시작하는 부분은 syntaxhighlighter에서 사용할 언어에 대한 js 파일에 대한 설정입니다.

만약, C++ 로 코딩한 소스를 syntaxhighlighter를 이용해서 표현하려면 반드시

<script type="text/javascript" src="./images/shBrushCpp.js"></script>와 같은 설정이 필요합니다.

2.<link로 시작하는 부분은 style에 대한 부분입니다.

즉, 이번 포스팅에서 집중해야 할 부분입니다.

첫 번째 줄인 shCore.css 에 대한 설정은 반드시 들어가야 하며,

두 번째 줄을 변경하여 테마를 변경할 수 있습니다.

가령, Eclipse 테마를 설정하고 싶다면,

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

<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css">

와 같이 변경해주시면 됩니다.

어떤 테마를 설정할지는 설치 후 압축 해제 한 파일의 style 폴더를 참조하시어 확인하시면 됩니다.

▲ syntaxhighlighter_3.0.83 > syntaxhighlighter_3.0.83 > styles 폴더

각 테마가 어떤 느낌을 가지고 있는지는 다음 사이트를 참조하시면 되겠습니다~