본문 바로가기
→ 일반컴퓨터관련/기타지식

SyntaxHighlighter 이용하여 소스코드 티스토리 블로그에 입력하기

by 벅스쭌 2010. 6. 9.
반응형

SyntaxHighlighter를 이용하면 블로그에 다음과 같이 소스코드를 보기 쉽게 입력할 수 있습니다.

function test()
{
return 10;
}


1. SyntaxHighlighter를 이용하려면 우선 syntaxhighlighter_2.1.364.zip  파일을 다운받으셔야 합니다. 현재시점으로 저 파일이 최신 버젼입니다. 차후 업데이트가 있을수도 있으므로 다운로드 사이트도 링크시켜놨습니다.

링크사이트 : http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download


링크를 타고 들어가면 친절하게 한글로도 설명이 되어있습니다. "여기"를 클릭하셔서 최신버젼을 다운받을 수 있습니다.

2. 다운로드한 압축파일을 풀면 다음과 같은 폴더와 파일이 나옵니다.

3-1. 이제 티스토리 블로그에서 설정을 해줘야 합니다. 티스토리 블로그 로그인 후 "admin - 스킨 - HTML / CSS 편집"을 선택합니다. 그리고 "파일 업로드" 탭을 눌러줍니다.

3-2. "파일업로드" 버튼을 클릭하여 압축풀었던 파일중 "scripts"폴더안의 파일과 "styles"폴더안의 파일을 전부 업로드 시킵니다.
위 이미지에 있는 파일들을 전부 업로드 시켜줍니다.

4. 전부 업로드를 시켰으면 "HTML/CSS 편집"탭을 선택하여 HTML코드를 수정을 해 줘야 합니다.

1번 부분에다가 다음과 같은 코드를 입력해 줍니다.

<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shBrushBash.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushCSharp.js"></script>
<script type="text/javascript" src="./images/shBrushDelphi.js"></script>
<script type="text/javascript" src="./images/shBrushDiff.js"></script>
<script type="text/javascript" src="./images/shBrushGroovy.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shBrushPhp.js"></script>
<script type="text/javascript" src="./images/shBrushPlain.js"></script>
<script type="text/javascript" src="./images/shBrushPython.js"></script>
<script type="text/javascript" src="./images/shBrushRuby.js"></script>
<script type="text/javascript" src="./images/shBrushScala.js"></script>
<script type="text/javascript" src="./images/shBrushSql.js"></script>
<script type="text/javascript" src="./images/shBrushVb.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="./images/shCore.css"/>
<link type="text/css" rel="stylesheet" href="./images/shThemeEclipse.css"/>

<script type="text/javascript" src="./images/shLegacy.js"></script> 
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = './images/clipboard.swf';
    SyntaxHighlighter.all();
</script>


2번 부분에다가 다음과 같은 코드를 입력해 줍니다.

<body onload="dp.SyntaxHighlighter.HighlightAll('code');">

그리고 "저장" 버튼을 누릅니다.

요로코롬 그부분에 고대로 집어넣어주시면 됩니다.

이제 사용할 수 있습니다.

사용하는 방법을 설명해 드리겠습니다.

1. 블로그 글쓰기모드로 들어갑니다.
2. HTML 작성모드로 바꿔줍니다.

3. 그리고 다음과 같이 입력해 줍니다.

4. 그리고 미리보기를 눌러보면 다음과 같이 소스가 잘 나오는 것을 볼 수 있습니다.

여기서 중요한 것은 HTML소스를 입력할때
<pre class = "brush: js;">
function test()
{
return 10;
}
</pre>
이 빨강색 부분이 중요합니다. 저안에 소스코드를 입력하면 됩니다.

shThemeEclipse.css 파일을 수정하면 배경색상등을 다양하게 바꿀 수 있습니다.^^

반응형