Highlighter 티스토리에 적용하기

예시 1.

int main (void){
	printf("Hello, world!\n");
	return 0;
}

예시 2.

* Highlighter 설치 방법 (출처: http://takuma99.tistory.com/68)

 - Tistory 관리자 페이지의 HTML/CSS 편집에 가서 skin.html을 편집한다. 

 - skin.html 맨 밑에 </ body> </ html> 위에 다음 입력

<!-- SyntaxHighlighter start -->


























</body>
</html>

 - 저장 누르면 티스토리에 Highlighter 적용 완료.

 - 이 스타일은 shCoreMidnight.css 스타일이고,  이 밖에 shCoreDefault, shThemeEclipse 등 다양한 스타일을 적용할 수 있다. 스타일을 바꾸고 싶으면 아래 주소를 참고하여 맨 윗줄의 css를 다른 파일로 설정하면 된다.

 - http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

 - https://github.com/alexgorbatchev/SyntaxHighlighter/tree/master/styles

* Highlighter 사용 방법

 - 글 작성시 HTML 편집 상태에서 소스코드를 입력하고 싶은 부분에 다음 코드를 입력하면 된다.

<pre class="brush: 언어이름">
// 소스코드
// 예시 1.
int main (void){
	printf("Hello, world!\n");
	return 0;
}
</pre>

또는

 - 브러쉬 종류는 다음 페이지에서 볼 수 있다.

 - http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

 - <, > 등의 코드와 Highlighter의 코드를 분명하게 하고싶으면 &lt;, &gt; 를 사용하면 된다.

* Highlighter 옵션 설정 방법

 - HTML/CSS 설정에서 skin.html에 다음과 같이 기본 옵션을 추가하여 설정할 수 있다.

 - http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

<!-- SyntaxHighlighter start in "skin.html"-->



...



<!--SyntaxHighlighter end -->
</body>
</html>

 - 폰트 크기를 변경하려면 HTML/CSS설정에서 style.css에 다음과 같은 코드를 추가하면 된다.

 - 폰트 기본크기는 1.0em인데, 본인은 현재 1.2em으로 설정하여 사용중이다.

div .syntaxhighlighter { overflow-y: hidden!important;
	overflow-x: auto!important; font-size: 1.2em !important;}

 - 또한 글을 작성할 때마다 다음과 같이 옵션을 설정할 수 있다.

<pre class="brush: js; first-line: 10; highlight: [2, 4, 6]">
...
</pre>