2011/01/22

BloggerでSyntaxHighlighter導入

blogでソースコードを貼りつけたい時に
分かりやすくハイライトしてくれる
SyntaxHighlighterを導入しました。


参考させていただいたリンク
・BloggerにおけるSyntaxHighlighterの使い方
・「SyntaxHighlighter」各要素ごとの設定項目
・Blogger に SyntaxHighlighter 2 をインストールする


まずbloggerのHTMLの編集で<head>内にSyntaxHighlighterのコアjsファイルを導入。
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>

次にハイライトしたい言語を選択し挿入。
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.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/shBrushPython.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/shBrushJScript.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'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDjango.css' rel='stylesheet' type='text/css'/>

最後にSyntaxHighlighterを有効にする処理を挿入。
<script type="text/javascript">
// Bloggerへの埋め込みなら以下の一行は必須です。
SyntaxHighlighter.config.bloggerMode = true;
// クリップボードSWFもホスティングしてもらいましょう。
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
// 論理改行は無効にしておきます。
SyntaxHighlighter.defaults['wrap-lines'] = false;
// 最後にSyntaxHighlighterを有効にします。
SyntaxHighlighter.all();
</script>

これでソースコードをハイライトする準備が終了。
使い方は
<pre class="brush: javascript;">
alert('Hello World!!');
</pre>
このようにpreタグで囲み、
class属性で使用したいbrushを選択するだけ。

html-script
htmlやxmlもハイライトしてくれる。
<pre class="brush: javascript;html-script: true">
SampleCode
</pre>

gutter: false;
行番号の表示、非表示
<pre class="brush: javascript;gutter: false;">
サンプルコード
</pre>


ページ上のハイライトされた要素をデフォルト隠す。
クリックすると開く。↓
<pre class="brush: javascript;collapse: true'">
123456789
</pre>

最後にCSSのテーマ
Defaultだとこれ

最終的にblogのテーマに合わせると
Djangoが一番あってました。

他は
  • Eclipse
  • Emacs
  • FadeToGray
  • Midnight
  • RDark
などがあります。
ぜひお試しあれ♪