2010-05-12

Bloggerでソースコードをきれいに表示する

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
ソースコードをよく貼り付けているのですが、他の方のサイトでソースコードがきれいになっていることがよくあるので真似っこしたくなったのです。

Bloggerで利用するには大きく2つあるようです。
・Syntax Highlighter
以下が参考になります。
http://u3q.blogspot.com/2010/01/bloggercom-syntax-highlighter-21-widget.html
http://www.kuribo.info/2008/06/blogger-syntax-highlighter.html
・google-code-prettify
以下が参考になります。
http://www.kuribo.info/2008/04/code-prettify.html

この2つを比較してみると
Syntax Highlighterの方がこっていて
google-code-prettifyの方はシンプルという感じです。
というわけで
Syntax Highlighter
の導入を目指します。

Syntax Highlighter
の参考サイトを見るとウィジェットをさくっと導入できそうなのですが、私の環境ではなぜかダウンロードが始まってしまいうまく導入ができませんでした。
原因はよくわからないのですが、利用しているテンプレートとかがいけないのかもしれないです。

というわけで違う方法を探したところ以下のサイトの方法でうまくできました。
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
英語のページですが、簡単に言ってしまうと、このページに書いてあるコードをテンプレートの直接編集で</head>の直前に入れるだけです。
後は、以下のページの使い方で使えばよいだけです。
http://u3q.blogspot.com/2010/01/bloggercom-syntax-highlighter-21-widget.html

こんな感じになります。

public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World!");
}
}

0 件のコメント: