SyntaxHighlighter 테마 변경 본문

티스토리 스킨만들기/TIP

SyntaxHighlighter 테마 변경

  • nOo9ya
  • 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번 줄만 확인하시면 됩니다.

SyntaxHighlighter 적용 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
    <link type="text/css" rel="Stylesheet" href="./images/shCore.css">
    <link type="text/css" rel="Stylesheet" href="./images/shThemeRDark.css">
    <script type="text/javascript" src="./images/shCore.js"></script>
    <script type="text/javascript" src="./images/shLegacy.js"></script>
    <script type="text/javascript" src="./images/shBrushCss.js"></script>
    <script type="text/javascript" src="./images/shBrushJScript.js"></script>
    <script type="text/javascript" src="./images/shBrushPhp.js"></script>
    <script type="text/javascript" src="./images/shBrushSass.js"></script>
    <script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기
    function SyntaxlineWrap(){ // 줄바꿈을 위한 스크립트
        var wrap = function () {
            var elems = document.getElementsByClassName('syntaxhighlighter');
            for (var j = 0; j < elems.length; ++j) {
                var sh = elems[j];
                var gLines = sh.getElementsByClassName('gutter')[0].getElementsByClassName('line');
                var cLines = sh.getElementsByClassName('code')[0].getElementsByClassName('line');
                var stand = 20;
                for (var i = 0; i < gLines.length; ++i) {
                    var h = $(cLines[i]).height();
                    if (h != stand) {
                        gLines[i].setAttribute('style', 'height:' + h + 'px !important;');
                    }
                }
            }
        };
   
        var whenReady = function () {
            if ($('.syntaxhighlighter').length === 0) {
                setTimeout(whenReady, 800);
            } else {
                wrap();
            }
        };
        whenReady();
    }
   
    $(function(){
        $(window).bind("load resize", function(){
            SyntaxlineWrap();
        });
        SyntaxHighlighter.all();
        dp.SyntaxHighlighter.HighlightAll('code'); // textarea 에서도 사용하기 위한 onload
    });
</script>


  • 1번 줄에 있는 shCore.css 파일은 SyntaxHighlighter 의 기본 외형 스타일이기 때문에 필수로 로드해야 할 파일입니다.
  • 2번 줄에 있는 shThemeRDark.css 파일이 현재 적용된 Theme 입니다. (이 파일을 교체하면 Theme 교체 끝!!)
  • 우리는 수정된 shCore.css 을 사용하기 때문에 단일 shCoreTheme*.css 파일을 사용하지 않습니다.
  • 적용할 Theme 파일은 미리 업로드 시켜야합니다!!
  • Theme은 한 페이지에서 오직 하나의 Theme만 사용가능합니다!! 참고하세요!!
SyntaxHighlighter 적용 코드
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeRDark.css"><!-- 바꿀 Theme 파일 -->



Default Theme

Default Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeDefault.css"><!-- Default Theme 파일 -->

Default ThemeDefault Theme



Django Theme

Django Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeDjango.css"><!-- Django Theme 파일 -->

Django ThemeDjango Theme



Eclipse Theme

Eclipse Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeEclipse.css"><!-- Eclipse Theme 파일 -->

Eclipse ThemeEclipse Theme



Emacs Theme

Emacs Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeEmacs.css"><!-- Emacs Theme 파일 -->

Emacs ThemeEmacs Theme




Fade To Grey Theme

Fade To Grey Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeFadeToGrey.css"><!-- Fade To Grey  Theme 파일 -->

Fade To Grey ThemeFade To Grey Theme



Midnight Theme

Midnight Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeMidnight.css"><!-- Midnight Theme 파일 -->

Midnight ThemeMidnight Theme



RDark Theme

RDark Theme
1
2
<link type="text/css" rel="Stylesheet" href="./images/shCore.css">
<link type="text/css" rel="Stylesheet" href="./images/shThemeRDark.css"><!-- RDark Theme 파일 -->

RDark ThemeRDark Theme



현재(2017년 11월 15일)까지 7개의 SyntaxHighlighter Theme가 있습니다.
꼭 위의 7개의 Theme만을 사용하지 않고 자신만의 새로운 Theme를 만드셔서 위의 방법으로 교체하여 사용하시면 됩니다.


SyntaxHighlighter 시리즈 포스팅이 끝!! 수고하셨습니다!!

이제 진짜로 즐코딩하시길 바랍니다~



반응형

공유하기 링크

티스토리 스킨만들기/TIP Related Articles

MORE

티스토리툴바