블러그에 글을 올리다가 항상 아쉬웠던 것이 소스코드 편집문제였다
개발툴에 있는 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, 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 태그를 사용한다.
한번 적용한 모습이다. 이제 소스 정리가 깔끔하게 되는거 같아 정말 좋다.
한참 미루었던 일을 치루니 일주일 변비가 한꺼번에 분출된거 같아 정말 시원하다..
역시 일은 미루면 어느모로 보나 손해다 ㅋㅋ
출처 : http://mainia.tistory.com/category/유틸리티
