SyntaxHighlighter 적용

남들 쓰는걸 보니 나도 써야겠단 생각이 들어서 적용을 시작했다.

기존 나도는 소스를 보니 기본적인 스크립트 지식이 없이는 골치가 아플 것이다.

내가 제일 좋아하는 요점정리부터 시작한다.

티스토리는 관리자메뉴의 스킬-HTML/CSS 편집 메뉴에서 전체적인 설정을 변경가능하다.

거기서 기본적인 스크립트를 사용하여 약속된 태그(2.0대버젼은 pre를 썻다고하고 3.0대 현재는 blockquote를 쓴다)

안에 삽입된 코드를 처리하는 방법을 쓴다.

일단 해당 홈페이지에서 (http://alexgorbatchev.com/SyntaxHighlighter/) 최신소스를 다운로드 받는다

압축을 풀고 해당 디렉토리안의 script , styles 안의 내용을 모두 업로드한다.(아는사람은 필요한거만 올리자)

그리고 HTML/CSS편집에서 title태그안에 해당 스크립트를 삽입.

<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.noConflict();
jQuery(document).ready(function(){
jQuery("BLOCKQUOTE").each( function() {
if (jQuery(this).attr('class').substr(0,5)=='brush')
{
var temp = jQuery(this).html();
temp = temp.replace(/\n/gi, "");           
temp = temp.replace(/<BR>/gi, "\n");           
temp = temp.replace(/<BR \/>/gi, "\n");           
temp = '<script type="syntaxhighlighter" class="'+ jQuery(this).attr('class') + '"><![CDATA['+temp+']]><\/script>';          jQuery(this).after(temp);          
jQuery(this).remove();     
}   
});
SyntaxHighlighter.defaults['toolbar'] = true;
SyntaxHighlighter.all();
});
</script>

자 이러면 완성인데 잘안되는사람들이 분명 있다.

화면의 스크립트 오류에 집중하라.

내 티스토리는 BLOCKQUOTE 태그를 쓰는데 스크립트상으로는 blockquote였다.

replace부분에서도 정규식 에러가 발견됬다.

자잘한 이슈만 잡을능력이 되면 거뜬하게 올릴 수 있다.