SyntaxHighlighter 테마 변경 본문
SyntaxHighlighter 테마 변경
- 2017. 11. 15. 06:25
이전 SyntaxHighlighter 관련 적용 & 사용법을 모두 숙지하였다면 이번에는 SyntaxHighlighter의 Theme Style 종류와 변경 방법에 대해 알아보도록 하겠습니다.
혹시 적용법 및 사용법을 아직 모르시면 아래의 포스트를 참고하세요.
2017/11/14 - 티스토리 블로그에 Syntaxhighlighter 적용하기
2017/11/14 - 티스토리 블로그에 Syntaxhighlighter 사용하기
SyntaxHighlighter Theme는 무엇인가?
SyntaxHighlighter 배경과 코드 색상을 하나의 파일로 만들어 CSS만 교체하면 쉽게 바꿀 수 있게 도와주는 파일입니다.
SyntaxHighlighter는 언어별 코드를 예쁘게 보여주는 것인데 이왕이면 내가 자주쓰거나 해당 언어의 대표 에디터나 IDE의 color theme와 맞춰주면 가독성과 전달력이 더욱더 높아지기 때문에 사용합니다.
※ 그냥 개인적인 취향으로 바꾸는 경우가 압도적으로 많기는 합니다만...우선 바꾸는 방법을 알아봅시다;;
SyntaxHighlighter Theme 교체 방법 및 종류
| Name | File |
|---|---|
| Default | shThemeDefault.css |
| Django | shThemeDjango.css |
| Eclipse | shThemeEclipse.css |
| Emacs | shThemeEmacs.css |
| Fade To Grey | shThemeFadeToGrey.css |
| Midnight | shThemeMidnight.css |
| RDark | shThemeRDark.css |
이전 2017/11/14 - 티스토리 블로그에 Syntaxhighlighter 적용하기의 연장이기 때문에 못 보신 분들은 미리 확인하시기 바랍니다.
SyntaxHighlighter 적용하기가 완료되면 아래와 같은 소스가 <head>와 </head>사이에 있습니다.
확인해야 할 코드는 1, 2번 줄만 확인하시면 됩니다.
- 1번 줄에 있는 shCore.css 파일은 SyntaxHighlighter 의 기본 외형 스타일이기 때문에 필수로 로드해야 할 파일입니다.
- 2번 줄에 있는 shThemeRDark.css 파일이 현재 적용된 Theme 입니다. (이 파일을 교체하면 Theme 교체 끝!!)
- 우리는 수정된 shCore.css 을 사용하기 때문에 단일 shCoreTheme*.css 파일을 사용하지 않습니다.
- 적용할 Theme 파일은 미리 업로드 시켜야합니다!!
- Theme은 한 페이지에서 오직 하나의 Theme만 사용가능합니다!! 참고하세요!!
Default Theme
Django Theme
Eclipse Theme
Emacs Theme
Fade To Grey Theme
Midnight Theme
RDark Theme
현재(2017년 11월 15일)까지 7개의 SyntaxHighlighter Theme가 있습니다.
꼭 위의 7개의 Theme만을 사용하지 않고 자신만의 새로운 Theme를 만드셔서 위의 방법으로 교체하여 사용하시면 됩니다.
SyntaxHighlighter 시리즈 포스팅이 끝!! 수고하셨습니다!!
이제 진짜로 즐코딩하시길 바랍니다~
RECENT COMMENT