참고 :
1. SyntaxHighlighter 다운로드
http://alexgorbatchev.com/SyntaxHighlighter/download/
2. 받은 압축 파일을 풀고
scripts 폴더와 styles 폴더 안에 있는 모든 파일을
Tistory 관리자 - HTML/CSS 편집 - 파일 업로드
를 통해 모두 업로드 한다.
3. Tistory 관리자 - HTML/CSS 편집 - HTML/CSS 의 skin.html 에서
</head> 위에 아래의 code 를 붙여 넣는다.
|
<!--Start of SyntaxHighlighter-->
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shLegacy.js" type="text/javascript"></script>
<script src="./images/shBrushBash.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushCSharp.js" type="text/javascript"></script>
<script src="./images/shBrushCss.js" type="text/javascript"></script>
<script src="./images/shBrushDelphi.js" type="text/javascript"></script>
<script src="./images/shBrushDiff.js" type="text/javascript"></script>
<script src="./images/shBrushGroovy.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushPhp.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushPython.js" type="text/javascript"></script>
<script src="./images/shBrushRuby.js" type="text/javascript"></script>
<script src="./images/shBrushScala.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushVb.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<script language="javascript">
SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 설정 (기본값 True)
SyntaxHighlighter.defaults['gutter'] = true; // 라인 번호 설정 (기본값 True)
SyntaxHighlighter.defaults['tab-size'] = 2; // 탭 사이즈 설정 (기본값 4)
SyntaxHighlighter.defaults['first-line'] = 1; // 라인 시작 숫자 (기본값 1)
SyntaxHighlighter.defaults['auto-links'] = false; // 링크 설정 (기본값 true)
SyntaxHighlighter.all();
</script>
<!--End of SyntaxHighlighter--> |
4. Tistory 관리자 - HTML/CSS 편집 - HTML/CSS 의 skin.html 에서
<body> 아래에 아래의 code 를 붙여 넣는다.
|
Onload="dp.SyntaxHighlighter.HighlightAll('code');" |
----- 여기 까지가 SyntaxHighlighter를 사용하기 위한 준비/설정
5. 글을 작성 중 source code 를 넣고 싶으면 HTML 편집 모드로 들어가서 아래와 같이 한다.
다양한 방법이 있으나 </script>를 써서 아래와 같이 작성하는것이 특수문자로 인한 오류 등을 줄일수있는 가장 나은 방법인것 같다..
|
<SCRIPT class=brush:cpp type=syntaxhighlighter><![CDATA[
//소스코드 넣기
]]></SCRIPT> |