[TiStory] Syntax HighLighter

 

Blog에서 Code 작성시 작성 코드 내용을 아름답게 꾸며 줄 수 있는 플러그인

 

 

1. 최신 버전의 SyntaxHighlighter을 다운 http://alexgorbatchev.com/SyntaxHighlighter/

syntaxhighlighter_3.0.83.zip(2012-04-23)

 

2. 해당 폴더의 내용 중 scripts와 styles 폴더의 내용을 모두, Admin-->HTML/CSS 편집기-->파일업로드에 업로드

 

3. Admin --> HTML/CSS 편집기 --> HTML/CSS --> skin.html의
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> 하단에 아래의
Code 추가.

<!----------------- 2012-04-23 Syntax HighLighter 적용사항 -------------------->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript" src="./images/shBrushAppleScript.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFx.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/shBrushPowerShell.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/shBrushSass.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">
/* jQuery 부분 */
jQuery.noConflict(); // 다른 라이브러리와 충돌을 방지한다.
jQuery(document).ready(function(){ // 문서가 모두 읽힌 후에 다음을 실행
jQuery("blockquote").each( function() { //blokquote가 사용한 태그
if (jQuery(this).attr('class').substr(0,5)=='brush')
// 그중 클래스명이 brush로 시작하는 것을 찾아 적용
{
var temp = jQuery(this).html(); // 내용 복사
temp = temp.replace(/\n/gi, "");
temp = temp.replace(/<BR>/gi, "\n");
temp = temp.replace(/<BR \/>/gi, "\n");
//temp = '<pre class="'+ jQuery(this).attr('class') + '">'+temp+'</pre>'
temp = '<script type="syntaxhighlighter" class="'+ jQuery(this).attr('class') + '"><![CDATA['+temp+']]><\/script>'
jQuery(this).after(temp); // 뒤에 새 작성된 pre 또는 script태그로 붙인다.
jQuery(this).remove(); // 기존의 인용태그 삭제
}
});
/* SyntaxHighlighter 부분 */
SyntaxHighlighter.defaults['toolbar'] = false; // 툴바 안 보기
SyntaxHighlighter.all();
});
</script>
<!---------------- 2012-04-23 Syntax HighLighter 적용사항 끝 ------------------------>

 

4. 기타 테마 설정. Code 화면 배경색 지정 및 글씨의 색상 설정

http://heyjimin.tistory.com/entry/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%97%90%EC%84%9C-Syntax-Highlighter-3x-%EC%93%B0%EA%B8%B0

 

 

 

출처 : http://gyuha.tistory.com/405