티스토리에 Google Syntaxhighlighter 적용하기

2008. 1. 5. 11:00

블로그를 개발과 관련한 글이 주로 올리려 하기 때문에 아무래도 소스코드를 올리는 일이 많겠고 보다 이쁘고 보기 좋게 하려면 소스코드에 색상을 입힌 syntax highlighter 가 적용이 되면 보다 더 보기 좋겠다는 생각에 티스토리에 적용을 해보기로 했다.

Syntaxhighlighter 는 구글코드에 있는게 그래도 보기 좋고 기능도 좋아 우선 적용하기로 하고 나와 같은 생각을 하는 사람이 분명 있을거란 생각에 먼저 적용을 시도한 정보를 찾아 보았다.

다행이도 먼저 시도한 분이 있어서 적용하는데 크게 힘들지 않았다.

Google Code Syntaxhighlighter

적용하는 방법 자세히 보기

나중에 스킨이 바뀌거나 링크가 사라질 경우를 대비하여 본 포스팅에도 간단하게 정리를 해 보았다.

우선 스킨 편집에 필요한 파일(Syntaxhighlighter 의 script 와 css 디렉토리의 모든 파일)을 업로드한다.

스킨 소스에 다음 코드를 입력한다.

css 링크는 소스 상단의 다른 링크들이 있은 Head 부분에 삽입한다.

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="alternate" type="application/rss+xml" title="Being a Developer" href="https://neodreamer-dev.tistory.com/rss" /> <link rel="stylesheet" media="screen" type="text/css" href="./style.css" /> <link rel="shortcut icon" href="https://neodreamer-dev.tistory.com/favicon.ico" /> <link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link> <title>Being a Developer :: 티스토리에 Google Syntaxhighlighter 적용하기</title> </head>

07 줄이 삽입된 코드이다.

마지막 스크립트 링크 및 필요 함수 호출은 소스 마지막 부분의 body 태그 전에 삽입한다.

<script class="javascript" src="./images/shCore.js"></script> <script class="javascript" src="./images/shBrushCSharp.js"></script> <script class="javascript" src="./images/shBrushCpp.js"></script> <script class="javascript" src="./images/shBrushCss.js"></script> <script class="javascript" src="./images/shBrushDelphi.js"></script> <script class="javascript" src="./images/shBrushJScript.js"></script> <script class="javascript" src="./images/shBrushJava.js"></script> <script class="javascript" src="./images/shBrushPhp.js"></script> <script class="javascript" src="./images/shBrushPython.js"></script> <script class="javascript" src="./images/shBrushRuby.js"></script> <script class="javascript" src="./images/shBrushSql.js"></script> <script class="javascript" src="./images/shBrushVb.js"></script> <script class="javascript" src="./images/shBrushXml.js"></script> <script class="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script> </body> </html>

마지막으로 실제 포스팅에 적용하기...

< textarea name="code" class="cpp" cols="60" rows="10">  
#include 
#include 
#pragma hdrstop

#pragma argsused
int main(int argc, char* argv[])
{
    cout << "Hello World";

    return 0;
}
< /textarea>

'Dev Story' 카테고리의 다른 글

DelphiSpeedUp 2.72 released - Critical Bugfix (0)	2008.01.07
DelphiSpeedUp 2.71 released (0)	2008.01.06
무료 C++ IDE (0)	2008.01.06
Bcc32Pch for C++ Builder 2007 (0)	2008.01.06
음력은 계산해 보자!! 진짜만세력! (1)	2008.01.05