코드 하이라이트(Syntax Highlighter)를 티스토리(Tistory)에 적용하기

웨드_ |

 웹 사이트를 돌아다니다보면, 포스트 중에 프로그래밍 코드를 읽기 쉽게 보여주는 뷰어를 제공한다. 바로 Syntax Highlighter를 사용한 것이다. 우리나라에서는 코드 하이라이트라고 더 많이 알려져있다. 코드 하이라이트는 오픈소스 라이센스(L-GPL)를 따르기 때문에 누구나 사용할 수 있다.






1. 코드 하이라이트(Syntax Highlighter) 다운로드

  • 다운로드 : 




2. 코드 하이라이트(Syntax Highlighter) 업로드
  • 다운로드 받은 파일의 압축을 풀면 나오는 폴더 중 다른 것들은 무시하고 scripts 폴더와 styles 폴더의 파일만 업로드하면 된다. 티스토리의 경우 자동으로 images/ 폴더에 업로드 될것이다.

  • 코어 필수 파일 : scripts/shCore.js
  • 언어 선택 파일 : scripts/shBrush*.js
    • 사용할 언어를 복수개 선택해야한다. 업로드는 다 해두고, 사용할 언어만 선택하면 된다.
  • 스타일 선택 파일 : styles/shCore*.css
    • 스타일을 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.
  • 테마 선택 파일 : styles/shTheme*.css
    • 테마를 하나 선택해야한다. 업로드는 다 해두고, 스크립트에서 하나를 선택하면 된다.





3. 코드 하이라이트(Syntax Highlighter) 설정

  • head 태그 사이 title 위에 아래 태그를 넣는다.
  • 필자는 언어 JS파일을 다섯개 설정하였다. 모든 언어를 설정해둘 수도 있지만, 웹페이지 용량만 커지기 때문에 사용할 언어만 설정하는 것이 좋다.
  • 스타일과 테마는 Default로 설정하였다. 각자 스타일과 테마를 테스트해보며, 원하는 스타일을 찾으면 되겠다.


 
 

















  • 크롬 브라우저를 위해 css 파일에 다음 구문을 추가한다. 필자는 글씨 크기를 조금 줄였다.
div .syntaxhighlighter { 
    overflow-y: hidden!important; overflow-x: auto!important;
    font-size:0.9em !important;
}




4. 코드 하이라이트(Syntax Highlighter) 사용하기

  • 코드 하이라이트를 사용하기 위해서는 편집 화면 오른쪽위에 HTML 편집으로 전환해야 한다. 그리고 pre 태그의 class 속성에 "brush:브러쉬명"을 입력하고, pre 태그 안쪽에 코드를 입력하면 된다.
 

   코드 기입~!



  • 언어 JS파일과 브러쉬명은 아래와 같다.
언어[브러쉬명]파일명
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
(출처 : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)