이것도 몇차례 시행착오를 격어서 기록해 두기로 했다.
0. Syntaxhighter 를 다운로드 받는다. (zip파일로 되어 있다) 그리고 압축을 풀어놓는다.
1. 티스토리 로그인 후
2. 관리로 들어간다.
3. 꾸미기 > 스킨편집
4. 우측 상단에 'html편집' 버튼이 있다. 누르자.
5. html / css / 파일 업로드 중 '파일업로드' 를 누르자.
6. images 들이 보일것이다. 하단에 '추가' 버튼을 누른다.
7. 다운로드 받은 경로에서 'scripts' , 'style' 밑에 있는 파일을들 모두 선택해서 올린다. (두번에 걸쳐 해야 할 것이다)
- 처음에 이상했다. 폴더채 올리는게 아니고, images 폴더 밑에 css, js 파일을 올려야 한다니...
8. 저장 버튼을 눌러 나온다.
9. 그리고 'Html' 텍스트를 눌러 </head> 전에 아래의 스크립트를 추가한다.
<!-- SyntaxHighlighter 설정 시작-->
<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>
<!-- SyntaxHighlighter 설정 끝-->
그리고 저장을 누른다.
10. 실제로 글을 쓸때 'html' 설정을 눌러 수정화면에
<pre class="brush: js">function foo{}//적고 싶은 소스코드를 적습니다.
</pre>
이런식으로 클래스를 적용해 준다.
참고사이트
http://mclass.tistory.com/54
덧글