블로그를 개발과 관련한 글이 주로 올리려 하기 때문에 아무래도 소스코드를 올리는 일이 많겠고 보다 이쁘고 보기 좋게 하려면 소스코드에 색상을 입힌 syntax highlighter 가 적용이 되면 보다 더 보기 좋겠다는 생각에 티스토리에 적용을 해보기로 했다.
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="[##_title_##]" href="[##_rss_url_##]" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
<link type="text/css" rel="stylesheet" href="./images/SyntaxHighlighter.css"></link>
<title>[##_title_##] :: [##_page_title_##]</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>
#include <vcl.h>
#include <iostream.h>
#pragma hdrstop
#pragma argsused
int main(int argc, char* argv[])
{
cout << "Hello World";
return 0;
}
Original Post :
http://neodreamer-dev.tistory.com/3
No comments :
Post a Comment