이전에 Syntaxhighlighter를 설치하고 적용한 후 사용하는 방법에 대한 포스트를 올렸는데,
이번에는 조금 더 나아가서 Syntaxhighlighter의 테마를 설정하는 방법에 대해서 알려드리겠습니다.
▶ http://thinkpro.tistory.com/31
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 폴더
각 테마가 어떤 느낌을 가지고 있는지는 다음 사이트를 참조하시면 되겠습니다~
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
'인터넷, 컴퓨터 꿀팁, 유용 프로그램' 카테고리의 다른 글
| 윈도우 7/ 윈도우8 에서 화면 캡처에 대한 모든 것! (0) | 2013.10.02 |
|---|---|
| 버츄얼박스(VirtualBox) Installation Failed Error! 해결 방법 (5) | 2013.10.02 |
| 가상머신에서 리눅스 우분투 설치하기 (VirtualBox 이용) (3) | 2013.10.01 |
| [Syntaxhighlighter] 티스토리 블로그에 적용하기 (티스토리 블로그 소스코드 집어넣기) (0) | 2013.09.15 |
| [Syntaxhighlighter] 사용시 <> 집어넣기 (1) | 2013.09.09 |