티스토리 소스코드 플러그인 - syntaxhighlighter_3.0.83
개발 관련 블로그에서는 소스코드를 같이 올리는 경우가 있습니다.
이 경우 소스코드의 가독성을 높이기 위해 플러그인을 사용할 수 있습니다.
저는 그중에서 가장 유명한 Syntaxhighlighter 라는 플러그인을 적용해보겠습니다.
Syntaxhighlighter 홈페이지
http://alexgorbatchev.com/SyntaxHighlighter/
syntaxhighlighter_3.0.83 다운로드
syntaxhighlighter_3.0.83.zip대부분의 블로그에서 해당 홈페이지에 가서 다운받으라고 되어있는데,
홈페이지에서는 현재 syntaxhighlighter v4만 다운받을수 있습니다.
저는 가장 많이 쓰고있는 버전인 syntaxhighlighter v3을 사용하였습니다.
플러그인 적용하기
1. 다운받은 압축파일을 풀면 다음과 같은 폴더들이 보입니다. 이중에서 scripts 와 styles 만 사용하게됩니다.
2. 플로그인을 적용하기 위해 티스토리 블로그관리에서 꾸미기 - HTML/CSS 편집 메뉴로 들어갑니다.
3. 파일업로드를 선택후 하단에 있는 추가 버튼을 클립합니다.
추가 버튼을 누르면 파일 선택창이 뜨는데,
여기에서 scripts 와 styles 에 있는 모든 파일들을 선택하여 업로드하면 됩니다.
참고로 폴더를 각각 선택 후 Ctrl + A 를 이용하면 간편하게 파일 업로드를 할 수 있습니다.
4. 파일업로드 후 오른쪽상단의 HTML을 클릭하여 HTML을 편집해야합니다.
하단의 코드를 복사하여 </head> 바로위에 붙여넣습니다. </head>의 위치는 Ctrl + F 로 찾으면 됩니다.
<span style="font-family: Tahoma;">
<script type="text/javascript" src="./images/shCore.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/shBrushJScript.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css">
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
</span>
<style>
.syntaxhighlighter {
overflow: hidden !important;
}
</style>
5. <body>를 아래와 같이 변경해 주세요. <body>는 </head>바로 아래 있습니다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');">
6. 저장버튼을 누르면 설정완료입니다.
플러그인 사용하기
이렇게 적용된 플러그인은 글을 작성할때 사용할 수 있습니다.
티스토리 글쓰기에서 우측에 있는 
<pre class="brush:xml;">
</pre>
[ 주의사항 ( 프로그램 사용 규약) ]
※ 이 프로그램을 다운로드, 실행, 설치하는 행위는 프로그램 사용 규약에 동의함을 의미합니다.
※ 이 프로그램을 사용함으로써 발생하는 모든 문제의 책임은 사용자에게 있습니다.