SyntaxHighlighter는 자바스크립트로 개발된 소스 코드 하이라이팅 툴입니다.
SyntaxHighlighting이란 코드에 색상으로 구분을 하여 가독성을 높여주는 것입니다.
홈페이지나 블로그 등에 프로그래밍에 대한 설명을 주로 하는 분게서 사용을 하면 좋을 듯 합니다.
SyntaxHighlighter는 현재 Apache, Mozilla, Wordpress 등에서도 사용되고 있습니다.
- 사용방법1. SyntaxHighlighter를 다운로드하고 자신의 서버에 업로드하여 사용하는 방법.(download)
- 사용방법2. SyntaxHighlighter에서 제공하는 소스에 링크를 걸어 사용하는 방법.(hosted version)
SyntaxHighlighter 소스를 업로드 할 공간이 여의치 않은 분은 사용방법2를 선택하시면 되겠습니다.
로딩속도에서는 좀 떨어지겠지만...
download 방법과 hosted version 의 차이는 링크 url 차이이므로 hosted version만 설명하겠습니다.
hosted version Install
1. 하이라이팅을 원하는 페이지 <head> 에 외부 css를 불러옵니다.
<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" />
shThemeDefault 대신에 shThemeEclipse 를 사용하면 eclipse editor 테마처럼 디자인됩니다.
default 가 가장 괜찮아 보입니다...
(다운로드한 소스 패키지에서는 styles 디렉토리에 있습니다.)
2. 페이지 하단에 javascript 파일을 불러옵니다. (core/autoloader)
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
autoloader 라는 기능은 3.0 버전에 추가되었다고 하는데, 모든 brush 중 원하는 brush 파일만 로드하게끔 합니다.
이전에는 한 페이지에 모든 brush 를 로드하고 사용한 듯...
(다운로드한 소스 패키지에서는 scripts 디렉토리에 있습니다.)
3. 그 아래에 SyntaxHighlighter를 호출합니다.
<script type="text/javascript">
function path(){
var args = arguments, result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.all();
</script>
마지막의 SyntaxHighlighter.all(); 가 하이라이팅 기능을 활성화하는 부분이고, 나머지는 모두 autoloader에 관련된 기능입니다.
거의 모든 기능을 다 적어 놓았지만, 죽어도 안쓰겠다 싶은 brush들은 삭제하여도 좋습니다.
brush 리스트 중 앞 부분은 alias, 뒷부분은 @path 라고 보면 됩니다.
path 에는 brush 소스가 업로드 되어 있는 절대경로를 사용해야 합니다.
(다운로드한 소스 패키지의 scripts에 모든 brush가 있습니다.)
Coding
하이라이팅을 표시하기 위한 방법은 두 가지이며,
두 방법 모두 css 처럼 class 속성을 사용하여 원하는 brush의 alias를 지정해야 합니다.
1. <pre /> 태그를 이용하는 방법
이 태그의 문제는 code에서 < 기호를 사용할 때는 반드시 HTML entity인 < 로 사용해야 합니다.
예)
<pre class="brush: js">
<html>
<head>
function foo() {
}
</head>
</html>
</pre>
<html>
<head>
function foo() {
}
</head>
</html>
2. <script /> 태그를 이용하는 방법
이 태그는 CDATA를 사용하여 어떤 기호든 사용하는대로 출력됩니다.
하지만 RSS 등에서는 script 태그가 제거되어 정상적으로 표시되지 않는 단점이 있습니다.
블로그 등에서만 하이라이팅이 되도 괜찮다면 pre 태그 보다는 script 태그가 수월할 것입니다.
태그 사용시 script type을 text/javascript 가 아닌 syntaxhighlighter 로 설정해야 합니다.
예)
<script type="syntaxhighlighter" class="brush: js">
<![CDATA[
/**
* SyntaxHighlighter
*/
function foo() {
if (counter <= 10)
return; // it works!
}
]]>
</script>
Configuration
Syntaxhighlighter에도 여러 설정이 있지만, 주로 사용될 수 있을 만한 네 가지만 뽑아봤습니다.
- first-line : 하이라이팅 출력시 첫번째 줄의 번호를 임의로 지정할 수 있습니다.
- gutter:false : 라인을 출력하지 않습니다.
- highlight : 특정 라인을 하이라이팅 합니다. (ex: [2, 4, 6] )
- html-script : php 등의 다른 brush를 사용하더라도 html 을 하이라이팅 할 수 있는 기능입니다.
html-script 의 경우 반드시 xml brush 를 load 해야 합니다.
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
위 옵션들은 다음과 같이 사용할 수 있습니다.
<pre class="brush: php; html-script:true; first-line: 10; highlight: [2,4,6]">...</pre>
WRITTEN BY
- 손가락귀신
정신 못차리면, 벌 받는다.
