Syntax Highlighter (소스, 예제 코드 색상으로 강조 하기)

// Syntax Highlighter 

(신택스 하이라이터)

: http://alexgorbatchev.com/SyntaxHighlighter/download/

간혹 프로그래밍에 대해 검색하다 보면, 

프로그래밍 코드에 맞게 깔끔하게 색깔이 칠해져서 눈에 보기 쉽게 되어 있는 예제 들을 볼 수 있다.

일일이 꾸민 것이 아닌 대게 보통 Syntax Highlighter라는 Java Script(JS, 자바스크립트) 라이브러리를 사용한 것이다.

처음에 이걸 찾으려고 다음과 같은 그럴 싸한 키워드들을 조합하여 찾으려고 했었다.

문법, 구조, 색, 컬러, color, code, 스트럭쳐, structure, 코드, 코딩, 예제, 색칠하기, 눈에 띄게 하기 등... 

바로 "Syntax Highlighter" 였던 것이다.

// 사용법 

정말 간단하고 유용한 라이브러리이지 않을 수 없다 !!! (각 종 언어에 맞게 제공된다.)

- 요약 -

1. 다운로드 후 

2. <script>와 <link> 태그로 로드하고 적용하면

3. <pre> 태그로 감싼 내용(코드)들이 보기 좋게 색칠 된다.

- 자세히 -

1. 다운로드 받는다.

http://alexgorbatchev.com/SyntaxHighlighter/download/

2. 다운 받은 scripts폴더의 js파일들과 styles폴더의 css파일들을 불러온다.

(원하는 언어에 맞게 불러와도 된다. !!! 경로 설정에 주의 !!!)

3. 원하는 코드를 class속성(brush:원하는 언어)을 적용한 <pre> 태그로 감싼다.

<pre class="brush:html">

<p style="backgorund:white">

안녕하세요

</p>

</pre>

4. 결과

     안녕하세요

※ 지원하는 언어 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

※ Class 속성에 brush: 다음에 들어갈 수 있는 알리아스들

as3, actionscript3, bash, shell, cf, coldfusion, c-sharp, csharp, cpp, c, css, delphi, pas, pascal, diff, patch, erl, erlang, groovy, js, jscript, javascript, java, jfx, javafx, perl, pl, php, plain, text, ps, powershell, py, python, rails, ror, ruby, scala, sql, vb, vbnet, xml, xhtml, xslt, html, xhtml

※ 참고

TISTROY(티스토리)에서 신택스 하이라이터 사용하는 법 : http://moaimoai.tistory.com/144