티스토리 - Syntax Highlighter 3.0 적용

재미난거2014. 2. 6. 00:06
728x90

기존에 Syntax Highlighter를 적용해 놓았는데 테마를 변경하면서 설정 파일들이 날아가 버림.
예전에 작성해 온 파일들이 Syntax Highlighter 적용이 받지 못 하고 있다. 

파일다운로드  - http://alexgorbatchev.com/SyntaxHighlighter/download

압축을 해제하고 scripts폴더에 있는 js 파일, styles에 있는 css 파일를 관리자에 모드에서 
HTML/CSS편집-> 파일업로드에 다 업로드한다. 경로는 images/폴더에 js, css파일이 올라간다.

HTML/CSS편집에서 skin.html </head> tag 앞에 css와 js를 추가한다. 실제로 css는 shCore.css, shThemeDefault.css만 업로드 하면 된다. 개인적으로 귀찮아서 전체 업로드를 했지만

<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>


티스토리 입력시에 다음과 같이 pre tag를 활용하여 사용하면 된다.

<pre class="brush: java">

</pre>

기존에 설치했던 것 또한 pre tag를 사용했지만 brush; 부분이 들어가지 않아서 일일히 수정을 해 줘야 할 듯 하다. ~

 

 


 

728x90

작성자

Posted by 일퍼센트

관련 글

댓글 영역