[TIP] SyntaxHighlighter - 완벽 적용법

사실 이전 포스팅에서 쉽게 적용하고 사용하는 법을 적어놓았지만...

http://keyboardbear.tistory.com/entry/TIP-티스토리-구문강조-초간단-적용법

인용구를 이용하는 방법은 티스토리의 글 작성 환경상 <P>나 다른 태그가 붙거나 글자속성을 변경하면 코드가 꼬여버리는 상황이 발생하는지라... 공식 홈페이지에서 사용하는 방법을 이용해보자.

SyntaxHighlighter 공식 홈페이지
http://alexgorbatchev.com/SyntaxHighlighter/

 

사용법

이 방법은 HTML을 이용해야만 쓸 수 있는 방법이다. 번거로운 만큼 결과는 만족스럽다.

<PRE> 태그를 이용하게 되는데,

<PRE class="brush: 언어;">코드</PRE>

이런 형태를 띄게 된다.

 

언어키워드는 다음과 같다.

 

 

예제

function helloSyntaxHighlighter()
{
	return "hi!";
}

이렇게 코드를 넣어주면

function helloSyntaxHighlighter()
{
	return "hi!";
}

이렇게 찰떡 같이 나온다.

 

태그만 넣어주고 위지윅 모드에서 코드를 입력해도 되지만 html쪽이 붙여넣기가 깔끔하게 되서 더 좋은 것 같다.

 

 

+하이라이팅 하는 방법

<PRE class="brush: 언어; highlight: [1,6,7,];">코드<PRE>

<PRE>태그에 highlight 속성을 추가, 하이라이팅 하고픈 줄을 배열로 넣어주면 된다.