티스토리 깔끔하게 소스코드 추가하기(Syntaxhighlighter)

---

티스토리 소스코드 깔금하게 추가하는 방법

---

• 우선 파을을 다운 받는다.(최신버전으로 하고자 한다면 홈페이지에서 다운받아도 됩니다. -> 크게 다르지 않습니다.)
  

 syntaxhighlighter_3.0.83.zip

• 티스토리 홈페이지 -> 상단의 "블로그 관리" -> 좌측의 "꾸미기"에서 "스킨편집" -> 우측의 "html 편집" -> 우측 상단의 "파일 업로드" 선택->
  우측 하단의 "+추가"선택 -> 앞에서 다운받은 알집안의 [styles]폴더 내의 *.css파일, [scripts]폴더 내의 *.js파일을 모두 추가한다.
• 우측 상단의 "html" 선택 -> 맨 하단의 <body/>와 <html/> 사이에 문장 삽입

<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();

</script>

• 추가적으로 기본 디폴트 스킨이외의 것을 사용하고자 한다면 빨간 글씨(shThemeDefault.css) 부분만 원하는 스킨으로 변경해주면 된다.
  스킨 정보는 다음 사이트를 참고한다. -> http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
• 이제 글쓰기에서 우측 상단 쪽에 있는 "html" 킨 다음에 다음 문장을 사용하면 된다.
  유의 사항 글쓰는 도중에는 적용되었는지 확인이 안되므로 미리보기를 통해서 확인하면 된다.

<pre class="brush:c;"> 

#include <stdio.h> 

int main() { } 

</pre>