[블로그 꾸미기] 12. 코드 이쁘게 적용(Syntax Highlighter 적용)하기

[블로그 꾸미기] 12. 코드 이쁘게 적용(Syntax Highlighter 적용)하기

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ SyntaxHighlighter 적용 ] 에 대해 전반적으로 정리 해보려 합니다. : ) 

많은 블로그 써칭을 하다보면 코드를 보기좋게, 이쁘게 표현해 놓은 블로그 들을 보았을 것이다.

매우 간단히 적용할 수 있다. SyntaxHighlighter 라는 라이브러리를 추가해 주면 된다.

▶ 1. 라이브러리 다운로드

 - http://alexgorbatchev.com/SyntaxHighlighter/ 접속하여(아니면 아래에서) 최신 버전을 다운로드 한다.

   (나와 같은 경우 현재 3.0.83이 최신 버전이다.)

 - 다운로드 

syntaxhighlighter_3.0.83.zip

▶ 2. 압축 해제

 - 압축을 풀고, scripts, styles폴더의 파일들을 티스토리 스킨 편집기를 통해 업로드 한다.

▶ 3. HTML 편집하기

 - HTML 탭 클릭

- </head>위에 다음의 코드를 삽입한다.

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

<script type="text/javascript" src="./images/shAutoloader.js"></script>

<script type="text/javascript" src="./images/shBrushAppleScript.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/shBrushColdFusion.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/shBrushErlang.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/shBrushJavaFX.js"></script>

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

<script type="text/javascript" src="./images/shBrushPerl.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/shBrushPowerShell.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/shBrushSass.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>

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

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

<script type="text/javascript"> SyntaxHighlighter.all(); </script>

 - shCoreDefault.css 부분을 다른 파일명으로 바꿀 경우, 테마를 변경할 수 있다.

ex) shCoreEclipse.css, shCoreRDark.css 등등, 나와같은 경우는 shCoreEmacs.css 적용

▶ 4. 적용 방법

 - <pre class="brush : 코드언어"></pre> 태그로 감싸주면 된다. 다음과 같이 자동 변경.

 - 코드언어 참조 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

 - 테마 참조 : http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

 - 사용 예시)

<pre class="brush:html">  <!-- HTML 소스표시 -->

<pre class="brush:css">   <!-- CSS 소스표시 -->

<pre class="brush:js">    <!-- JavaScript 소스표시 -->

<pre class="brush:sql">    <!-- SQL 소스표시

<pre class="brush:js html-script:true">   <!-- 다른 언어와 HTML 사용 -->

<pre class="brush: plain; gutter: false"     <!-- SyntaxHighlighter 라인제거 -->

<pre class="brush: plain; collapse: true"    <!-- 소스접기 -->

<pre class="brush: plain; first-line: 10"    <!-- 시작행 번호 지정 -->

<pre class="brush: plain; highlight: 2"      <!-- 단일행 (2번째행) 강조 -->

<pre class="brush: plain; highlight: [1, 3]" <!-- 다중 (1, 3번째행)강조 -->

<pre class="brush:html highlight:[2,4]">  <!-- 특정 행 강조 -->

<pre class="brush:html first-line:25">    <!-- 시작 행 번호 변경 -->

<pre class="brush:html toolbar:false">    <!-- 도구모음 숨기기 -->

<pre class="brush:html auto-links:false"> <!-- 오토 링크 해제 -->

<pre class="brush:html" title="Blomari Note">  <!-- 제목 표시 -->

▶ 5. 세로 스크롤바를 삭제 방법

HTML 탭에서 </html> 바로 윗줄에 다음 코드를 삽입.

<style>

.SyntaxHighlighter { overflow-y:hidden !important; }

</style>