syntaxHighlighter / 블로그에 자바스크립트 html/css php,c,c++,c# 소스 포스팅을 보기 좋게~ 코드하이라이터

날짜:

블로그를 작성하다보면 소스를 올려야 할 때가 있다. 

"여기서 여기까지가 소스이고 몇번째 줄이 중요하다" 이런 내용을 작성하고 싶어도. 그냥 블로그에 올라가버린 소스로는 도저히 그런 표현을 쓰기가 참 애매하다. 

그럴때 필요한 도구가 코드 하이라이터라고 불리는 애들이다. 그 중 가장 유명해서 많이 보았을 것이 바로 SyntaxHighlighter . 

설치 방법 및 사용법은 간단하다. 



 syntHL.zip

원소스 : http://alexgorbatchev.com/SyntaxHighlighter/

첨부된 압축 파일을 다운받아서 티스토리의 HTML/CSS 수정의 업로드로 올린다.  

압축파일에는 위와 같은 파일들이 들어 있다. 모두 다 올려도 되고, 본인에게 필요한 것만 올려도 된다. 귀찮으니까 다 올리자. 그래봐야 전부 다 합쳐도 196KB밖에 안된다. 

위와 같이 싸그리 한번에 올릴 수 있다. 

다음의 코드를 HTML/CSS에서 skin.html 의 <head></head>사이에 삽입한다. 

 head.txt

---------------------------------------------------------------------------------------------------- 

<LINK rel=stylesheet type=text/css href="./images/shCoreDefault.css"> 

<LINK rel=stylesheet type=text/css href="./images/shCore.css"> 

<!-- 코드 하이라이트 스크립트 --> 

<SCRIPT type=text/javascript src="./images/shCore.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shLegacy.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushAS3.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushBash.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushCSharp.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushCpp.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushCss.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushJava.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushJavaFx.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushJScript.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushPhp.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushSql.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushVb.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/shBrushXml.js"></SCRIPT> 

<SCRIPT type=text/javascript src="./images/syntHL.js"></SCRIPT> 

------------------------------------------------------------------------------------------------------

 그리고 설정된 skin.html을 저장하면. 끝. 설치는 끝!! 

 

간단한 사용법은 아래와 같다. 

소스가 들어 있는 포스팅 작성시 html편집에서 다음과 같이 영역을 지정해주면 된다. 

 

<pre class="brush:언어코드"> 

소스 

</pre>    

 

글이 작성되고 나면 다음과 같이 라인번호와 소스에 칼라까지 입혀져서 보기 좋게 보여준다.    

   

만일 소스가 전체 소스가 아니라 전체의 일부일 경우 특정 라인임을 강조해주고 싶을 때는

<pre class="brush:js; first-line:11;">

소스

</pre>

 

각 사용 언어별 brush명과 js파일명은 다음과 같다. 죽어도 안 쓸거 같은 js라면 찾아서 올리지 않아도 되겠지만...그거 찾는 것이 더 귀찮을 듯 하다. 세상 살다 보면 무슨 일이 생길지도 모르는데~ 

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js