2011年5月21日土曜日

Bloggerでソースコードをかっこよく表示したい

はじめまして。ビジネスサービス事業部隊員です。

我が事業部隊長の命を受け、ブログに参戦することになりました。
よろしくお願いします。

あいさつはこのくらいにして、、


このブログのソースコードをきれいに表示しようと、早速ググッてみたところ、

・コードをハイライトする「Blogger Syntax Highlighter」ウィジェット     http://www.kuribo.info/2008/06/blogger-syntax-highlighter.html

Syntax Highlighter」というライブラリを発見。
 ※ ソース→http://code.google.com/p/syntaxhighlighter/

簡単だね。と思われましたが、そうでもなく、、

・Blogger Syntax Highlighter 導入(いろいろトラブった)
    http://micchysdiary.blogspot.com/2011/04/blogger-syntax-highlighter.html

最近の古い(?)ブラウザじゃないと簡単にはいかない模様。

・BloggerにおけるSyntaxHighlighterの使い方
    http://moririn-web.blogspot.com/2010/03/bloggersyntax-hilighter.html

ここの情報が比較的新しいらしいので、ここを参考に実践してみました。

[手順]
① Bloggerの設定から、[デザイン] - [HTMLの編集]で、上記サイトよりコピーしたソースを<head></head>内に追記。保存。


これだけ。簡単でした。

var sample = function(){
alert="Hello!! World!!";
}

が、こんな感じになります。

var sample = function(){
 alert="Hello!! World!!";
}

いいかんじ~

使い方は、

// ここにコードの内容

「*****」は、ここから使いたい言語のBrush aliasesに書き換えればOK!

エディターでソースを書いて、[HTMLの編集]で<pre>~</pre>で囲むだけ。

では。

0 コメント:

コメントを投稿