2013年11月19日火曜日

SyntaxHighlighterをBloggerで使用する

SyntaxHighlighterサイトよりホスティングされているjsファイルやcssファイルを下記のようにBloggerのテンプレートにセットします。
※その他の言語にSyntaxHighlighterを使用する場合は、別途必要なファイルを追加してください。

<head>
<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'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.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/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
SyntaxHighlighter.all();
</script>
</head>

上記で実装は完了です。

SyntaxHighlihgterを記事で使用するには下記のような記述で使用できます。
エスケープ必要記述

<pre class="brush: plain">
エスケープした内容を記述
</pre>

エスケープ不要記述
<script type='syntaxhighlighter' class='brush: plain'><![CDATA[
内容を記述
]]></script>