Blogger에서 SyntaxHighlighter를 사용해 보자.





































내 블로그에서 템플릿에 들어가 해당 디자인의 HTML편집으로 들어갑니다.




</head> 위에 위 코드를 넣습니다. 그럼 해당 템플릿에서는 SyntaxHighlighter를 사용할 수 있습니다.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreEclipse.css' rel='stylesheet' type='text/css'/>

<script type='text/javascript'>
    SyntaxHighlighter.all();
    SyntaxHighlighter.config.bloggerMode = true;
</script>

저는 bash와 cpp만 추가했는데 다른 브러시들은

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

여기에서 참고해서 가져다 추가하시면 됩니다.

코드 스타일은 shCodeEclipse.css로 설정했는데 다른 스타일을 원하시는 분들은

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

위 테마를 참고해서 원하는 스타일의 파일 이름을 넣으시면 됩니다.

코드를 추가하는 방법은

<div>
<pre class="brush: cpp">
 ... 코드들
</pre>
</div>


을 HTML로 넣으시면 됩니다. 에디터 상태에서는 안보이니 절망하지 마시고, 내 블로그 보기로 보시면 예쁘게 보입니다.

댓글 없음:

댓글 쓰기