블러그 소스 코드 부분 깔끔 편집 - syntaxhighlighter

블러그에 글을 올리다가 항상 아쉬웠던 것이 소스코드 편집문제였다

개발툴에 있는 Edit 처럼 사용자 편의대로 편집할수도 없고 여간 불편한게 아니였다.
그러다 SyntaxHighlighter 이라는 자바 스크립트를 알게되었다.

http://code.google.com/p/syntaxhighlighter/
구글 사이트에 가면 소개가 되어있다.

소스는 옆 탭 downloads 를 눌러 받으면 된다.

압축을 풀고 관리자 > 스킨 > HTML/CSS 편집을 클릭한다.

파일 업로드 탭을 선택하고 압축푼 폴더중에 Script., Styles 에 있는 파일을 업로드한다

그리고 HTML/CSS 편집 탭을 클릭하여 Head 부분에 아래와 같은 스크립트 삽입 태그를 넣는다.

<!-- SyntaxHighlighter Include souce Start -->

<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>

<script type="text/javascript" src="./images/shCore.js"></script>

<script type="text/javascript" src="./images/shBrushCpp.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/shBrushPhp.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/shBrushSql.js"></script>           

<script type="text/javascript" src="./images/shBrushVb.js"></script>            

<script type="text/javascript" src="./images/shBrushXml.js"></script>             

<script language="javascript">

 dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';

 dp.SyntaxHighlighter.HighlightAll('code');

</script>

<!-- SyntaxHighlighter Include source End -->

 

지원하는 언어는 다음과 같다

Language	Aliases
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

 

설정값에 따라 표현형식을 바꿀수가 있는데 다음과 같은 속성이 있다

속성	설명
nogutter	Will display no gutter
nocontrols	Will display no controls at the top
collapse	Will collapse the block by default
firstline[value]	Will begin line count at value. Default value is 1.
showcolumns	Will show row columns in the first line.

 

이것들을 한번씩 설정해서 그 변화된 모습을 보면 금방 이해할것같다

화면에서 사용할때는 다음과 같이 태그중간에 코드를 삽입하면된다

class 에 java 가 들어간거보니 stylesheet 에서 java 언어에 대한 값을

적용하는 것이다. 위의 표처럼 원하는 언어를 선택해서 class 값에 넣어주면 된다

<TEXTAREA class="java" name="code" rows=10 cols=50>

  <!-- 소스코드삽입 -->

</TEXTAREA>

 

<PRE class="brush:c#" name="code">

  <!-- 소스코드삽입 -->

</PRE>

버전이 몇부터인지는 모르겠으나 <TEXTAREA> 태그가 안먹는다고 한다.
그럴땐 밑에 PRE 태그를 사용한다.

한번 적용한 모습이다. 이제 소스 정리가 깔끔하게 되는거 같아 정말 좋다.

한참 미루었던 일을 치루니 일주일 변비가 한꺼번에 분출된거 같아 정말 시원하다..

역시 일은 미루면 어느모로 보나 손해다 ㅋㅋ