티스토리 뷰

제 블로그에 보시면 코드 소스를 코드 에디터처럼 예쁘게 보이는 방법에 대해 알아보겠습니다.

 

아래 처럼 말이죠.

<div id="dkHead" role="banner" class="area_head ">
  <h1 class="screen_out">종종 올리는 블로그</h1>
  <div class="area_profile ">
    <a class="link_profile" href="/"><img src="https://t1.daumcdn.net/cfile/tistory/2775754356DEE5E112" width="50" height="50" class="img_profile" alt="프로필사진"></a>
    <div class="info_profile">
      <button type="button" class="btn_name">토마토..
        <span class="ico_skin ico_name"></span>
      </button>
      <ul class="list_name">
        <li><a href="https://sometimes-n.tistory.com/manage/entry/post" class="link_name">글쓰기</a></li>
        <li><a href="https://sometimes-n.tistory.com/manage" class="link_name">관리</a></li>
        <li class="box_division"><a href="https://sometimes-n.tistory.com/tag" class="link_name">태그</a></li>
        <li><a href="https://sometimes-n.tistory.com/guestbook" class="link_name">방명록</a></li>
        <li><a href="https://sometimes-n.tistory.com/rss" class="link_name">RSS</a></li>
      </ul>
      <p class="txt_condition">종종 올리는 블로그</p>
    </div>
  </div>

  <button type="button" class="btn_menu">
    <span class="ico_skin ico_menu">카테고리 메뉴열기</span>
  </button>
</div>

 

SyntaxHighlighter 라는 code syntax highlighter를 이용한것인데요. 제가 네이버 블로그가 아닌 티스토리 블로그를 하는 이유이기도 하지요.

 

 

 

SyntaxHighlighter 홈페이지는  http://alexgorbatchev.com/SyntaxHighlighter/  입니다.

 

우선 SyntaxHighlighter 를 여기를 클릭해서 다운로드 받으세요.

 

참고로, 제가 받은 버전은 SyntaxHighlighter 3.0.83 입니다.

 

1. 다운로드 받은 압축파일을 풀어주세요.

 

2. 티스토리 관리페이지에서 [HTML/CSS 편집] 메뉴를 클릭합니다.

 

 

3. [파일업로드] 탭에서 [+추가] 버튼을 클릭합니다.

 

 

4. scripts 폴더의 모든 파일을 업로드 합니다.

 

 

5. styles 폴더의 모든 파일을 업로드 합니다.

 

 

 

6. 스킨 HTML 의 </head> 태그 앞에 아래 코드를 복사하여 붙여넣습니다.

  <link href="./images/shCore.css" rel="stylesheet" type="text/css"/>
  <link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="./images/shCore.js"></script>
  <script type="text/javascript" src="./images/shBrushJScript.js"></script>
  <script type="text/javascript" src="./images/shLegacy.js"></script>
  <script type="text/javascript" src="./images/shBrushBash.js"></script>
  <script type="text/javascript" src="./images/shBrushCpp.js"></script>
  <script type="text/javascript" src="./images/shBrushCSharp.js"></script>
  <script type="text/javascript" src="./images/shBrushCss.js"></script>
  <script type="text/javascript" src="./images/shBrushDelphi.js"></script>
  <script type="text/javascript" src="./images/shBrushDiff.js"></script>
  <script type="text/javascript" src="./images/shBrushGroovy.js"></script>
  <script type="text/javascript" src="./images/shBrushJava.js"></script>
  <script type="text/javascript" src="./images/shBrushPhp.js"></script>
  <script type="text/javascript" src="./images/shBrushPlain.js"></script>
  <script type="text/javascript" src="./images/shBrushPython.js"></script>
  <script type="text/javascript" src="./images/shBrushRuby.js"></script>
  <script type="text/javascript" src="./images/shBrushScala.js"></script>
  <script type="text/javascript" src="./images/shBrushSql.js"></script>
  <script type="text/javascript" src="./images/shBrushVb.js"></script>
  <script type="text/javascript" src="./images/shBrushXml.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.defaults["toolbar"] = false; // 툴바없애기
    SyntaxHighlighter.defaults["auto-links"] = false; // 자동 링크없애기
    SyntaxHighlighter.defaults["tab-size"] = 2; // 탭사이즈를 2로 설정
    SyntaxHighlighter.all(); 
   // 줄바꿈을 안하실 분들은 여기 부터 생략하세요.
    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) {
                      console.log(i);
                      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();
		 });
	});
  </script>

 

 

위 코드에서 2번째 라인은 테마 설정입니다. 저는 디폴트 테마인 기본테마를 사용해서 위와 같이 출력됩니다.


23,24,25라인은 configuration 설정인데요. 저렇게 스크립트에서 일괄적으로 설정할 수도 있고, 개별로 <pre> 태그에 따로 설정할수도 있습니다.

<pre class="brush:css;auto-links:true;">
http://sometimes-n.tistory.com/
</pre>

이렇게 말이죠.


자세한 내용은 http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ 여기에서 확인하세요.


27번째 라인부터 58번째 라인은 줄바꿈을 위한 스크립트입니다. 코드 소스에 줄바꿈을 하지 않으시려면 빼시면 됩니다. 줄바꿈은 저 아래에 shCore.css 도 함께 수정을 해주셔야 합니다.


다른 테마는 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기에서 확인해 보시면 됩니다.

 

테마 파일은 shThemeDefault.css, shThemeDjango.css, shThemeEclipse.css, shThemeEmacs.css, shThemeFadeToGrey.css, shThemeMidnight.css, shThemeRDark.css 이 있으며, 적용하려면 2번째 라인의 파일명을 변경해 주시면 됩니다.

 

아래는 각 테마 별로 스크린 샷입니다.

 

