티소토리에 SyntaxHighlighter 사용하기
특징 : 소스 코드 보기가 편하다. 다시 편집하면 깨진다.
SyntaxHighlighter 는 아래 에서 다운 받으면 됩니다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
다운을 받고 압축을 풀어보면 아래와 같은 폴더가 나오는데 Styles 폴더와 Scripts 폴더에 있는 파일을 추가 시켜 주면 됩니다.
참고로 크롬에서 추가 버튼이 안눌러져서 익스플로러에서 작업을 진행 했습니다.
추가는 폴더형식의 저장이 아니라 파일을 그냥 드래그 해서 넣는 형태입니다
파일을 추가 한후 HTML/CSS 탭에 들어온후 아래 코드를 넣습니다.
아래 src 경로가 ./images 입니다.
|
<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> |
Textarea 를 사용하려면 위 코드 BODY 부분에 하나더 추가 시켜줘야 한다.
<body Onload="dp.SyntaxHighlighter.HighlightAll('code');"> |
그다음 글쓰기에서 아래 처럼 소스코드를 넣으면 됩니다.
|
<pre class="brush:cpp">
… 소스 코드 …
</pre> |
<textarea name="code" class="brush:cpp;">
… 소스 코드 …
</textarea> |
아래는 예제 입니다.
