ckeditor에 syntax highlighter 세팅하기

현재 주소 복사
트랙백 주소 복사
방실이님의 글 (2010-09-02 오후 5:30:40) Viewing : 7852

ckeitor 설정에 대한 글은

http://www.bangsil.net/MyArticles?postId=a7f36b53-6f9d-474b-a669-2b983cb17015

를 참고 하시면 되겠네요..

syntax highlighter 라는 것은 번역을 하자면 구문 강조 쯤 되겠네요.

이것은 html 페이지에 코드 블럭을 설정해 주는 것입니다.

물론 현재 이 사이트에도 적용 되어 있구요 이 아티클에도 사용되고 있지욤..

처음에 syntax highlighter 만 적용 했을 경우 ckeditor와 궁합이 안맞아서 태그가 깨지는 현상이 발생됩니다..

대략 난감 하죠..

어느 분이 이런 저같은 사람을 어여삐 여겨 플러그인을 만들어 놓으셨군요..클클...

이제 적용법을 알아 보도록 하겠습니다.

먼저 syntax highlighter 설치를 해야 겠지요?

http://alexgorbatchev.com/SyntaxHighlighter/

이것을 만드신 분의 사이트입니다..개략적으로 읽어 보도록 하십시요.

오늘 날짜(2010-09-02) 기준으로 3.0.83 버전을 다운 받을 수 있군요.

압축을 풀면 테스트 해 볼수 있도록 잘 만들어져 있고요..뭐 각자 해보시기 바래요.

scripts 폴더를 열어 보면 엄청나게 많은 스크립트들이 있군요.

이중에서 필요한 것만 추려 봅니다.

필수 스크립트는 shCore.js 와 shLegacy.js 가 되겠습니다.

이 외에는 필요한 Brush파일만 설치 하세요..필요한 것이란..하이라이팅을 하고자 하는 언어를 의미합니다.

저의 경우는 csharp, css, javascript, xml, sql 정도 설치 했습니다.

이제 css 를 설치 해보지요.

styles 라는 폴더를 보시고 shCore.css 파일과 맘에 드는 테마 저는 그냥 Default로 했네요.(shThemeDefault.css) 를 설치 합니다.

자 이제 설치한 경로를 해당 페이지에 각각 링크를 걸어 주시고요..

SyntaxHighlighter.config.bloogerMode = true;
SyntaxHighlighter.config.tagName = 'pre';
SyntaxHighlighter.config.strings.help = '?';
SyntaxHighlighter.all();

페이지의 상단에 위와 같이 스크립트 코드를 작성해 주시면 끝....

아주 간단하지요???

그런데 ckeditor에서 이렇게 사용하면 문제가 발생합니다..ㅎㅎㅎ


그래서 플러그인을 설정해 봅니다...

http://code.google.com/p/ckeditor-syntaxhighlight/

위 링크에 가서 플러그인을 받아 봅니다.

다운 받아 압축을 풀고 syntaxhighlight 라는 폴더를 통채로

사이트/ckeditor/plugins/에 복사 합니다.

마지막으로

사이트/ckeditor/config.js 파일을 열어서 아래와 같이 고칩니다.

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = 'syntaxhighlight';        //Add the plugin   
    config.toolbar_Full.push(['Code']);  //add the plugin button to the full toolbar
};

이렇게 세팅을 하면 끝...은 아니고요..

이렇게 세팅하면 에디터의 맨 마지막에 코드라는 아이콘이 생성됩니다.

그러나 열어 보면 아시겠지만..엄청나게 많은 언어들을 지원하지요..

그러냐 여기서 세팅한 언어는 딸랑 5개뿐..(shBrush 파일)

그러므로 이부분을 제거해 주어야 합니다.

사이트/ckeditor/plugins/syntaxhighlight/dialogs/syntaxhighlight.js 파일을 엽니다.

코드 최소화가 되어 있는 상태입니다. 스크롤바를 오른쪽으로 쭈욱 당기면서...코드의 나열을 찾아 봅니다.

귀찮으신 분들은..C# 으로 찾아 보시길..^^;

대략 아래와 같은 구조로 되었네요.

[["C#", "csharp"], ["CSS", "css"], ["Javascript", "jscript"], ["SQL", "sql"], ["XML/XHTML", "xml"]]

자 불필요한 것을 지워 버리면 끝..

즐겁게 사용하시길...


마지막 업데이트 : (2010-09-15 오후 2:40:00)




Trackback 보기 (0)
댓글 보기 (0)
댓글 쓰기