레이블이 syntax highlight인 게시물을 표시합니다. 모든 게시물 표시
레이블이 syntax highlight인 게시물을 표시합니다. 모든 게시물 표시

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