티스토리에 Syntax Highlighter 3.0 넣기 (2) - 여러가지 기능 이용하기

Syntax Highlighter 3.0에는 편한 기능들이 많습니다.
역시 제일 좋은건 태그로 사용한다는 점인듯 합니다 ㅎㅎㅎ
이제부터 Syntax Highlighter 3.0의 사용하는 방법과 기능들을 이용해 보겠습니다.

1. 사용하기

<PRE class="brush: js">

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 
</PRE>

결과

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 

2. 제목 넣기

<PRE class="brush: js" tilte="샘플" >

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 
</PRE>

결과

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
}  

3. 코드 접기
공식 샘플

<PRE class="brush: js; collapse: true;">

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 
</PRE>

결과

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 

4. 줄 시작 번호 설정 
공식 샘플

<PRE class="brush: js; first-line: 10;">

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 
</PRE>

결과

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 

5. 줄번호 끄고 켜기
공식 샘플

<PRE class="brush: js; gutter: false;">

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 
</PRE>

결과

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 

6.줄강조

<PRE class="brush: js; highlight: [2,5];">

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 
</PRE>

결과

var i; 
for (i = 0; i < strTemp2.length; i++) 
{
	document.write( '출력 : ' + i ); 
} 

7. html스크립트 이용하기
공식 샘플


8.스마트 탭 사용하기
공식 샘플


9. 탭 사이즈
공식 샘플

<PRE class="brush: js;tab-size: 4;">
a	b	c
</PRE>
<PRE class="brush: js;tab-size: 8;">
a	b	c
</PRE>

결과

a	b	c

a	b	c

8. 툴바
공식 샘플
툴바는.....별의미는 없습니다-_-;;
예전버전에서는 툴바가 이것저것 해주었다는데요....3.0에서는 Syntax Highlighter의 정보만 출력하기때문에 별로 거슬리지도 않고 ㅡ.-;;

<PRE class="brush: js;">
a	b	c
</PRE>
<PRE class="brush: js;toolbar: false;">
a	b	c
</PRE>

결과

a	b	c

a	b	c