웹페이지 돌아다니다 보면, 소스코드 내용 중 문법이 Highlighting 되어서 이쁘게 나오는걸 보곤 한다.
이렇게..
class TestClass extends Object {
public TestClass() {}
public testFunction(String param) {
System.out.println("Syntax Hilighting " + param);
}
}
처음에 참으로 신기하고 이뻐보였다.. 나도 써보고 싶은것은 인지상정..ㅎ
사용법도 상당히 간단하다.
1. 다운받기
우선,
http://alexgorbatchev.com/wiki/SyntaxHighlighter 사이트가 공식 사이트이다. 현재 버전은 2.0.320 이고
공짜로 다운로드 받아서 사용 가능하다.
위의 download 링크 눌러서 다운로드 한다. 그냥 본 블로그에 첨부파일로도 집어넣었다.
압축을 풀면 아래와 같이 세가지 디렉토리가 나온다
*
scripts - 동작시에 필요한 script 들이 있다. 모든 .js 파일들이 페이지에 include 되어야 한다. 스크립트 중 shCore.js 와 shLegacy.js 스크립트는 Optimize 되어있어서 분석 불가다.
*
src - 위 Optimize 된 스크립트의 소스가 있다. 사용할때는 src 디렉토리는 빼고 쓰면 된다.
*
styles - 기본 및 테마 별 CSS 가 들어있는 디렉토리이다. 사용 시 몇가지를 link 해줘야 한다.
위 자료가 준비되었으면, 사용하면 된다.^^;;
2. <Header> 에 추가하기
사용법 또한 참 쉽다. HTML 코드에서 몇가지만 추가 해주면 된다.
우선, <header> 에, 아래 스크립트들을 포함한다.
<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>
다음은 역시 <header> 영역 안에, CSS 를 포함시킨다.
<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>
3. 내용 만들기
이제 본격적으로 SyntaxHighlighter 를 사용해보자. 정말 쉽다..
아래처럼 <pre> 태그를 쓰면 된다.
<pre class="brush: c-sharp;">
function test() : String
{
return 10;
}
</pre>
이게 끝이다. 특이한 것은 <pre> 태그의 class 이다.
위의 예에서는 <pre> </pre> 사이의 내용을 c-sharp 문법으로 인식하라는 얘기다.
이걸 바꿀 수 있는데, 어떤 스타일이 있는지는, 다운받은 압축파일을 푼 디렉토리의
scripts 디렉토리를 보면 알 수 있다.
위와 같이 많은 종류의 js 파일들이 있는데, 대충 파일명을 보면, 어떤 문법인지 알 수 있다.
그리고, js 파일을 열어보면 내용 중에 아래와 같은 부분이 있다.
SyntaxHighlighter.brushes.JScript = function()
{
var keywords = 'break case catch continue ' +
'default delete do else false ' +
'for function if in instanceof ' +
'new null return super switch ' +
'this throw true try typeof var while with'
;
this.regexList = [
{ regex: SyntaxHighlighter.regexLib.singleLineCComments, css: 'comments' }, // one line comments
{ regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments
{ regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings
{ regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings
{ regex: /\s*#.*/gm, css: 'preprocessor' }, // preprocessor tags like #region and #endregion
{ regex: new RegExp(this.getKeywords(keywords), 'gm'), css: 'keyword' } // keywords
];
this.forHtmlScript(SyntaxHighlighter.regexLib.scriptScriptTags);
};
SyntaxHighlighter.brushes.JScript.prototype = new SyntaxHighlighter.Highlighter();
SyntaxHighlighter.brushes.JScript.aliases = ['js', 'jscript', 'javascript'];
위 내용 중에,
SyntaxHighlighter.brushes.JScript.aliases = ['js', 'jscript', 'javascript'];
이 부분을 보면, <pre classes="brush: <aliase이름>"> 중에 <aliase이름> 을 뭘 줘야할 지 알 수 있다.
또, 각 문법의 사용결과 샘플은
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes 에서 확인할 수 있다.
친절하게도 위와 같이, aliase 와 관련 파일명도 목록으로 제공한다.
4. 끝
참 잘만들었다는 생각이 든다. 내가 돈이 없어서 donation 은 못하고 잘 쓰기로 하겠다.
Tistory 블로그에서 사용하는 방법도 나중에 시간되면 올려보도록 하겠다.
그나저나 오픈소스 프레임워크 사용법들도 익혀야 하는데 갑자기 UI 에 필이 꽃혀서 이런..
syntaxhighlighter_2.0.320.zip
