SyntaxHighlighter
SyntaxHighlighter는 말 그대로 code syntax highlight 기능을 제공한다.
sample.
var sample = "syntax highlighter를 사용해서 javascript 코드를 보여주고 있습니다.";
var example = {
foo : function() {
alert("foo");
}
}
이런식으로 코드가 보이는 블로그 / 사이트들은 SyntaxHighlighter를 사용한 것이다.
SyntaxHighlighter를 사용하려면 사이트에 가서 파일을 다운로드 받은 후에
자기 블로그 사이트에 파일을 추가시키고 include하면 된다.
*하지만, 구글 블로그에서는 파일을 업로드 할 수가 없기 때문에 다른 방법을 사용한다.
src에 SyntaxHighliter의 주소를 넣어서 파일을 불러오는 방법.
SyntaxHighlighter를 사용하려면 사이트에 가서 파일을 다운로드 받은 후에
자기 블로그 사이트에 파일을 추가시키고 include하면 된다.
*하지만, 구글 블로그에서는 파일을 업로드 할 수가 없기 때문에 다른 방법을 사용한다.
src에 SyntaxHighliter의 주소를 넣어서 파일을 불러오는 방법.
위 코드를 템플릿 -> HTML 편집에 들어가서 <head> </head> 사이에 집어넣는다.
.js 파일들은 지원하는 code style을 가리키고 있다. 더 다양한 걸 원한다면
이 주소를 참조해서 .js 파일을 추가하자.
brush : http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
사용법
<pre class="brush: javascript">
source code
</pre>
포스트를 작성할 때 HTML 편집 모드에서 이렇게 <pre> 태그로 감싸주면 그 내용이 위 sample처럼 보여진다.
어떤 문법의 code냐에 따라서 brush: javascript or C++ or PHP 등등... 해당 문법 이름을 넣어주면 된다.
brush name은 이 페이지에 있다. http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
<13. 5. 7 추가>
2.0 버전에서 세로 스크롤이 자꾸 생기는 경우가 있어서 보기 안좋다.
div .syntaxhighlighter { overflow-y: hidden!important; overflow-x: auto!important; }
CSS에 이 코드를 넣어주면 해결.
