웹 구문강조 어플리케이션 SyntaxHighlighter 사용 설정

SyntaxHighlighter는 웹상에서 프로그래밍 코드를
 이클립스나 EDIT PLUS와 같은 문서 편집기의 구문강조 기능을
 웹에서도 간단하게 표현 할 수 있게 도와주는 자바 스크립트 입니다.

SyntaxHighlighter을 설치하고자 하는 분은 이전 포스팅을 참조해 주세요
http://resup.tistory.com/5




이전 포스팅의 설치 글에서 간략하게 사용법을 설명 했는데요 너무 간략하여 예를 하나 올립니다.
먼저 글작성시 HTML을 체크 해줍니다.

그리고 아래의 코드를 붙여 넣습니다. 1, 7번 줄은 SyntaxHighlighter를 사용하기 위해 설정하는 부분이며 2~6번은 실제 코드가 들어갑니다.

<pre class="brush: java;">
public class test {
	public static void main(String args[]) {
		System.out.print("출력");
	}
}
</pre>

아래는 위의 코드를 실제 돌렸을 때 결과 입니다.

public class test {
	public static void main(String args[]) {
		System.out.print("출력");
	}
}

그리고 주의 사항이 있어서 잠깐 집고 넘어 갑니다.

① 코드 입력시 꺽쇠 "<" 를 사용 할 경우 예상치 못한 에러가 발생 할 수 있습니다.    예를들어 코드에 <script> 가 입력된 경우 다음 줄의 내용부터 자바 스크립트를 실행하려 하기 때문에 에러가 발생 합니다.    때문에 꺽쇠 "<"를 사용 할 경우 &lt; 로 대체하여 사용하여야 합니다.     공식 홈페이지에서 예제가 나와있는 페이지의 소스도 &lt;로 처리하고 있습니다. ② 넘버링과 코드줄이 어긋나는 경우가 있습니다.    해결 방법을 찾아 보았지만 명확한 해결방법은 아직 없는 듯 합니다. (흑시 있다면 제부 부탁합니다.)

SyntaxHighlighter의 기본 설정된 방식으로 사용해도 편리하나
  몇몇 기능들은 알아두면 좀 더 유용하게 코드를 작성할 수 있습니다.
 간단하게나마 설정(Config)과 기본값(Default)에 대해 알아보도록 하겠습니다.


1. SyntaxHighlighter 설정

 이전 포스팅에서 SyntaxHighlighter를 설치시
스킨-HTML/CSS-skin.html 의 </body></s_t3> 위에 다음과 같은 코드를 입력 했었습니다.
     //SyntaxHighlighter.config.bloggerMode = true;
     //SyntaxHighlighter.config.stripBrs = true;
     //SyntaxHighlighter.defaults['html-script'] = true;
    SyntaxHighlighter.all();
 기본적으로 위의 3개 옵션은 주석처리하여 사용하지 않았으며 가장아래
SyntaxHighlighter.all(); 만 사용 하였는데요 이 옵션들의 내용입니다.

이 름	초기값	내  용
bloggerMode	false	블로거 통합. blogger.com에 호스팅하는 경우에 설정해야합니다. (잘 모르겠군요)
strings	Object	기본출력 메세지를 변경하고자 할 때 (에러, 2.x 버전 에서 카피 될 때 메시지 등)  상세 옵션은 여기에서 확인
stripBrs	false	소스코드 끝에 <br /> 태그를 무시 할 수 있습니다. (TISTORY 에서는 자동으로 <br />코드를 삽입하는 것을 방지할 수 있을 듯)
tagName	"pre"	다른 태그를 사용하여 용이하게합니다

2. SyntaxHighlighter 기본값

아래의 옵션들은 유용하게 활용할 만한 것이 많은 것 같습니다.

기본적으로 <pre class="brush: 언어; 옵션이름 : 값;"> 의 형식으로 사용 됩니다.

몇몇 설정들은 브라우저 특성을 가리기도 합니다. (class-name 데모의 경우 IE8에서 표기 안됨)

자세한 사항은 각 데모를 보면 바로 감이 잡힐거라 믿습니다  (이해가 안되시면 댓글로 ^^)

이 름	초기값	내  용
auto-links	true	URL입력시 자동으로 링크시킬지 여부 설정 데모 보기
class-name	''	SyntaxHighlighter에 CSS를 적용시킬 때 데모 보기
collapse	false	내용 숨기기 여부 설정 (클릭시 보여지게 하는 기능). 데모 보기
first-line	1	첫번째 라인 번호를 변경 할 때 데모 보기
gutter	true	왼쪽  넘버링(숫자) 표시 여부 설정 데모 보기
highlight	null	특정 라인의 내용을 강조하고자 할 때 데모 보기
html-script	false	HTML/XML 코드를 강조하여 표시 데모 보기
smart-tabs	true	탭 사용 설성. 데모 보기
tab-size	4	텝 사용시 뛰울 간격 설정 데모 보기
toolbar	true	툴바 표기 설정. 데모 보기

만약 여러가지 옵션을 동시에 지정하고 싶을 경우 세미콜론(;)으로 구분하여 연속으로 지정하면 됩니다.

...

(예)언어명:자바스크립트; 첫째라인 10번 부터; 강조라인 2,4,6 번 라인 (ruler는 무슨 기능인지 모르겠습니다)


그런데 위의 옵션을 항상 변경시킨 값으로 사용하고 싶다면?
매번 값을 입력하는 것도 번거로울 것 입니다.
그럴 경우 SyntaxHighlighter 설정 과 마찬가지로 스킨-HTML/CSS-skin.html 의 </body></s_t3> 위에 다음과 같이 사용하면 됩니다.

SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['smart-tabs'] = false;
...
SyntaxHighlighter.all();

(예)넘버링과 탭 설정을 항상 사용하지 않을 경우




일단 간략하게 설명을 했는데요
유용한 정보가 되었다면 덧글이라도 하나 남겨 주세요 ^^