텍스트큐브에 SyntaxHighlighter 설치하기


인터넷을 뒤지다 보니까 자료는 있는데 오래된 자료들이라서 나에게 맞게 설치 한다음 올려본다.

아래의 주소에서 다운로드 한다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter
현재 2010. 10월 기준 3.0 이 최신버젼이다.
파일을 다운받아 압축을 풀면, 다음과 같은 파일들이 나옵니다.


사용자 삽입 이미지

이들 중 scripts, src, styles 3개의 폴더를 자신의 skin폴더에 업로드합니다.
자신이 기존의 스킨을 수정해서 쓰고 있다면 skin 폴더의 customize 폴더에 복사를 해야합니다.


사용자 삽입 이미지

루트폴더/tests/에 있는 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> 이라고 쓰면 되겠죠?

그리고 현재 버전부터는 TextArea 태그가 안먹힌다고 한다.
현재까지 알려진 버그중 가장 치명적인 버그는  < > 오류인데,, 코딩중에  < > 꺽쇠 기호가 많이 나오는데 꺽쇠가 나오면
소스가 중간에 짤리거나 이상하게 되 버리는 버그이다. 이 버그를 해결하려면

웹이 올리려고 하는 소스중에  < 표시는 &lt; 로  > 표시는 &gt; 로 모조리 변경 하고
hmtl 모드에서 올리면 아무이상없이 올라가는것을 확인할수 있을 것 이다.

 


답글 남기기

이메일 주소는 공개되지 않습니다.