블로그에 프로그래밍 소스 코드 깔끔하게 보이도록 도와 주는 Google SyntaxHighlighter사용법

블로그에 프로그래밍 소스 코드 깔끔하게 보이도록 도와 주는 Google SyntaxHighlighter사용법

아직 제 블로그에 적용하지 못한 소스 코드 예쁘게 넣는 방법 중 이 방법을 적용해 보고자 아래의 사이트를 찾았습니다. 잘 정리가 되어 있어 도움을 받았습니다.   

이대로 따라해서 적용해 보기로 했는데 깔끔하게 나옵니다.

http://shagall.tistory.com/327 

설치 과정 설명

아래의 사진은 https://code.google.com/p/syntaxhighlighter/ 에 접속하여 다운로드에 접속할 때 나타나는 화면 입니다. 

화면 왼쪽에서 다운로드를 찾아 클릭하면 아래와 면으로 이동합니다. 1.5.1.rar파일을 내려받기 합니다. 

압축을 풀면 3개의 폴더가 나타납니다. Scripts와 Styles폴더를 사용할 것 입니다.

관리자 화면에서 HTML/CSS편집을 선택합니다.

파일 업로드를 선택하고 Styles폴더에 파일을 열어 업로드 합니다.

이번에는 Scripts폴더를 열어 그 속에 있는 파일을 열어 업로드 합니다.

HTML파일을 열어 12번 줄과 같이 <link rel="stylesheet" type="text/css" href="./images/SyntaxHighlighter.css"/>를 삽입합니다.

 html 페이지의 끝으로 이동한 다음 </body>앞 부분에 아래의 내용을 복사해서 붙여 넣기 합니다. 

<script class="javascript" src="./images/shCore.js"></script>

<script class="javascript" src="./images/shBrushCpp.js"></script>

<script class="javascript" src="./images/shBrushCss.js"></script>

<script class="javascript" src="./images/shBrushJScript.js"></script>

<script class="javascript" src="./images/shBrushSql.js"></script>

<script class="javascript" src="./images/shBrushVb.js"></script>

<script class="javascript" src="./images/shBrushXml.js"></script>

<script class="javascript">

dp.SyntaxHighlighter.ClipboardSwf = './images/clipboard.swf';

dp.SyntaxHighlighter.HighlightAll('code');

</script>

이제 작업이 완료 되었습니다. 

사용 방법

<TEXTAREA name="code" class="html">

이 사이에 필요한 소스 코드를 삽입합니다. class="여기에 사용할 소스 코드 언어의 클래스를 삽입합니다."

</TEXTAREA>

아래의 표는 왼쪽이 언어, 오른쪽이 삽입할 클래스 입니다. 예를 들어 html코드를 삽입하려면 class=html과 같이 하면 됩니다.

C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	css
Delphi	delphi, pascal
Java	java
Java Script	js, jscript, javascript
PHP	php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

이제부터 제 블로그도 예쁜 소스 코드가 보일 거리 거라고 생각하니 기분의 좋아 집니다.