[SyntaxHighlighter] Tistory에 적용하기

[업데이트 2016.12.22 10:00]

 

Tistory에 공부하는 내용들을 정리하면서 소스 코드를 깔금하고 보기 좋게 올리는데 어려움이 있었는데, JavaScript 기반의 SyntaxHighligher라는 오픈소스를 알고 적용해보게 되었습니다.

 

아래의 위치에서 zip파일을 받아 압축을 해제합니다.

 

* 참고: http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

 

압축을 해제하면, scripts, styles 2개의 폴더가 있는데, 해당 폴더에 있는 .js, .css 파일 모두를 Tistory > 관리 > 스킨 꾸미기 > HTML/CSS 편집으로 이동 후, 파일 업로드 매뉴를 통해 모두 업로드합니다.

 

이제 해당 JavaScript 파일을 모두 HTML매뉴에서 추가 합니다.

 <!--<![endif]--> 뒤에 SyntaxHighligher JavaScript 파일을 추가하고, SyntaxHighlighter.all(); 또한 추가합니다.

 

이제 글쓰기를 할 때, HTML 에디터 모드로 변환후, <pre> html tag를 이용하여 아래와 같이 표시할 수 있습니다.

앞으로 글쓰기에 코드를 삽입할 때, SyntaxHighligher를 사용하도록 모두 수정을 해야겠습니다. :)

 

<Node.js 샘플 코드 예제>

var http = require('http');
http.createServer(function (request, response) {  
    response.writeHead(200, {'Content-Type' : 'text/plain'});
    response.write('Hello world');
    response.end();
}).listen(8888);

 

또한 각 언어별로 style을 다르게 지정할 수 있습니다.  <pre class="brush: XXX"> brush 다음에 각 언어에 대한 alias를 주면 됩니다. (ex: Javascript -> js)

 

아래 주소를 참고하시기 바랍니다.

 

* 참고: http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/