2015년 1월 14일 수요일

Syntax Highlighting in Blogspot

Blogspot 에서 code syntax highlight 하는법

템플릿 -> HTML 편집(사용중인 디자인)
아래의 코드를 </head> 이전에 삽입한다.

<!-- syntax highlighting begin -->
<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- add brushes here -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>
<!-- syntax highlighting end -->

</head>
그리고 템플릿 저장을 누르고 나온다.
지원되는 Brush의 여부는 여기 에서 확인이 가능 하니 원하는 brush를 <!-- add brushes here --> 아래에 같은 형식으로 추가 하여 사용하면 된다.
이제 코드를 작성하기 위해 아래와 같이 <pre> 태그에 class를 bursh:type 형식으로 지정하고 작성하면 된다.

<pre class="brush:perl">
#!/usr/bin/env perl

use utf8;
use strict;
use warnings;

print "Hello, World!\n";

__END__
</pre>

HTML 코드를 HTML 코드안에서 syntax highlight를 하기 위해서는
escape 해줘야 하므로 여기를 참조 하여 escape 후 복/붙 하면 된다.


참조

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
http://mlawire.blogspot.kr/2009/07/blogger-syntax-highlighting.html










댓글 없음:

댓글 쓰기