티스토리에 SyntaxHighlighter 적용하는 방법 : http://hijuworld.tistory.com/25
SyntaxHighlighter 에 다양한 테마를 적용 시켜보자.
우선 블로그 관리에가서 스킨 편집을 누르자.
그리고 html 편집을 누르자.
아래 그림에 보면 지난번 SyntaxHighlighter 를 업로드 할때 추가한 html 코드가 보인다.
빨간줄이 가있는 shThemeDefault.css가 티폴트 테마이다.
이것을 변경하면 테마를 편경 할 수 있다.
테마 이름 |
CSS 이름 |
Default |
shThemeDefault.css |
Django |
shThemeDjango.css |
Eclipse |
shThemeEclipse.css |
Emacs |
shThemeEmacs.css |
Fade To Grey |
shThemeFadeToGrey.css |
Midnight |
shThemeMidnight.css |
RDark |
shThemeRDark.css |
위에 테마에 맞춰서 shThemeDefault.css를 다른 것 으로 바꿔주면 된다.
나는 shThemeDefault.css를 shThemeRDark.css 로 변경 하였다.
아래 적용하기전에 코드
아래 적용 후에 코드 이다.
각 테마별로 어떻게 변하는지 공식 사이트에서 캡쳐해왔다.
1. 테마 이름 : Default
shThemeDefault.css
2. 테마 이름 : Django
shThemeDjango.css
3. 테마이름 : Eclipse
shThemeEclipse.css
4. 테마 이름 : Emacs
shThemeEmacs.css
5. 테마 이름 : Fade To Grey
shThemeFadeToGrey.css
6. 테마 이름 : Midnight
shThemeMidnight.css
7. 테마 이름 : RDark
shThemeRDark.css
| 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 |
'블로그 관리' 카테고리의 다른 글
| 티스토리(tistory)에 SyntaxHighlighter를 적용하여 소스코드 글자색 변경하기 (0) | 2018.04.25 |
|---|
