티스토리 뷰

SyntaxHighlighter 는 웹에서 각종 소스 코드에 색을 입혀주는 구문 강조 javascript 라이브러리이다.

직접 업로드해서 코드를 추가해주는 방법도 있지만...
제작자가 직접 호스팅 해주는 것을 이용하면 javascript 코드 추가만 하면 이용할 수 있다.

HTML/CSS 편집의 skin.html에서 head가 끝나는 부분에 아래의 코드를 삽입하자.
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></SCRIPT>
<SCRIPT src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript"></SCRIPT>
<LINK href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css">
<LINK href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">

<SCRIPT language="javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</SCRIPT>

이렇게 하면 코드 하이라이트 기능을 이용할 수 있다.

직접 업로드 하여 적용하는 방법



<테마 적용법>
이 라이브러리는 몇개의 테마를 제공한다.
제공되는 테마는 다음 주소에서 확인할 수 있다.
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes

<LINK href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
이 부분의 shThemaDefault.css 대신에 변경할 테마 파일 이름을 지정하면 된다.

직접 제작한 테마는 업로드하여 업로드된  css파일을 지정하면 된다.


<사용법>
글쓰기에서 HTML모드로 들어가 아래와 같은 형식으로 코드를 작성하면 된다.(C++ 의 경우)
<PRE class="brush:cpp">

   코드내용

</PRE>

다른 언어를 사용하고 싶을 경우 참고하자.

 언어 명칭
 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



&lt;알려진 문제점&gt;




추천정보
댓글
댓글쓰기 폼