티스토리 뷰

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

 

아래 처럼 말이죠.

<div id="dkHead" role="banner" class="area_head ">
  <h1 class="screen_out">[##_title_##]</h1>
  <div class="area_profile ">
    <a class="link_profile" href="/"><img src="[##_image_##]" width="50" height="50" class="img_profile" alt="프로필사진"></a>
    <div class="info_profile">
      <button type="button" class="btn_name">[##_blogger_##]
        <span class="ico_skin ico_name"></span>
      </button>
      <ul class="list_name">
        <li><a href="[##_owner_url_##]/entry/post" class="link_name">글쓰기</a></li>
        <li><a href="[##_owner_url_##]" class="link_name">관리</a></li>
        <li class="box_division"><a href="[##_taglog_link_##]" class="link_name">태그</a></li>
        <li><a href="[##_guestbook_link_##]" class="link_name">방명록</a></li>
        <li><a href="[##_rss_url_##]" class="link_name">RSS</a></li>
      </ul>
      <p class="txt_condition">[##_title_##]</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

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

 

댓글
  • 비밀댓글입니다 2016.04.16 14:21
  • 토마토.. 어디서 잘못되었는지 초보자님의 블로그 소스를 봐야 알수 있을것 같아요. 블로그 주소를 올려주시면 봐드릴게요.
    일단 위 내용 제일 하단에 제가 지금 사용하고 있는 그대로의 소스를 올려놓겠습니다.
    제가 올려드린 압축파일을 파일 업로드하셔서 다시 해보시고 안되시면 댓글 남겨주세요.
    2016.04.16 15:48 신고
  • 비밀댓글입니다 2016.04.16 19:41
  • 토마토.. 소스상으론 문제가 없는것 같은데,
    pre 코드 넣은 글을 못찾아서 코드하이라이트가 제대로 나오는지 확인할수가 없었어요.
    pre태그에 코드 넣은 글이 있으면 알려주시거나, pre태그에 코드를 넣어서 글 하나 작성해서 올려주시면 확인해보겠습니다.
    2016.04.18 02:37 신고
  • White Whale pre 테그가 아닌 textara 테그를 이용해서 하이라이트를 사용하였는데 반응형에 따라 크기가 변경되지 않아서 혹시나 조언을 얻을 수 있을까 이렇게 뎃글을 남깁니다.
    <P><TEXTAREA class=brush:java; name=code> </TEXTAREA></SPAN></P>
    2016.05.19 11:48 신고
  • 토마토.. 혹시 해결책을 찾으신건가요?
    님 블로그에서 창 크기를 줄이면 코드하이라이트 크기도 변경되던데요..
    제가 잘못이해한것인지 ㅠㅠ
    2016.05.20 00:31 신고
  • White Whale 코드하이라이트는 줄어들지만 글자 크기가 변하지 않더라구요 현재 css 우선순위를 찾고 있는데 해결될꺼 같습니다. 2016.05.20 01:15 신고
  • 비밀댓글입니다 2016.06.30 10:05
  • 비밀댓글입니다 2016.08.02 12:55
  • 비밀댓글입니다 2016.10.18 22:00
  • openview 감사드려요. 잘보고 배워 갑니다.^^ 2017.02.04 19:21 신고
  • 둘마 감사합니다 최고! 2017.02.20 23:53 신고
  • 빅에너지™ 잘봤습니다. 스킨을 바꾸고 나서 신택스하이라이터가 동작을 안하는데 무슨문제 인지 모르겠네요. 글중에 pre 관련 내용이 있어서 pre css도 찾아봤는데 따로 pre에 대한 정의는 없더라구요. 2017.06.06 11:06 신고
  • 뚜스머리 메인 테마를 바꿔보세요. 2017.07.24 01:08 신고
  • 비밀댓글입니다 2017.08.17 16:58
  • 벼야 감사합니다!! 2018.01.25 17:53 신고
  • JmIT 감사합니다!! < >를 소스코드 상에 출력했어야 했는데 자꾸 쓸데없이 </>가 짝으로 생성되서 해결법 찾고 있었는데 덕분에 잘 해결했습니다. 2018.04.19 15:07 신고
  • kkamikoon 제가 토마토님의 소스를 잘 사용하고 있었습니다.
    그런데 제 블로그에서 python 소스를 업로드하였는데, 줄바꿈을 수행하고 바로 다음 줄부터 다시 줄 번호가 생기고 아래에 있어야 할 줄 번호가 위로 올려져 있는 상태로 출력됩니다.

    예시 >
    123456789123456789123456789
    source1
    source2

    위에 처럼 소스를 작성했을 때,

    1 | 123456789
    2 | 123456789
    3 | 123456789
    | source1
    | source2

    이렇게 출력됩니다. 원래는 source1, source2 옆에 줄번호가 있고, 줄바꿈 된 곳에는 한 줄일 때, 줄 번호가 생성되지 않아야 하는데...

    도움을 요청합니다!! 문제의 포스트 주소는 아래에 있습니다.

    블로그 : http://kkamikoon.tistory.com/81
    2018.07.16 23:02 신고
  • 쩡우. 감사합니다. 하나 궁금한게 있는데 C코드를 작성하면 코드별로 색이 변경되게는 못하나요??
    예를들어서 if문을 적으면 if색이 바뀐다던지 주석처리하면 주석의 색이 바뀐다던지 하는거요
    2018.07.17 11:17 신고
댓글쓰기 폼
공지사항
Total
579,849
Today
734
Yesterday
793
링크
«   2018/08   »
      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  
글 보관함