Blogger に Syntax Highlighter を導入する

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

※以下の導入方法はGoogle blogger 静的テンプレート用です。
→Dynamic Views(動的テンプレート)での導入方法はこちら

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

1. SyntaxHighlighter用スクリプトをコピー
2. Bloggerテンプレートにスクリプトを登録
3. ソースコードをPreタグで囲み、記事HTMLに記述

１．SyntaxHighlighter用スクリプトをコピー

Syntax Highlighter Scripts Generatorへ

好みのテーマと有効にしたい言語を選択してGenerate

スクリプトが作られるのでCopy to Clipboardを押してコピー

２．Bloggerテンプレートにスクリプトを登録

Bloggerテンプレート→HTMLの編集へ

</head>タグの直前にコピーしたスクリプトを貼り付け

保存して閉じる

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

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

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

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

以上。

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

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

関連ページ：

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

参考サイト：

• HTMLエスケープツール
• Syntax Highlighter Scripts Generator