지난 포스팅에서 소스 코드 구문 강조를 위한 몇 가지 솔루션들의 스타일들과 간략한 특징을 알아보았습니다.
그럼 이번에는 그 중 SyntaxHighlighter 사용법에 대해 알아보겠습니다.
아래는 SyntaxHighlighter를 적용한 모습입니다. Midnight 테마를 사용하였습니다.
SyntaxHighlighter (Midnight)
#include <stdio.h>
int _tmain(int argc, _TCHAR* argv[])
{
int nTemp = 0; // Comment : Dummy
char szTemp[50] = "http://reslee.kr";
printf("Hello World - %s\n", szTemp);
return 0;
}
우선 SyntaxHighlighter를 사용하기 위해서 필요한 파일들을 준비합니다.
아래 다운로드 사이트를 방문하여 SyntaxHighlighter 모듈을 다운 받습니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
※ 이미 호스팅 되어있는 SyntaxHighlighter 모듈을 사용할 수도 있습니다. 이 경우는 아래 html 수정하는 부분을 참고하도록 합니다.
다운로드된 파일은 zip파일로 압축된 형태일 것 입니다. (예 - syntaxhighlighter_3.0.83.zip)
이를 임의의 폴더에 압축해제 합니다.
우리가 필요한 파일들은 scripts 폴더와 styles 폴더에 있는 파일들입니다.
웹서버에 해당 파일들을 편하신 위치에 업로드 하시면 되는데 설명은 티스토리를 기준으로 하겠습니다.
(호스팅된 파일을 이용하신다면 이 과정은 건너뛰어도 됩니다.)
티스토리에 파일을 업로드 하는 방법은 우선 관리자 페이지에서 HTML/CSS 편집 메뉴를 선택합니다.
HTML/CSS 화면 우측 상단에 파일업로드를 선택하고
우측 하단에 추가 버튼을 클릭하여 파일을 업로드 합니다.
티스토리에 파일을 업로드 할 수 있는 용량은 20MB 제한입니다.
티스토리는 폴더상태로 업로드를 할 수 없고 특정 폴더를 생성하지도 못하므로 파일단위로 업로드 해야 합니다.
첫 번째로 압축해제 후 생성된 scripts 폴더에 있는 자바스크립트 파일들을 업로드 합니다.
모두 업로드 하셔도 되고 소스 코드 구문 강조에 필요한 .js 파일만 업로드 하셔도 됩니다.
다만, shCore.js 파일은 반드시 업로드 하셔야 합니다.
각 언어와 매칭되는 .js 파일은 아래 링크를 참고하세요
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
마찬가지로 styles 폴더에 있는 css 파일들을 업로드 합니다.
역시 모두 업로드 하셔도 되고 마음에 드는 테마 .css 파일만 업로드 하셔도 됩니다.
다만, shCore.css 파일은 반드시 업로드 하셔야 합니다.
(※.css 파일명에 Core가 붙은 것이 있고 Theme가 붙은 것이 있습니다. 이 두개는 폰트나 크기가 조금 다르긴 하지만 거의 같은 형태입니다.
여기서 문제는 티스토리에 적용 중인 스킨에 따라서 둘 중 하나만 잘 보일 수 있으므로 테스트 해보시기 바랍니다. )
테마 종류는 아래 링크를 참고하세요.
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
업로드가 완료되면 HTML/CSS 화면 우측 상단에 HTML을 선택합니다.
이제 HTML 소스에 <HEAD> 태그(HEAD 시작 태그)와 </HEAD> 태그(HEAD 마지막 태그) 사이에 아래 코드를 추가합니다.
물론 필요 없는 부분은 제거하셔도 됩니다.
<script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shBrushCpp.js"></script> <script type="text/javascript" src="./images/shBrushXml.js"></script> <script type="text/javascript" src="./images/shBrushCSharp.js"></script> <script type="text/javascript" src="./images/shBrushCss.js"></script> <script type="text/javascript" src="./images/shBrushDelphi.js"></script> <script type="text/javascript" src="./images/shBrushJava.js"></script> <script type="text/javascript" src="./images/shBrushJScript.js"></script> <script type="text/javascript" src="./images/shBrushPowerShell.js"></script> <script type="text/javascript" src="./images/shBrushPython.js"></script> <script type="text/javascript" src="./images/shBrushRuby.js"></script> <script type="text/javascript" src="./images/shBrushPerl.js"></script> <script type="text/javascript" src="./images/shBrushPhp.js"></script> <script type="text/javascript" src="./images/shBrushSql.js"></script> <script type="text/javascript" src="./images/shBrushVb.js"></script> <script type="text/javascript" src="./images/shBrushAppleScript.js"></script> <script type="text/javascript" src="./images/shBrushAS3.js"></script> <script type="text/javascript" src="./images/shBrushBash.js"></script> <script type="text/javascript" src="./images/shBrushColdFusion.js"></script> <script type="text/javascript" src="./images/shBrushDiff.js"></script> <script type="text/javascript" src="./images/shBrushErlang.js"></script> <script type="text/javascript" src="./images/shBrushGroovy.js"></script> <script type="text/javascript" src="./images/shBrushJavaFX.js"></script> <script type="text/javascript" src="./images/shBrushPlain.js"></script> <script type="text/javascript" src="./images/shBrushSass.js"></script> <script type="text/javascript" src="./images/shBrushScala.js"></script> <script type="text/javascript" src="./images/shLegacy.js"></script> <script type="text/javascript" src="./images/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="./images/shCoreMidnight.css"/> <script type="text/javascript">SyntaxHighlighter.all();</script>
1번 라인은 꼭 필요하기 때문에 제거 해서는 안됩니다.
3번 라인부터 29번 라인까지는 필요하신 언어용만 추가하시면 됩니다.
각 언어와 매칭되는 .js 파일은 아래 사이트를 참고하세요.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
31번 라인은 사용될 테마입니다. 위 예제에서는 Midnight 테마로 설정하였습니다.
테마 종류는 아래 링크를 참고하세요.
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
(※.css 파일명에 Core가 붙은 것이 있고 Theme가 붙은 것이 있습니다. 이 두개는 폰트나 크기가 조금 다르긴 하지만 거의 같은 형태입니다.
여기서 문제는 티스토리에 적용 중인 스킨에 따라서 둘 중 하나만 잘 보일 수 있으므로 테스트 해보시기 바랍니다.
저는 shCoreMidnight.css를 적용하였습니다.)
33번 라인은 위 설정된 내용을 바탕으로 초기화 해주는 부분입니다.
그리고 저장 버튼을 꼭 눌러 주세요.
이제 SyntaxHighlighter를 사용할 준비가 끝났습니다.
실제로 티스토리에서 사용하는 방법을 알아 보겠습니다.
코드를 작성할 위치에서 외부컨텐츠를 누릅니다.
html로 선택된 상태에서 pre 태그를 사용합니다.
이 pre태그 안에 표시될 소스 코드가 삽입되면 됩니다.
하지만 외부컨텐츠 삽입 화면에서 소스 코드를 추가할 경우 꺽쇠 즉, "<"과 ">"이 포함되면 인식하는데 문제가 발생합니다.
따라서 "<"는 그에 대응하는 특수 코드 <를 ">"는 >를 사용해야 합니다.
소스 코드에 포함된 꺽쇠를 모두 특수 코드로 고쳐야 된다고 생각하면 참 암울합니다.
특히 html 코드는...
그래서 아래와 같이 pre 태그만 작성하고 확인을 누룹니다.
pre 태그에 사용되는 옵션은 여러가지가 될 수 있으며 아래 링크를 참고하시기 바랍니다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
위에 사용된 brush 옵션은 필수 옵션으로 작성된 언어의 종류를 입력하게 됩니다.
예시에서는 cpp로 c++를 대상으로 함을 명시해 준 것입니다.
어쨋든 외부컨텐츠에서 pre태그만 입력하면 아래 그림과 같이 회색 네모 상자가 표시됩니다.
우리는 이 회색 네모 상자 안에 아래와 같이 소스 코드를 복사해 넣습니다.
이제 미리보기를 해보시거나 발행하여 글을 확인해 보세요.
SyntaxHighlighter가 적용된 모습이 보이시나요 ?
제대로 보이신다면 SyntaxHighlighter 적용에 성공하신 겁니다.
다음 포스팅에서는 highlight.js 사용법에 대해 알아보도록 하겠습니다.