티스토리에 Syntax Highlighter 적용하기
오늘은 이상하게 계속 피곤해서 잘려고 일찍 누웠는데, 낮에 연거푸 들이마신 커피 때문인지 피곤하긴 해도 잠이 오지 않는 아주 썅썅바스러운 상태에 돌입. 결국 남이 하니 좋아보였던 Syntax Highlighter를 블로그에 적용해봤다. 그게 무엇인고 하니, 이런거다.
#include<stdio.h>
int main(void)
{
puts("Hello World!");
return 0;
}
짱 좋아보이지 않나? 예전엔 이런거 몰라서 막 하이라이팅을 수동으로 집어 넣는 뻘짓도 하곤 했었는데 이걸 알고 집어 넣고 보니 신세경일쎄. 다만 코드 집어 넣을 땐 에디터 모드 HTML 주고 귀찮게 끼워 넣어야 하는게 다소 불편하긴 하지만 그래도 이게 어디여.
일단 티스토리에는 페이지 설정하는데 어느 정도 제약이 있으니까 그거에 맞춰서 Syntax Highlighter를 적용하는 방법을 간단하게 적어보고자 한다.
우선 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 현재 버전을 받아 온다.
다운로드 받은 ZIP 파일의 압축을 풀어보면 여러 폴더가 있겠지만 scripts와 styles 폴더에 있는 js와 css파일을 전부 업로드 해 준다. (사실 전부 업로드 해줄 필요는 없긴 하지만 일일히 그런거 따질 필요 있겠나 요즘같이 대용량 시대에...) 티스토리 스킨 만져 본 분들이야 당연히 아는 내용이겠지만 노파심에서, 관리 화면에서 꾸미기 > HTML/CSS > 파일업로드 탭을 이용해 업로드 할 수 있다.
웃긴게 티스토리는 뭔 파일을 올리건 images 아래에 올려주고, 또한 이를 스킨 HTML 파일에서 끌어다 쓰려면 경로 앞에 반드시 현재 디렉토리를 붙여 줘야 하더라. 뭔 말인고 하니,
<script src="images/blahblah.js">
와 같이 source 경로를 주면 안된다.
<script src="./images/blahblah.js">
와 같은 식으로 표기를 해줘야 이 경로를 알아서 적절한 위치로 치환을 해주는 듯 하다. 뭐 각설하고, 사실 위의 js와 css 파일을 업로드 해줬다면 단순히 아래의 내용을 긁어 붙이기만 해 줘도 크게 무리 없을 것이다.
스킨 편집 화면에서 아래의 내용을 <head> 태그 안에 넣어 준다.
<!-- Include required JS files --> <script src="./images/shCore.js" type="text/javascript"></script> <script src="./images/shBrushJScript.js" type="text/javascript"></script> <script src="./images/shBrushJava.js" type="text/javascript"></script> <script src="./images/shBrushBash.js" type="text/javascript"></script> <script src="./images/shBrushCpp.js" type="text/javascript"></script> <script src="./images/shBrushSql.js" type="text/javascript"></script> <script src="./images/shBrushXml.js" type="text/javascript"></script> <!-- Include *at least* the core style and default theme --> <link href="./images/shCore.css" rel="stylesheet" type="text/css"> <link href="./images/shThemeDefault.css" rel="stylesheet" type="text/css">
그리고 HTML 파일 마지막 </body> 태그 다음에 아래와 같은 라인을 추가하자
<!-- Finally, to actually run the highlighter,
you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all();
</script>
그 후, 블로그 내용에 코드를 집어 넣으려면 에디터를 HTML모드로 변경하고 뭐 이런식으로 써주게 되면 이 글 맨 처음의 C 코드 하이라이팅으로 표시되게 된다.
<pre class="brush: cpp">
#include<stdio.h>
int main(void)
{
puts("Hello World!");
return 0;
}
</pre>
브러시는 일단 내가 쓸만한 걸로만 위에 추가해 놨는데 여러가지 브러시가 같이 딸려져 나온다. 만약 Ruby 같은 걸 넣고 싶으면 해당 brush js 파일을 추가해 주고 브러시 종류를 지정해 주면 된다. 지원하는 브러시 리스트는 http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 에서 볼 수 있다.
'생활의발견' 카테고리의 다른 글
| Lisp용 Syntaxhighlighter brush 적용하기 (0) | 2016.04.18 |
|---|---|
| xinput을 이용한 리눅스에서 터치패드 끄고 켜기 (2) | 2016.03.15 |
| 네이트온에서 피진으로 갈아타자 (0) | 2012.06.05 |
| 리눅스 폰트 설정 : 안티 앨리어싱 추가하기 (0) | 2010.05.18 |
| Ubuntu를 Mac OS X look으로 고쳐보자 (1) (1) | 2010.04.15 |
