나는 블로그를 프로그래밍 관련된 글로 채우고 있다. 나에게도 도움이 되고 다른 사람들에게도 도움이 되니까 말이다. 그래서 프로그래밍 코드를 많이 쓰는 편이다.

그런데 코드를 쓰다 보면 이클립스나 에디트플러스 같은 에디터들에서 해 주는 문법 하이라이트 기능이 없는 게 아쉬웠다. 그렇다고 일일이 손으로 색깔을 넣는 노가다는 하기 싫었고…

내가 자주 보던 블로그들에는 아래와 같이 색깔이 들어간 코드가 많이 눈에 띄었다. 그래서 100% 뭔가 플러그인이 있을 것이라고 확신했다. 그리고 오늘 찾았다.

간단한 설치 방법을 설명하겠다. 일단 이 제품은, 글 쓸 때는 fckeditor가 필요하다. fckeditor를 이용해 생성한 코드만 있으면 어디서든 코드 하이라이트 기능을 이용할 수 있다.

fckeditor에 플러그인으로 붙여서 생성한 코드를, 코드 하이라이트 기능을 이용해서 보려면 보는 페이지에 js와 css파일을 연결해야 한다. 두 부분으로 나눠서 설명하겠다.

code syntax highlighter 2를 fckeditor에 설치하기

1.

다운받는다 : code syntax highlighter 다운로드 (현재 버전이 3이 됐다. 그래서 작동을 할지 모르겠다 : 2012-05-19)

(덧붙여 말하자면, 다음 링크에는 fckeditor의 다양한 플러그인이 모여 있다 : fckeditor 플러그인 모음)

2.

사실 다운받은 다음에 거기에 있는 설명대로 하면 된다. 영어 설명서에 공포감을 갖고 있는 사람이 아니라면 차분히 읽으며 따라하는 게 더 나을지도 모른다. 여튼, 나도 나름대로 설명해 보겠다.

왼쪽 그림처럼 폴더에 설치한다. 다운받은 거에서 압축 풀면 나오는 파일들 다 넣는다. 폴더명은 반드시 syntaxhighlight2여야 한다. 다르게 하면 작동 안 한다.

단, 압축풀면 fckconfig.js도 같이 들어있는데, 이건 업로드할 필요 업다.

3.

원래 fckeditor에 들어있는 fckconfig.js를 열고 아래 코드를 추가해 준다.

.
FCKConfig.Plugins.Add( 'syntaxhighlight2', 'en') ;

FCKConfig.Plugins.Add라는 함수가 씌어있는 곳이 있다. 찾아서 그 근처에 넣어주면 될 것이다.

4.

그리고, 역시 fckconfig.js에 있는 툴바 세트 설정을 건드려야 한다.

FCKConfig.ToolbarSets[“Default”]나 FCKConfig.ToolbarSets[“Basic”] 중에 자신이 사용하는 것이 뭔지 알고 있는 게 좋을 것이다. 버튼이 많은 거면 Default고 버튼이 적으면 Basic이다. 일단은 말이다.

Custom으로 설정해서 사용하는 사람도 물론 있다. Custom을 건드릴 줄 아는 분은 굳이 설명 안 해도 될 것이라 믿는다.

Code Syntax Highlight2의 버튼이름은 SyntaxHighLight2다. 이것도 철자 틀리면 안 된다. 조심스럽게 붙여 넣는다. 붙여넣은 결과 예시를 보여주면 다음과 같다. 이건 예시라는 걸 명심하기 바란다. 어쨌든, 알아서 잘 넣으라는 말이다.(!)

FCKConfig.ToolbarSets["Basic"] = [
	['Bold','Italic','-','OrderedList','UnorderedList','SyntaxHighLight2','-','Link','Unlink','-','About']
] ;

5.

여기까지 하면 일단 완료됐다. 그럼 fckeditor로 들어가서 플러그인이 작동하는지 알아보자.

일단 웹브라우저의 캐시를 삭제한다. 안 하면 안 변할 확률이 높다. 파폭이면 개인정보 초기화에서 캐시를 지우면 되고, 익스플로러라면 인터넷 옵션에서 검색기록을 삭제한다.

fckeditor 편집화면에서 아래같은 버튼이 나오고, 눌렀을 때 아래같은 화면이 나오면 일단 성공한 것이다.

fckeditor가 생성한 코드로 Code Syntax Highlighter2 작동시키기

이걸 찾느라 꽤 헤맸다. 아무래도 영어는 딸린다;;

코드 신택스 하이라이트 프로젝트 사이트에서 다운받아야 한다.

드 신택스 하이라이트 페이지

다운받아 압축을 풀면 test.html이란 아이가 있고, src, scripts, styles라는 폴더가 있다.

script, src, styles 폴더를 모조리 자신의 계정에 업로드한다. textcube에 js파일을 올릴 수는 없게 돼 있으므로, 자신이 파일을 업로드할 수 있는 계정이 있어야 한다.

test.html의 코드를 열어서 head 사이에 있는 script 코드랑 style 코드를 다 긁자. src와 href의 경로는 자신이 파일을 업로드한 계정에 맞게 잘 수정해 줘야 한다.

<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
	<script type="text/javascript" src="scripts/shBrushJava.js"></script>
	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
	<script type="text/javascript" src="scripts/shBrushScala.js"></script>
	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
	<script type="text/javascript" src="scripts/shBrushVb.js"></script>
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>

이걸 다 긁어서, 글 보여주는 페이지에 넣는다.

나는 textcube를 사용하므로 당연히 스킨편집에 들어가서 skin.html에다 저 코드를 넣었는데, 작동하지 않았다. 소스보기를 하니까 코드가 사라져있었다. 그래서 위젯으로 들어간 다음 html 코드 위젯에다 저 코드를 모조리 집어넣었다.

그러면 설치 끝이다.