티스토리 블로그 소스 하이라이터 적용(Syntax Highlighter)
티스토리 블로그 소스 하이라이터 적용(Syntax Highlighter)
쓸모 없는 코드를 올리는 블로그를 시작. 쓸모 없는 코드를 올리려고 봤더니 코드의 가독성이 너무 좋지 않다. 아무리 쓸모 없는 코드라 할지라도 미려 하지 않다면 누가 볼까. 블로그 등에 적용 할 수 있는 신택스 하이라이터를 검색해 보았다.
몇 가지가 나왔으나 Syntax Highlighter, Highlight.js 등이 후보 군에 올랐다.
1. Syntax Highlighter
http://alexgorbatchev.com/SyntaxHighlighter/
2. highlight.js
두 가지 후보 모두 적용해 보았으나 비슷한 기능을 제공해 준다.
highlight.js 를 먼저 적용해 보았으나 마음에 드는 테마가 없어(사실 좀더 하이라이팅이 잘 되었으면 좋겠는데 너무 ide에서와 같은 하이라이팅을 기대했나보다...) SyntaxHighlighter 로 변경하여 적용하였다.
테마의 경우 highlight.js 가 더 종류가 많은 편이였고 SyntaxHighlighter 의 경우 기본으로 줄 번호를 표시 해 주는 점 등이 장점으로 꼽을 수 있다.
사용 면에서는 highlight.js 가 훨신 적용하기 쉬운 편이고(코드가 몇줄 안됨) SyntaxHighlighter 의 경우 생각보다 많은 코드를 넣어 주게 된다.
두 하이라이터 모두 hosted version을 제공 해 주고 있다.
SyntaxHighlighter를 사용하기로 했으니 설정 방법은 SyntaxHighlighter에 관하여 기술하도록 하겠다.
Hosted version을 사용하려다 무료로 쓰는데 대역폭을 낭비하기도 미안하고(페이지 뷰가 얼마 되지도 않겠지만....) 조금 로드 되는데 딜레이가 되다 보니 티스토리에 직접 업로드를 해두고 사용 하는 방법을 택했다(hosted version을 사용할 경우 항상 최신 버젼이 적용 된다는 큰 메리트가 존재한다.)
먼저 SyntaxHighlighter를 최신 버젼을 사용하여 다운로드 한다.
http://alexgorbatchev.com/SyntaxHighlighter/download/
위 경로에서 압축 파일을 다운받을 수 있고 압축을 풀면 아래와 같은 형태를 지닌다.
여기서 중요한 폴더는 scripts 폴더와 styles 폴더로 scripts 폴더는 Brush와 Core js 파일들, styles 에는 theme 등의 css 파일이 존재 한다.
이를 티스토리에 업로드 해야 하므로 티스토리 블로그 관리 페이지 중 HTML/CSS 편집 메뉴의 파일 업로드를 이용한다.
파일 업로드를 이용할 경우 경로는 모두 ./images/ 아래에 위치하게 되고 ./images/를 사용하여 접근 할 수 있다.
scripts 내 모든 파일과 styles 내의 모든 파일을 업로드 해 준다(사용 할 파일만 업로드해도 되지만 편의상 전부 하겠다)
꿀 팁을 주자면 전체를 선택했을 때 파일 이름에 나오는 부분(위 이미지 중 "shAutoLoader.js" "shBrushAppleScript.js" "shBrushAS3.js" 등의 부분)을 복사하여 notpad++ 과 같은 editor를 사용하여 추후에 사용할 script 를 작성하면 매우 편리하게 할 수 있다(찾기 바꾸기를 잘 쓴다면)
위와 같이 업로드가 모두 되었다면 이제 적용을 해 줄 차례 이다. HTML/CSS 메뉴에서 <head> </head> 태그 사이에 아래 내용을 삽입해 준다.
<!-- source highlighter start -->
<script src="./images/shCore.js" type="text/javascript"></script>
<script src="./images/shAutoloader.js" type="text/javascript"></script>
<script src="./images/shBrushAppleScript.js" type="text/javascript"></script>
<script src="./images/shBrushAS3.js" type="text/javascript"></script>
<script src="./images/shBrushBash.js" type="text/javascript"></script>
<script src="./images/shBrushColdFusion.js" type="text/javascript"></script>
<script src="./images/shBrushCpp.js" type="text/javascript"></script>
<script src="./images/shBrushCSharp.js" type="text/javascript"></script>
<script src="./images/shBrushCss.js" type="text/javascript"></script>
<script src="./images/shBrushDelphi.js" type="text/javascript"></script>
<script src="./images/shBrushDiff.js" type="text/javascript"></script>
<script src="./images/shBrushErlang.js" type="text/javascript"></script>
<script src="./images/shBrushGroovy.js" type="text/javascript"></script>
<script src="./images/shBrushJava.js" type="text/javascript"></script>
<script src="./images/shBrushJavaFX.js" type="text/javascript"></script>
<script src="./images/shBrushJScript.js" type="text/javascript"></script>
<script src="./images/shBrushPerl.js" type="text/javascript"></script>
<script src="./images/shBrushPhp.js" type="text/javascript"></script>
<script src="./images/shBrushPlain.js" type="text/javascript"></script>
<script src="./images/shBrushPowerShell.js" type="text/javascript"></script>
<script src="./images/shBrushPython.js" type="text/javascript"></script>
<script src="./images/shBrushRuby.js" type="text/javascript"></script>
<script src="./images/shBrushSass.js" type="text/javascript"></script>
<script src="./images/shBrushScala.js" type="text/javascript"></script>
<script src="./images/shBrushSql.js" type="text/javascript"></script>
<script src="./images/shBrushVb.js" type="text/javascript"></script>
<script src="./images/shBrushXml.js" type="text/javascript"></script>
<script src="./images/shLegacy.js" type="text/javascript"></script>
<link href="./images/shCore.css" rel="stylesheet" type="text/css" />
<link href="./images/shThemeMidnight.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all()
</script>
<!-- source highlighter end -->위 코드는 이전의 scripts 폴더와 styles 폴더에서 추가해준 파일들이다. scripts 폴더 내 파일들은 모두 script 태그를 사용하여 모두 추가 되어야 한다(사용할 brush만 해도 되지만 그냥 다 한다)
brush에 대하여 간략히 설명하자면 특정언어에 따라 하이라이팅 하는 방법이 다르므로 해당 언어에 대한 js 파일로 보면 된다.
사용가능한 brush 정보는 아래 링크를 참조하면 된다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
하이라이트의 적용은 pre 태그를 사용하며 아래와 같이 사용 할 수 있다.
<pre class="brush: js">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>
위 코드를 html 에디터에 삽입하는 경우 위와 같이 코드 하이라이팅이 적용되어 미려하게 출력된다.
사용법은 간단하며 기본적인 사용법은 pre 태그 안에 class attribute를 사용하며 되며 brush 종류만 설정해 주면 된다.
brush 종류는 언어에 따라 다르며 js, cpp, css, java, diff, php, py 등을 적용하면 된다.
자세한 brush 값은 아래 링크를 참조하면 된다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/마지막으로 Syntax Highlighter는 테마를 적용 할 수 있는데 HTML/CSS 메뉴에서 추가해 준 스크립트 중 아래와 같이 두번째 link 태그가 테마를 지정하는 스크립트다.
<link href="./images/shThemeMidnight.css" rel="stylesheet" type="text/css" />
필자는 Midnight 테마를 사용하고 있으며(테마들 중 c++가 가장 이쁘게 보였다.) 나머지 가능한 테마들은 아래 링크에서 확인 할 수 있다.
해당 페이지에서는 테마 적용 예시도 볼 수 있으니 보고 가장 마음에 드는(남들이 보기 편한) 테마로 선택하기 바란다.
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/
