출처 : http://ggons.tistory.com/35
1. js 및 css 다운로드
- http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 zip 파일 내려받기
- 임의의 폴더에 압축 해제시켜 놓습니다.
2. js 및 css 등록
- Admin → 꾸미기 → HTML/CSS 편집
- "파입업로드" 탭에서 위에서 압축해제한 파일 중 scripts, styles 폴더의 모든 js 및 css를 업로드 합니다.
몇년을 귀차니즘으로 버티다가 기어이 "소스코드 문법 강조 스타일"을 적용해본다. 짜잉나는 네이버 블로그를 떠난 이유도 이런 자유도 때문이 아닐까 한다.
3. skin.html 수정
- HTML/CSS 탭 내의 skin.html 내용중 Head 태그내에 아래를 붙여넣음
- Required 주석이 붙은 것은 반드시 붙여넣어야 하고..
- Optional 붙은 주석은 이름을 잘 보고 쓰고 싶은 것만 넣으면 됩니다.
<!-- Required including -->
<script type="text/javascript" src="./images/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="./images/shCore.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css" />
<!-- Optional including -->
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushErlang.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJavaFX.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPerl.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPowerShell.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/shBrushSass.js"></script>
<script type="text/javascript" src="./images/shBrushScala.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>
<!-- Required including -->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
4. 소스코드 작성
- 에디터 우측상단 html 체크박스 체크 후 HTML 수정모드로 진입하여
- 아래처럼 pre 태그 내에 소스코드를 써주면 됩니다.
1 2 3 4 | < pre class = "brush:java" >public class A { } </ pre > |
5. 테스트 결과
1 2 3 | public class A { } |
6. 사용 가능한 brush 목록
- http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes 참조
Brush name | Brush aliases | File name |
ActionScript3 | as3, actionscript3 | shBrushAS3.js |
Bash/shell | bash, shell | shBrushBash.js |
ColdFusion | cf, coldfusion | shBrushColdFusion.js |
C# | c-sharp, csharp | shBrushCSharp.js |
C++ | cpp, c | shBrushCpp.js |
CSS | css | shBrushCss.js |
Delphi | delphi, pas, pascal | shBrushDelphi.js |
Diff | diff, patch | shBrushDiff.js |
Erlang | erl, erlang | shBrushErlang.js |
Groovy | groovy | shBrushGroovy.js |
JavaScript | js, jscript, javascript | shBrushJScript.js |
Java | java | shBrushJava.js |
JavaFX | jfx, javafx | shBrushJavaFX.js |
Perl | perl, pl | shBrushPerl.js |
PHP | php | shBrushPhp.js |
Plain Text | plain, text | shBrushPlain.js |
PowerShell | ps, powershell | shBrushPowerShell.js |
Python | py, python | shBrushPython.js |
Ruby | rails, ror, ruby | shBrushRuby.js |
Scala | scala | shBrushScala.js |
SQL | sql | shBrushSql.js |
Visual Basic | vb, vbnet | shBrushVb.js |
XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
'Programming > JAVA,JSP' 카테고리의 다른 글
JAVA MYSQL 활용 1 (0) | 2013.04.27 |
---|---|
JAVA MYSQL Test (0) | 2013.04.27 |
restlet download restlet-jse-2.1.2 (0) | 2013.04.27 |
RESTLET Point (0) | 2013.04.21 |
RESTlet HelloWorld (0) | 2013.04.21 |