프로그래밍 소스코드를 보기좋게 변환해주는 js플러그인을 소개합니다.
많은 분들의 블로그에서 볼수있는 플러그인인데요.
이번에 2.0으로 버젼을 업데이트 하면서 ActionScript 3.0을 공식적으로 지원하기에,
블로그(텍스트큐브)에 적용하는 방법을 소개합니다.
일단 아래의 주소에서 파일을 다운로드 받으면 됩니다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
현재(09년 7월 19일) 기준으로 2.0.320 버젼이 최신버젼입니다.
파일을 다운받아 압축을 풀면, 다음과 같은 파일들이 나옵니다.
이들 중 scripts, src, styles 3개의 폴더를 자신의 skin폴더에 업로드합니다.
루트폴더에 있는 test.html파일을 열어서, 소스를 열어 선택된 부분을 카피합니다.
이 부분을 skin.html파일 상단에 추가합니다.
수정한후 어드민 페이지에서 스킨설정 다시 한번 해주셔야 되는건 아시죠? ^^
이렇게 세팅하고나면 기본적인건 다 된겁니다.
이제 에디터에서 사용법을 살펴보지요.
에디터에서 html에디트 모드로
<pre class="brush: c-sharp;">
function test() : String
{
return 10;
}
</pre>
이런식으로 쓰면 내부적으로 변환해서
위처럼 나오게 되는거죠.
소스코드를 공유할때는 Syntax Color등이 자동으로 설정되어 표시되기때문에 상당히 효과적이라고 생각합니다.
"<pre class="brush: c-sharp;">" 이부분에서 brush의 value값이 어떤것들이 있는지 살펴보겠습니다.
가장 상단부분에 있는 ActionScript3가 저는 가장 반갑네요.
<pre class='brush:as3;'></pre> 이라고 쓰면 되겠죠?
액션스크립트(ActionScript 3.0)에 경우는 js파일을 include되는 부분이 빠져있네요.
<script type="text/javascript" src="scripts/shBrushAS3.js"></script>
한줄을 추가해주셔야 에러없이 정상 작동합니다.
syntaxhighlighter_2.0.320.zip