몇년을 귀차니즘으로 버티다가 기어이 "소스코드 문법 강조 스타일"을 적용해본다. 짜잉나는 네이버 블로그를 떠난 이유도 이런 자유도 때문이 아닐까 한다.
1. js 및 css 다운로드
- http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 zip 파일 내려받기
- 글쓰는 시점에는 syntaxhighlighter_3.0.83.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 태그 내에 소스코드를 써주면 됩니다.
public class A {
}
5. 테스트 결과
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 |
잘 되려나 시간되면 테스트 좀 해봐야지...
eyedropper40.zip
