반응형
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 파일을 수정하면 배경색상등을 다양하게 바꿀 수 있습니다.^^
반응형
'→ 일반컴퓨터관련 > 기타지식' 카테고리의 다른 글
| QR 코드를 만들어보아요 +_+ (0) | 2010.06.23 |
|---|---|
| [배포프로그램] Windows Installer 사용방법 (0) | 2010.06.11 |
| 두일아저씨의 고해상도 아이콘 블로그 (0) | 2010.06.08 |
| 내 블로그에도 광고 배너를 달아보자!(allblet,올블릿) (0) | 2010.06.07 |
| 무선네트워크 연결을 구성할 수 없습니다.(Wireless Zero Configuration) (7) | 2010.05.25 |
