Others

Systax Highlighter 사용하기

thankee 2009. 10. 11. 01:22

여기에서는 Tistory를 기준으로 SyntaxHighlighter를 설치하는 방법을 설명하고, WindowLive Lighter에서 SyntaxHighlighter Plugin을 설치하여 사용하는 방법에 대해서 설명합니다.

Tistory에 SyntaxHighlighter를 설치하기

  1. http://alexgorbatchev.com/wiki/SyntaxHighlighter에 방문하여 SystanHighlighter를 다운로드 합니다. (현재 2.0.320 버전)
     
  2. 압축을 풀면 다음과 같은 파일이 나타납니다.
  3. test.html을 열고 다음에 나오는 ‘수정 전’에 해당하는 코드를 찾아, ‘scripts/’나 ‘styles/’를 ‘./images/’로 모두 수정합니다.
    수정 전 
    <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>
<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>
    수정 후 
    <script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCss.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.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/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.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>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeDefault.css"/>
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
</script>
  4. 이제 Tistory에 관리자로 접속하여 ‘HTML/CSS 편집’화면에서 위의 ‘수정 후’코드를 Title Tag 아래에 붙여 넣기 합니다.
  5. 마지막으로 파일업로드를 통해서, SyntaxHighlighter파일을 모두 업로드해줍니다.

이제 설치가 모두 종료되었습니다. 사용하시기 위해서는 글을 작성할 때 다음과 같은 코드를 넣어 주시면 됩니다.

<pre class="brush: c">
... some code here ....
</pre>

위의 코드에서 ‘brush:’다음에 나타나는 코드를 다음 표를 참조하여 원하는 코드로 대체하시면 됩니다. 이 전버전에서는 TextArea를 지원했지만, 이제는 Pre태그만 지원하므로 참고하시길 바랍니다.

Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.js
C# c-sharp, csharp shBrushCSharp.js
C++ cpp, c shBrushCpp.js
CSS css shBrushCss.js
Delphi delphi, pas, pascal shBrushDelphi.js
Diff diff, patch shBrushDiff.js
Groovy groovy shBrushGroovy.js
JavaScript js, jscript, javascript shBrushJScript.js
Java java shBrushJava.js
JavaFX jfx, javafx shBrushJavaFX.js
Perl perl, pl shBrushPerl.js
PHP php shBrushPhp.js
Plain Text plain, text shBrushPlain.js
PowerShell ps, powershell shBrushPowerShell.js
Python py, python shBrushPython.js
Ruby rails, ror, ruby shBrushRuby.js
Scala scala shBrushScala.js
SQL sql shBrushSql.js
Visual Basic vb, vbnet shBrushVb.js
XML xml, xhtml, xslt, html, xhtml shBrushXml.js

 

Windows Live Writer에서 ‘SystaxHighlighter 플러그인’사용하기

Windows Live Writer를 사용하신다면 SyntaxHighligter를 지원하는 플러그인을 통해 블로그 포스트내에 보다 쉽게 코드를 삽입하실 수 있습니다.

  1. http://precode.codeplex.com/에서 Precode를 다운로드 합니다.
  2. 프로그램을 설치합니다.(Windows Live Writer가 미리 설치되어 있어야 합니다.)
  3. Windows Live Writer를 실행하면 다음과 같이 ‘PreCode Snippet…’라는 플러그인을 확인하실 수 있습니다.
  4. 클릭하면 다음과 같은 화면이 나타나고 코드를 입력하시면 됩니다.
     
  5. 결과 화면..

Author - Thankee