SyntaxHighlighter, 티스토리 적용법

일반 2012. 11. 26. 13:10

출처 : http://scilife-lifelog.tistory.com/81



Syntax Highlighter는 소위 말하는 '코드를 하이라이팅 해주는 툴', '코드 보기쉽게 바꿔주는 그것'이다. syntax highlighter는 굉장히 기능이 편하고 간편함에도 불구하고, 티스토리에서 제공해주고 있지 않다. 이 syntax highlighter를 티스토리에 설치해보도록 하자. 

다운로드 링크(공식홈페이지)


위 링크를 통해서 Syntax Highlighter를 다운받고, 압축을 해제하면 아래와 같은 파일과 폴더가 보일것이다.

이중, 우리가 사용할 파일들이 들어있는 폴더는 'scripts' 와 'styles'에 들어있는 파일들이다.



  이 파일들을 티스토리 스킨 image 폴더에 업로드 해야 하는데, TISTORY 어드민 페이지로 진입한 뒤,

꾸미기->HTML/CSS 편집->파일업로드->추가

를 눌러 scripts 와 styles안에 있는 파일을 전부 업로드한다.




업로드를 완료하고 나서, HTML/CSS편집으로 진입한다. 그 뒤, 아래의 코드를 <head>와 </head>의 사이에 삽입한다. 필자는 아래 이미지의 블록처리된 곳에 아래의 코드를 삽입하였다.

▼코드

<!-- syntax highlighter start -->
<script type="text/javascript" src="./images/shCore.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/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeFadeToGrey.css"/>
<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!-- syntax highlighter end -->


코드를 삽입한뒤, 반드시!  "미리보기" 버튼을 눌러 에러가 생기는지 체크해봐야 합니다.



다음은, 게시글에 삽입하는 방법이다. 게시글 위에 HTML에 체크한 다음 아래 코드를 참조해서 삽입하면 하이라이팅 된 결과물이 출력된다. 이때, 코드의 Brush Aliases에는 코드 아래쪽에 있는 이미지의 brush aliases중 원하는 것을 삽입하면 된다.


<pre class = "brush : Brush Aliases">

Source Code

</pre>


<pre class="brush:c">

#include <stdio.h>
  int main(void){
      printf("hello world\n");
  return 0;
  }
</pre>

  
  위와 같은 예제를 사용하면, 아래와 같이 하이라이팅 되서 나오게 된다. 이때, brush:c대신 다른 aliases값을 사용한다면 다른 언어의 하이라이팅도 가능하다.

?
1
2
3
4
5
6
#include <stdio.h>
  int main(void){
      printf("hello world\n");
  return 0;
  }
</stdio.h>


다른 언어에 대해서도 아래와 같이 가능하다.


?
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
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>SyntaxHighlighter Demo Page - <?= htmlspecialchars($title) ?></title>
 
  
 
  
<!--?
/***********************************
 ** Multiline block comments
 **********************************/
  
$stringWithUrl = "http://alexgorbatchev.com";
$stringWithOutUrl = 'hello world';
  
ob_start("parseOutputBuffer");      // Start Code Buffering
session_start();
  
function parseOutputBuffer($buf) {
    global $portal_small_code, $portal_gzcompress;
    global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
  
    // cleaning out the code.
    if($portal_small_code && !$portal_gzcompress) {
        $buf = str_replace("    ", "", $buf);
        $buf = str_replace("\n", "", $buf);
        $buf = str_replace(chr(13), "", $buf);
    }
}
  
?-->
  
<!-- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -->

사족을 좀 덧붙이자면, 테마의 변경은 위에서 제공한 코드 중,

<link type="text/css" rel="Stylesheet" href="PATH/Styles/shThemeDjango.css"/>

의 shThemeDjango.css를 수정하면 된다. 자세한 사항은 '여기(URL)'를 참고해주기 바란다.


또한, 이 Syntax Highlighter는 약간의 버그를 가지고 있는데1, 이 버그를 수정하는 방법에 대해서는 차후 포스팅하도록 하겠다.

저작자표시

'일반' 카테고리의 다른 글

MSCVR100.DLL 에러발생시 해결방법  (0) 2013.06.17
무한 반복되는 윈도우즈 업데이트 항목(Microsoft .NET Framework 4) 해결방법  (0) 2013.01.08
온라인에서 로딩 GIF 이미지 만들기  (0) 2012.11.18
외국 프록시 서버 통해 접속하기  (0) 2012.10.28
USB 파일복구프로그램 (DIskGenius )  (2) 2012.08.28
Posted by 요지
,

티스토리툴바