syntaxhighlighter를 사용하기 위한 기본 세팅
syntaxhighlighter_3.0.83.zip을 받고 블로그 관리에서 HTML/CSS편집에 들어간 후,
syntaxhighlighter_3.0.83.zip안의 scripts와 styles의 내용을 업로드 한다.
HTML편집에서 <head>와 </head>사이에
<link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css" />
를 붙여넣기 한다. 여기서 shCoreEclipse.css부분은 원하는 테마의 css파일의 이름을 넣어주면 된다.
shCoreDefault.css
shCoreDjango.css
shCoreEmacs.css
shCoreFadeToGrey.css
shCoreMDUltra.css
shCoreMidnight.css
shCoreRDark.css
테마들은 다음을 참조하면된다.
후에 </body> 의 직전에
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.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>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
를 붙여넣는다.
후에 CSS편집에서 @charset "utf-8"; 다음에
div .syntaxhighlighter {
overflow-y: hidden!important; overflow-x: auto!important;
}
를 붙여 넣는데 이는 크롬 사용자들을 위한 배려라고 한다..
기본적인 syntaxhighlighter을 사용하기 위한 세팅은 끝이라고 보면된다.