shThemeDefault.css 

 

 

shThemeDjango.css

 

 

shThemeEclipse.css

 

 

shThemeEmacs.css

 

 

shThemeFadeToGrey.css 

 

 

shThemeMidnight.css

 

 

shThemeRDark.css 

 

 

 

이렇게 하면 기본적인 설정은 끝났습니다.

 

사용방법은 글쓰기에서 html 편집모드에서 아래 코드를  삽입해 보세요.

 

<pre class="brush: html">

  &lt;script type="text/javascript"&gt;
    alert("SyntaxHighlighter");
  &lt;/script&gt;

</pre>

 

 

그럼 아래와 같이 보여집니다.

  <script type="text/javascript">
    alert("SyntaxHighlighter");
  </script>

 

예쁘게 보여지죠?

 

여기에서 태그를 < 또는 > 가 아닌 &lt; 또는 &gt; 로 입력한 이유는 태그 그대로 < 또는 > 로 입력하면 본문 태그로 인식할 때가 있습니다.

 

가령 </head> 같은 태그를 <pre> 안에 입력했을 시 본문 태그로 인식되는 경우죠.

 

아무리 애를 써봐도 해결 방법이 딱히 없어서 메모장이나 에디터에서 < 또는 > 를 &lt; 또는 &gt; 로 전체 변경하셔서 입력하시는것이 정신 건강에 좋으실 것입니다.

 

아! 그런데 여기에서 문제가 있는데요! 티스토리 스킨에 따라서 적용이 안될수도 있어요.

 

왜냐하면 스킨 CSS에 PRE 태그 스타일로 지정되어 있으면 충돌이 발생해서 SyntaxHighlighter 가 적용안될수도 있어요.

 

제가 쓰는 스킨인 반응형 #1 스킨을 예를 들면, 스킨 CSS 에서 CTRL+F 해서 pre를 검색해주세요. 온전한 pre 태그에 대한 스타일을 없애줘야 합니다.

 

우선 3번째 라인의 pre, 를 지워주세요.

이 코드를..

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}

 

이렇게 pre, 를 지워주세요

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}

 

179번째 라인의 pre 스타일을 주석 처리(/* */) 해주세요.

/* .skin_view .area_view pre { background-color:#F6F7F8; margin:28px auto; padding:16px; word-wrap: break-word; font-family: Menlo,Consolas,Monaco,monospace; font-size:14px; line-height:20px} */

 

다른 스킨에서도 위엣처럼 pre 스타일이 지정되어 있으면 삭제해줘야 합니다. pre태그는 거의 안쓰이니까 삭제해도 크게 문제 없을거에요!

 

또, 브라우져에 따라 다르게 보이는 버그? 때문에 골머리 썩힌것이 있습니다.

 

크롬에서는 제대로 보이는데 익스플로러(11버전)에서는 라인번호와 소스줄이 맞지 않는 경우가 있습니다. 아래 스크린샷을 보세요.


줄이 점점 어긋나면서 23번째 줄에서는 결국 한줄이 부족한것처럼 보이죠?


shCore.css의 35번째 라인의 line-height가 1.1em으로 되어 있는데 이것을 px로 본인 입맛에 맞게 아래와 같이 수정하세요.

.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 15px !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;
  min-height: inherit !important;
  min-height: auto !important;
}

 

1.1em으로 되어 있는데, line-height를 em으로 설정시 브라우져별로 다르게 보이기 때문에 생기는 문제인것 같습니다.

 

또한 원본과 다른점은 넓이에 따라서 줄바꿈(wrap)이 자동으로 된다는 것이외에 여러가지를 수정했는데요.


줄 바꿈을 하기 위해서는 줄바꿈이 발생했을때 라인 번호의 높이값도 변경해줘야 하기 때문에 위 6번에서 27~58 라인을 추가해 주셔야 줄 바꿈이 제대로 보여집니다.


간혹, 스킨에 따라서 SyntaxHighlighter 에 세로 스크롤 바가 스킨에 따라서 발생되는 경우도 있습니다.

 

제가 수정한 내용에는 주석처리 해놓았으니 아래를 보고 필요한것들만 골라서 사용하세요

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  padding: 2px 0; /* 세로 스크롤바 생기는 버그를 위한 css 추가 */
}
.syntaxhighlighter.source {
  overflow: hidden !important;
}
.syntaxhighlighter .bold {
  font-weight: bold !important;
}
.syntaxhighlighter .italic {
  font-style: italic !important;
}
.syntaxhighlighter .line {
  white-space: pre-wrap !important; /* 줄 바꿈 설정 */
  word-break: break-all !important; /* 줄 바꿈 설정 */
}
.syntaxhighlighter table {
  width: 100% !important;
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .container {
  position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important;
}
.syntaxhighlighter table td.gutter .line {
  text-align: right !important;
  padding: 0 0.2em 0 0.2em !important; /* line 번호 여백 수정 */
  width: 25px !important; /* line 번호 width 값 수정 */
}
.syntaxhighlighter table td.code .line {
  padding: 0 0.2em !important;/* 소스 좌우 여백 수정 */
}

 

우와 이제 겨우 두번째 글인데 글쓰기 정말 힘드네요 ㅠㅠ 


SyntaxHighlighter 사용자 설정에 대해서 추후에 세밀하게 또 글 올리겠습니다.


아래 공감과 댓글은 글 올리는데 큰 힘이 됩니다. ^^

 

감사합니다.



추가) 지금 제가 사용하고 있는 그대로의 소스 파일을 올려드립니다.

syntaxhighlighter_cst_by_sometimes-n.tistory.com.zip

위 파일을 다운로드 받아서 압축을 푼후에 파일업로드하세요.

 

댓글