티스토리에 syntaxhighlight 3 적용하기
2010. 12. 16. 11:39 |
### 프로그래밍/Javascript/Css/Html
블로그를 사용하다 보면 프로그래밍 코드를 보기 좋게 올려 놓은 글들을 볼 수 있다.
티스토리에 syntaxhighlight라는 플러그인을 적용한 것이다.
1 2 3 | function _js(){ document.~} |
설치법
이런식으로 코드를 올릴 수 있다.
1. 요기 가서 다운을 받는다. http://alexgorbatchev.com/SyntaxHighlighter/. 받은 파일 압축을 푼다.
2. 티스토리관리메뉴에서 스킨->HTML/CSS 편집->파일업로드탭 클릭
3. 압축푼 곳에서 scripts폴더와 styles폴더안의 파일을 전부 업로드 한다.
4. 티스토리관리메뉴에서 스킨->HTML/CSS 편집 에서 skin.html 안의 내용에 아래 문장을 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script type="text/javascript" src="./images/shCore.js"></script><script type="text/javascript" src="./images/shBrushAS3.js"></script><script type="text/javascript" src="./images/shBrushCpp.js"></script><script type="text/javascript" src="./images/shBrushCss.js"></script><script type="text/javascript" src="./images/shBrushDiff.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/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/shBrushPython.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/shLegacy.js"></script><link href="./images/shCore.css" rel="stylesheet" type="text/css"><link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css"><script type="text/javascript"> SyntaxHighlighter.all() SyntaxHighlighter.config.stripBrs = true; SyntaxHighlighter.config.stripBrs = "blockquote";</script> |
사용법
글 작성시 html모트 체크 한 후 아래와 같이 사용 하면 된다.
<pre class="brush:해당브러쉬이름">
요 태그 안에 코딩 내용
</pre>
브러쉬 이름을 제대로 써야 각 언어에 따른 highlight가 제대로 표현된다.
