Web Programing2009/05/27 20:40

소스 코드 구문강조. SyntaxHighlighter 2.0.320 - 티스토리 적용기

1. 스킨 > HTML/CSS 편집 > skin.html 에 아래 코드를 적용 
<head>
...

<!-- SyntaxHighlighter 2.0.320 -->
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"></script>
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" 
	href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" 
	href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css"/>
<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf 
		= 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
	SyntaxHighlighter.defaults['auto-links'] = false; 
	SyntaxHighlighter.all();
</script>

...
</head>
hosted version 을 사용하여 스킨 변경시의 불필요함을 최소화 한다.
사용하지 않는 언어는 제외.
기본 설정에서 auto-links 값 변경.


1-1. 기존에 SyntaxHighlighter 1.5 버전을 사용하여 글을 올렸다면, 아래 코드가 추가로 필요하다. 
<head>
...

<!-- 기존 SyntaxHighlighter 1.5 사용시 추가  -->
<script type="text/javascript" 
	src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shLegacy.js"></script>
...
</head>
<body onLoad="dp.SyntaxHighlighter.HighlightAll('code');">

2. 글쓰기 
<!-- 적용 예 -->
<pre class="brush: xml; highlight: [1];">
&lt;!-- Daum WebInside --&gt;
&lt;script type="text/javascript"  charset="euc-kr" 
	src="http://log.inside.daum.net/dwi_log/js/dwi.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" &gt;
	_dwiPID="d-A63-***";
	if(typeof(_dwiCatch) == "function") { _dwiCatch();}
&lt;/script&gt;
</pre>

xml 형태의 코드를 올릴땐 &lt;(<),&gt;(>) 를 사용해서
티스토리에서 태그로 인식하지 않게 해야 대문자로의 변경을 피할 수 있다.

아래 링크에서 기본으로 제공되는 언어(brush값) 확인 가능.

Brush Alias 보기


http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
Posted by 승댕
TAG , , , ,
Trackback 2 Comment 0