SyntaxHighlighter 는 자바스크립트 기반의 각 언어별 프로그램 코드를 출력.
원본 사이트 : http://alexgorbatchev.com
구글 코드 : http://code.google.com/p/syntaxhighlighter/
티스토리에서 SyntaxHighlighter 사용
.js 파일들을 HTML/CSS 편집 -> 파일 업로드 에 올립니다.
.css 파일또한 같이 올려줍니다.
<head>...</head>사이에 다음 코드를 붙여 넣습니다.
<body>~</body> 사이 </body> 종료 태그전에 다음을 붙여 넣어줍니다.
사용자 스킨 사용
syntaxhighlighter_Eclipse
syntaxhighlighter_Django
syntaxhighlighter_Emacs
syntaxhighlighter_FadeToGrey
syntaxhighlighter_MDUltra
syntaxhighlighter_Midnight
syntaxhighlighter_RDark
<link href="./images/shCore.css" rel="stylesheet" type="text/css" />
<link href="./images/shThemeRDark.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreDjango_re.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreEclipse_re.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreEmacs_re.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreFadeToGrey_re.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreMDUltra_re.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreMidnight_re.css" rel="stylesheet" type="text/css" />
<link href="./images/shCoreRDark_re.css" rel="stylesheet" type="text/css" />
사용예
| Name | Value | Description |
|---|---|---|
| bloggerMode | false | blogger.com 에서 사용할 경우 true |
| strings | Object | 이벤트 핸들 |
| stripBrs | false | <br /> 태그 무시여부 |
| tagName | "pre" | 하이라이트 지정할 태그 지정 |
| 이름 | 초기값 | 설명 |
|---|---|---|
| auto-links | true | URL 자동 링크 |
| class-name | '' | 사용자 정의 css 클래스 사용 |
| collapse | false | 소스 보기 초기 상태 지정 ( 숨김 / 펼치기 ) |
| first-line | 1 | 첫번째 시작하는 라인번호 |
| gutter | true | 라인번호 보기/끄기 |
| highlight | null | 강조하고 싶은 라인 [1,2,3]등으로 배열로 지정 |
| html-script | false | 서버 스크립트 php 나 jsp등에서 html/xml등의 문서를 강조 하고 싶을때 true를 설정하면 반드시 shBrushXml.js를 로드 해줘야 한다. |
| smart-tabs | true | 탭 사용 여부 |
| tab-size | 4 | 탭 사이즈 간격 |
| toolbar | true | 툴바 on/off |
1. auto-links
2. class-name
소스
결과 화면
3. collapse
소스
결과 화면
4. first-line
소스
결과 화면
5. gutter
소스
결과 화면
6. highlight
소스
결과 화면
7. html-script
소스
결과 화면
8. smart-tabs
소스
결과 화면
9. tab-size
소스
결과 화면
10 . toolbar
소스
결과 화면
티스토리 버그들
1. 브라우져에서 스크롤 생기는 문제
css 스타일 수정에서 다음 줄을 입력 한다.
.syntaxhighlighter { overflow-y: hidden !important;}
2. '<'를 "<"와 같은 html에 충돌이 나지 않는 것으로 변환
지원 언어
| Brush 이름 | 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 |
버전별 다운로드
[3.x]
다운로드 : syntaxhighlighter_3.0.83.zip
url : http://smartflex.tistory.com/attachment/cfile24.uf@1137734B4EAE55A4158B19.zip
[2.x]
다운로드 : syntaxhighlighter_2.0.278.zip
http://smartflex.tistory.com/attachment/cfile7.uf@1350C64B4EAE5BBD081BE7.zip
다운로드 : syntaxhighlighter_2.0.287.zip
http://smartflex.tistory.com/attachment/cfile24.uf@1941A74B4EAE5BBD323963.zip
다운로드 : syntaxhighlighter_2.0.296.zip
http://smartflex.tistory.com/attachment/cfile24.uf@1544D24B4EAE5BBD28376B.zip
다운로드 : syntaxhighlighter_2.0.320.zip
http://smartflex.tistory.com/attachment/cfile5.uf@17530E4B4EAE5BBE021F7E.zip
다운로드 : syntaxhighlighter_2.1.382.zip
http://smartflex.tistory.com/attachment/cfile23.uf@164BE04B4EAE5BBF156897.zip
[ 1.0 ]
다운로드 : syntaxhighlighter_1.0.zip
http://smartflex.tistory.com/attachment/cfile6.uf@177915504EAE63D612772A.zip
[ github 개발 소스코드 다운로드 ]
201110 : alexgorbatchev-SyntaxHighlighter-d999972.zip
http://smartflex.tistory.com/attachment/cfile6.uf@116249504EAE5EF62AFF16.zip
[ 사용자 정의 스타일 다운로드 ]
syntaxhighlighter_3.0.83_user_styles.zip'개발 > javascript' 카테고리의 다른 글
| 날자 객체 Date Object (0) | 2014.01.05 |
|---|---|
| Google maia.js - the "Twitter Bootstrap" made by Google with Closure (0) | 2013.09.04 |
| [canvas] 간단히 만들어보는 HTML5 애니메이션 (0) | 2013.08.25 |
| 쿠키에 대한 정보 (0) | 2011.12.22 |
| Prevent Your CSS and JavaScript Files From Being Cached (0) | 2011.12.21 |