Blogger Dynamic Views に Syntax Highlighter を導入する

ソースコードを綺麗に表示するため、Syntax Highlighterを導入した。

※以下の導入方法はGoogle blogger Dynamic Views用です。

→静的テンプレートでの導入方法はこちら

やることは大きく分けて下記３つ。

1. BloggerテンプレートにCSSを登録
2. ソースコードをPreタグで囲み、記事HTMLに記述
3. 各記事のHTMLにScriptを記述

１．BloggerテンプレートにCSSを登録

Bloggerテンプレート→カスタマイズへ

上級者向け→CSSを追加

下記２つのCSSの中身をコピーして貼り付け

• http://alexgorbatchev.com/pub/sh/current/styles/shCore.css
• http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

ブログに適用ボタンを押して保存

２．ソースコードをPreタグで囲み、記事HTMLに記述

投稿画面のエディタをHTMLモードにする

このページのようにソースコードを加工する

表示したい場所に貼り付け

３．各記事のHTMLにScriptを記述

記事投稿画面のエディタをHTMLモードにする

エディタの一番下に以下のスクリプトを記述

<script src='http://syntaxhighlight-blogger-dynamic.googlecode.com/files/syntaxhighlighter-20111212.js' type='text/javascript'></script> 

以上。

以下のように表示されます。

var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
} 

関連ページ：

• SyntaxHighlighter用にソースコードを加工する
• Blogger に Syntax Highlighter を導入する

参考サイト：

• Easy Code Syntax Highlight on Blogger Dynamic Views
• syntaxhighlight-blogger-dynamic (sbd)
• HTMLエスケープツール
• Syntax Highlighter Scripts Generator