티스토리에 소스하이라이터 적용

[펌!!] 출처 http://sangs.tk/41

티스토리에  코드 하이라이트 설치하기 [SyntaxHighlighter]

1. 여기에 접속해서 3.0.83 http://alexgorbatchev.com/SyntaxHighlighter/download/ 다운받는다.

티스토리 html/css편집을 눌러 skin에 </body>와 </html> 사이에 아래 소스를 추가한다.

?

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

<script type="text/javascript" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shBrushAS3.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/shBrushJavaFX.js"></script> <script type="text/javascript" src="./images/shBrushJScript.js"></script> <script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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" src="./images/shCore.js"></script> <script type="text/javascript" src="./images/shLegacy.js"></script> <link rel="stylesheet" type="text/css" href="./images/shCore.css"> <link rel="stylesheet" type="text/css" href="./images/shThemeRDark.css">    <script type="text/javascript">     SyntaxHighlighter.all();     dp.SyntaxHighlighter.HighlightAll('code'); </script>

style.css 아무곳에나 아래를 추가한다.

?

1	div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }

다운받았던 파일을 압축해제후  scripts, style폴더만 파일을 전부 업로드해준다.

사용법은 간단하다

?

1 2	<pre class="brush:php">코드내용 </pre>