소스코드를 블로그에 공유하자. SyntaxHighlighter 3.0.83 설치
이번에 소개시켜드릴건 SyntaxHeighlighter라는 소스코드 삽입 툴입니다.
이전에는 계속 2.1대 버젼을 사용중이었는데, 어느날 확인해보니 3.0.83 버전까지 나와서 생각난김에 업데이트해보았습니다.
사실 이전부터 알고 있어서 해야지해야지 하다가.... 꽤나후에야 하게됬다능;;
아무튼 요녀석을!!!!
요녀석으로 업데이트입니다.
말이 업데이트지 걍, 이전 소스 지우고 추가한 것 밖에는 없네요 허허;
설치 방법은 간단합니다.
1) http://alexgorbatchev.com/SyntaxHighlighter/ 에 들어가서 파일을 다운로드 받는다.
2) 받아서 압축을 풀면 여러폴더가 나오는데,
이중에서 Scripts 폴더를 티스토리에 올려놓는다.
추가로 styles 폴더에 있는 마음에 드는 스킨을 올려놓는다.
3) Html 수정으로 들어가서 </header>파일 내에 link 추가.
4) html Body 끝부분에 Brush 추가 스크립트 삽입.
5) 이후 사용!!
사용법 :
<Pre class="brush:삽입소스종류">
삽입할 소스 내용
</Pre>
지원되는 소스들은 대략 아래와 같습니다.~!
Brush aliases 이름을 위의 [삽입소스종류] 부분에 넣으시면 되요.
| 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 |
음 이렇게 대충 설명한 이유는.... 아래 블로그에서 스샷과 함께 너무 잘 설명해 주어서 링크로 첨부합니다. ㅎㅎ
사실 이전버전이랑 설치방법이 크게 다르지 않아서 말이죠
요기 가면 친절한 스크린샷과 설명이 있으니 따라해보시길!!
특히 스킨 샘플도 확인할 수 있게 해주셨더군요
음 2.0대 버전에서 3.0대 버전으로 바뀌고 나니 확실히 좀 심플하게 바뀐 느낌입니다.
이전에는 좀 잡기능들이 제공됬는데, 지금은 기능들이 Default로 삽입되어 있네요.
그리고 아주 예전 <Textarea>로 제공되었던, Script도 지원하여 Pre랑 Textarea 둘다 사용 가능합니다.
혹시 사용하시게 되면 호환성 및 기타 등등의 이유로 <Pre>를 권장.
개인적으로 미드나잇 스킨이 가장 마음에 듭니다. 허허
고럼 즐거운 코딩되세요.