SyntaxHighlighter 업데이트

SyntaxHighlighter를 적용한지 꽤 되서 블로그 업데이트를 겸 새로운 버전을 적용해 보았다.

 

#1 다운로드

 

홈페이지 주소도 바뀌었네요.

http://alexgorbatchev.com/wiki/SyntaxHighlighter

 

먼저 다운로드 받고

한글도 지원하니

http://alexgorbatchev.com/downloads/grab.php?name=sh

 

 

# 2 단계 블로그에 적용

 

1. 압축을 해제하면 필요한 파일을 업로드 해야 한다.
[그림1]

압축을 해제하면 test.html파일이 보이는데 이 파일을 에디터에서 오픈한다.

여기에 필요한 파일들을 파악한다.

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>SyntaxHighlighter Build Test Page</title>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
	<script type="text/javascript" src="scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
	<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
	<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
	<script type="text/javascript" src="scripts/shBrushJava.js"></script>

	<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
	<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
	<script type="text/javascript" src="scripts/shBrushPython.js"></script>
	<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
	<script type="text/javascript" src="scripts/shBrushScala.js"></script>

	<script type="text/javascript" src="scripts/shBrushSql.js"></script>
	<script type="text/javascript" src="scripts/shBrushVb.js"></script>
	<script type="text/javascript" src="scripts/shBrushXml.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
		SyntaxHighlighter.all();
	</script>

 

파일 업로드 

scripts 디렉터리 파일들, styles 디렉터리 파일들을 모두 업로드 한다.

블로그 - 관리자 - 스킨 - HTML/CSS편집 - 파일 업로드

두 images 디렉터로 하위에 업로드 된다.



# 다음은 script 추가

test.html에서 확인한 script의 패스부분을 수정해서 추가해 놓는다.

HTML/CSS 편집에 아래 스크립트를 헤더 부분에 추가한다.
<script type="text/javascript" src="images/shCore.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/shBrushJScript.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/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>

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

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

 <script type="text/javascript">

  SyntaxHighlighter.config.clipboardSwf = 'images/clipboard.swf';

  SyntaxHighlighter.all();

 </script>

#3 확인

test.html의 코드를 그대로사용해 보자.

문서 작성후 html보기에서 아래 코드를 삽입하고 내용을 확인해 본다.

<pre class="brush: c-sharp;">

function test() : String

{

 return 10;

}

</pre>
function test() : String
{
 return 10;
}


Happy Coding~:)