Syntax Highlighter 적용 방법

예전에 적용했었는데 스킨을 바꾸니 안 된다.

찾아보니 안 된다네 ㅠㅠ

그래서 이번엔 정리하기로 한다.

잘 정리해놓으신 블로거님께 찬사를!! 덕분에 쉽게 적용했어요 ^^

출처 : http://periar.tistory.com/55

0. Syntax Highlighter를 다운 받자.

http://alexgorbatchev.com/SyntaxHighlighter/download/

1. 관리 페이지에서 HTML/CSS 편집을 열고

2. skin.html을 열고 </body>와 </html> 사이에 아래 내용을 추가

<script type="text/javascript" src="./images/shCore.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/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/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/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/shCore.js"></script> 

<script type="text/javascript" src="./images/shLegacy.js"></script> 

<link href="./images/shCore.css" rel="stylesheet" type="text/css"> 

<link href="./images/shThemeRDark.css" rel="stylesheet" type="text/css">

 

<script type="text/javascript"> 

    SyntaxHighlighter.all(); 

    dp.SyntaxHighlighter.HighlightAll('code'); 

</script>

3. style.css에 아래 내용 추가

div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }

4. 파일 업로드로 가서 압축 해제한 Syntax Highlight 폴더 아래 scripts 폴더와 styles 폴더의 모든 파일을 올리자.

5. 끗!

적용 방법

글쓰기 누르고 코드 적용하려는 부분은 HTML을 열어 아래처럼 기록하면 된다.

<pre class="brush: cpp"> function foo()

{

if(counter &lt;= 10)

return;

// it works!

}

</pre>

그러면 이렇게 나온다.

function foo()
{
	if(counter <= 10)
		return;
	// it works!
}

우앙 끝!