블로그에 소스 코드를 보기 좋게 넣기 - SyntaxHighlighter 3.0.83
블로그에 소스 코드를 보기 좋게 넣기 - SyntaxHighlighter 3.0.83
이전 글(소스 코드 구문 강조 SyntaxHighlighter 3.0 업그레이드)에서 블로그나 웹페이지에서 소스 코드를 구문 강조해주는 Syntaxhighlighter가 3.0으로 업데이트 된 걸 말씀드렸죠.
이 SyntaxHighlighter 3.0 버전의 설치법을 알려 드리겠습니다.
이번 3.0 버전은 다른 블로그에서 소개되었던 1.5나 2.1 버전과 설치법이 약간 다릅니다.
업그레이드 된 내용 중에 shAutoloader.js 파일을 이용해서 필요할 때만 브러쉬 파일을 불러오는 기능이 있는데 이 파일 때문에 차이가 생기는 겁니다. 물론 이 파일을 이용하지 않는다면 이전 버전과 같은 방법으로 설치할 수 있습니다.
이전까지는 페이지가 시작할 때 설치된 모든 브러쉬 파일을 불러들였는데, 이 shAutoloader.js 파일은 페이지에서 사용하는 브러쉬만 불러들입니다. 따라서 사용하지 않는 브러쉬는 로드하지 않습니다.
이렇게 하면 페이지 로딩 속도가 빨라질 수도 있을 것 같은데 확실한 건 모르겠네요.
SyntaxHighlighter 3.0.83 설치
먼저 SyntaxHighlighter 내려받기 페이지에서 파일을 내려받습니다.
압축을 풀고, scripts 폴더에 있는 js 파일을 블로그 관리 - 스킨 - 파일 업로드에 올립니다.
styles 폴더에 있는 css 파일 중 원하는 테마의 파일을 같은 방법으로 블로그에 올립니다. 이 때 shCoreXXX.css 파일만 올리면 됩니다. shCore.css와 shThemeXXX.css 파일을 합한 것이거든요. 저는 shCoreDefault.css 파일을 이용하였습니다.
각 테마는 SyntaxHighlighter - Theme 페이지에서 확인하세요.
이제는 skin.html 파일을 편집할 차례입니다.
스타일 파일인 css 설정은 <head>와 </head> 사이에 넣어주고, js 파일과 관련된 설정은 </body> 바로 위에 넣어줍니다. 참고로, 티스토리에서는 </body>가 아니라 </body> 바로 위에 있는 </s_t3> 위에 넣으셔야 합니다.
아래를 보시고 넣는 위치를 확인하세요. 6번 줄과 12~49번 줄을 복사해서 skin.html 파일에 넣습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<title></title>
</head>
<body>
<!-- SyntaxHighlighter 시작 -->
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript">
//<![CDATA[
SyntaxHighlighter.autoloader(
'applescript ./images/shBrushAppleScript.js',
'actionscript3 as3 ./images/shBrushAS3.js',
'bash shell ./images/shBrushBash.js',
'coldfusion cf ./images/shBrushColdFusion.js',
'cpp c ./images/shBrushCpp.js',
'c# c-sharp csharp ./images/shBrushCSharp.js',
'css ./images/shBrushCss.js',
'delphi pascal ./images/shBrushDelphi.js',
'diff patch pas ./images/shBrushDiff.js',
'erl erlang ./images/shBrushErlang.js',
'groovy ./images/shBrushGroovy.js',
'java ./images/shBrushJava.js',
'jfx javafx ./images/shBrushJavaFX.js',
'js jscript javascript ./images/shBrushJScript.js',
'perl pl ./images/shBrushPerl.js',
'php ./images/shBrushPhp.js',
'text plain ./images/shBrushPlain.js',
'py python ./images/shBrushPython.js',
'ruby rails ror rb ./images/shBrushRuby.js',
'sass scss ./images/shBrushSass.js',
'scala ./images/shBrushScala.js',
'sql ./images/shBrushSql.js',
'vb vbnet ./images/shBrushVb.js',
'xml xhtml xslt html ./images/shBrushXml.js'
);
// SyntaxHighlighter.config.bloggerMode = true;
// SyntaxHighlighter.config.stripBrs = true;
// SyntaxHighlighter.defaults['html-script'] = True;
SyntaxHighlighter.all();
//]]>
</script>
<!-- SyntaxHighlighter 끝 -->
</s_t3>
</body>
</html>
SyntaxHighlighter 사용법
블로그에 소스 코드를 올릴 때는 <pre> 태그와 class를 이용합니다.
<script>를 이용해도 되는데 RSS Reader에서 제대로 읽지 못하기 때문에 블로그에서는 <pre> 태그를 사용할 것을 제작자도 권하고 있습니다.
<pre class="brush:html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<title></title>
</head>
</pre>
SyntaxHighlighter - Dynamic Brush Loading
소스 코드 구문 강조 SyntaxHighlighter 3.0 업그레이드
Autoit syntax script for Google Code Syntax Highlighter
Google SyntaxHighlighter용 AutoIt 구문강조 파일 두번째
Google Code Syntax Highlighter 도우미(Helper)
Syntax Highlighter 2.0 도우미
'Tip & Tech > 블로그' 카테고리의 다른 글
| 너무나 아쉬운 올포스트(OLPOST) 베스트 글 선정 (14) | 2010.09.01 |
|---|---|
| 광복절! 블로그에 태극기 달아요 (8) | 2010.08.15 |
| 여러분은 어떤 블로그에 댓글을 남기시나요?[투표중] (23) | 2010.07.27 |
| 올포스트(Olpost)에서 블로그 원문 보기 (2) | 2010.07.23 |
| 다음뷰 베스트 됐어요. 수익은 영... (6) | 2010.07.21 |
| give start - 굿네이버스 - 사랑의 열매 - 아름다운재단 - 어린이재단 - 유니세프 | ||
|---|---|---|
 |
||
 | ||
 |
 |
 |
