- 티스토리에서 아래 예시와 같이 소스코드를 입력하는 방법입니다.
- 설치파일 다운로드하기.
* syntaxhighlighter_3.0.83.zip - 기본적인 설치파일
* shBrushMatlab.js - Matlab 문법을 위한 브러쉬 파일 풀버전
* shBrushMatlabSimple.js - Matlab 문법을 위한 브러쉬 파일 심플버전
* 최신 버전은 http://alexgorbatchev.com/SyntaxHighlighter/ 이곳에서 받습니다.
- 티스토리 "Admin>꾸미기>html/css편집>파일업로드"에 파일 업로드하기.
위에서 다운로드한 syntaxhighlighter_3.0.83.zip을 압축해제하고 scripts 폴더와 styles 폴더에 있는 모든 파일을 업로드하거나, 필요한 파일만 업로드합니다.
* 스타일 예제는 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 에서 확인할 수 있습니다.
* 브러쉬 설명은 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에서 확인할 수 있습니다.
- 티스토리 "Admin>꾸미기>html/css편집"에 코드 추가하기.
* skin.html 코드에서 </body>와 </html> 사이에 아래의 코드를 입력하면 됩니다.
<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/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushMatlab.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>
* style.css 코드에는 @charset "utf-8" 밑에 아래의 코드를 입력합니다. 이것은 크롬 브라우저 사용자를 위한 배려라고 합니다.
div .syntaxhighlighter {
overflow-y: hidden!important; overflow-x: auto!important;
}
- Syntaxhighlighter 사용하기.
글쓰기할 때, 에디터 오른쪽 위의 HTML 체크박스를 체크하면 html을 입력할 수 있습니다. HTML 체크박스를 체크하고 아래의 코드를 입력해 봅시다.
<pre class="brush:xml">
<script type="text/javascript">
document.write ( "Hello World" );
</script>
</pre>
빨간색으로 표시된 태크 사이에 소스코드를 입력하면 아래와 같은 결과를 얻을 수 있습니다.
- 참조
* 티스토리에 Syntaxhighlighter 초간단 적용
* matlab 코드를 syntaxhighlighter를 사용해서 보기 좋게 나타내는 방법(tistory)
* syntaxhighlighter 적용 시 IE 브라우저에서만 폰트 크기가 작아질 때
http://proglamor.tistory.com/2
* All Syntax Highlighter 2.0 brushes collected, described and downloadable
http://www.undermyhat.org/blog/2009/09/list-of-brushes-syntaxhighligher/>