SyntaxHighlighter

syntaxhighlighter를 사용하기 위한 기본 세팅

CleanSense 2017. 12. 31. 15:54
728x90

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

 

테마들은 다음을 참조하면된다.

 

syntaxhighlighter의 여러가지 테마들

 

후에  </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을 사용하기 위한 세팅은 끝이라고 보면된다.

728x90