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.htmlhttp://mlawire.blogspot.kr/2009/07/blogger-syntax-highlighting.html
댓글 없음:
댓글 쓰기