설치 방법
파일 업로드
아래 웹 사이트에서 download 항목으로 간 뒤, 최신 버전을 받는다. 압축을 풀면, 폴더가 여러 개 있는데, 여기서 scripts 폴더와 styles 폴더의 내용을 업로드해야 한다. 스킨 편집의 파일 업로드 기능을 이용하면 전부 images 라는 경로로 업로드 된다. http://alexgorbatchev.com/SyntaxHighlighter/스킨 편집에서 skin.html을 편집
경로만 주의하면 된다. 경로를 적을 때 "./images/"로 시작하는 경로를 넣어야 제대로 인식된다.<head>와 </head> 사이 적당한 곳에 다음 코드를 넣는다.
<link href="./images/shCore.css" rel="stylesheet" type="text/css" /> <link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="./images/shCore.js" type="text/javascript"></script> <script src="./images/shAutoloader.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ SyntaxHighlighter.defaults['smart-tabs'] = false; /* optional */ SyntaxHighlighter.defaults['tab-size'] = 8; /* optional */ SyntaxHighlighter.all(); //]]> </script>
</body> 바로 위에 다음 코드를 넣는다. 잘은 모르겠지만 autoloader의 코드가 먼저 나오고, 나중에 처리되어야 할 코드가 나오면 제대로 작동하지 않는다. head가 아닌 곳에 스크립트가 들어가는 것이 마음에 안 들면, autoloader를 쓰지 말든가, 아니면 autoloader의 동작 원리를 분석해서 코드를 고쳐야 할 것 같다. 아니면 head에는 스크립트를 전혀 안 넣고, 전부 뒤에 넣어도 좋다.
<script type="text/javascript">
//<![CDATA[
function path()
{
var args = arguments,
result = []
;
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', './images/'));
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'
));
//]]>
</script>
사용방법
방법 1<pre class="brush: c"> //코드를 적고 </pre>방법 2
<script type="syntaxhighlighter" class="brush: c; collapse: true" title="title"><![CDATA[ // 코드를 적고 ]]></script>여기서 brush는 언어에 따라 선택하면 된다.
그리고 class="brush: c; collapse: true"처럼 적으면 처음에 코드가 collapse된 상태로 나타나게 된다.
주의사항
<pre> 태그 내부에 있는 "<"나 ">"를 "<"와 ">"로 치환해야, 다양한 웹브라우저에서 제대로 보인다. 이 문제를 해결하기 위해 <script>를 쓰는 법도 있는데, 이건 코드 내부에 </script>가 있으면 오작동하는 경우가 있다. 그리고 script를 사용한 경우 syntax highlighter가 오류로 작동하지 않으면 화면에 코드가 전혀 안 나타나는 것도 문제다. Escape하는 것이 귀찮더라도 pre를 사용하는 것이 좋은 것일까?테스트
#include <stdio.h>
int main()
{
printf("Hello, World!\n");
return 0;
}
기타
이글을 보면 알겠지만, 여기서는 re-collapse 기능을 사용하고 있다.이것은 필자가 소스를 고쳐서 추가한 기능이다.
자세히 알아보려면 다음 글을 읽어보면 된다.
2011/04/12 - [web] - Syntax Highlighter : re-collapse 기능 추가하기
