2013年4月8日月曜日

Blogger に Syntax Highlighter を導入する

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



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

やることは大きく分けて下記3つ。
  1. SyntaxHighlighter用スクリプトをコピー
  2. Bloggerテンプレートにスクリプトを登録
  3. ソースコードをPreタグで囲み、記事HTMLに記述

1.SyntaxHighlighter用スクリプトをコピー

Syntax Highlighter Scripts Generator

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

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

2.Bloggerテンプレートにスクリプトを登録

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

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

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

投稿画面のエディタをHTMLモードにする
このページのようにソースコードを加工する
表示したい場所に貼り付け

以上。

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

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

関連ページ:

参考サイト:


スポンサーリンク

Related Posts Plugin for WordPress, Blogger...