2013年4月5日金曜日

Blogger Dynamic Views に Syntax Highlighter を導入する

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



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

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



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

1.BloggerテンプレートにCSSを登録

Bloggerテンプレート→カスタマイズへ
上級者向け→CSSを追加
下記2つのCSSの中身をコピーして貼り付け


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

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

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

3.各記事の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;
} 


関連ページ:

参考サイト:


スポンサーリンク

Related Posts Plugin for WordPress, Blogger...