キッズプレート、パスタおかわり FC2ブログでソースを色分けgoogle-code-prettifyを導入～ひらくんとスパイダ

FC2ブログでソースを色分けgoogle-code-prettifyを導入

2009/01/14 (水) カテゴリー/WEBサービス・ツール

　google-code-prettifyってのはGoogleが提供しているテキストカラーリングのJavascriptライブラリっす。
　いろんなエディタでプログラムソースを表示すると予約語なんかが色分けされて表示されます。
「ブログに載せているソースも色分けされてたら見易いんじゃないの？」
　と以前から思っていたのですが、このgoogle-code-prettifyはJavascriptファイルとcssファイルをセットで利用する仕組みになっており、そのためにはHTMLのソース内に外部参照形式でこれらのファイルを読み込ませないといけません。
「外部のJavascriptファイルだからなあ。ブログじゃ使えないじゃん」
　なんてことを勝手に思っていて入れてなかったのですが、よくよく見てみるとFC2ブログのツール内にあるアップローダに拡張子jsやcssの文字があるじゃないですかっ！∑(￣□￣;)ﾅﾝﾄ!!
「えっ？　外部Javascriptアップして使えちゃうの？？」
　と思い試してみるとなんとバッチリ使えるじゃないですか。いやー驚きましたFC2ブログ。これで俄然カスタマイズの幅が広がりますねえ。後はUTF8対応になってくれると本当に嬉しいんですが。。。
　導入手順を紹介している頁はいくつかありますがまあせっかくなのでここでも簡単に紹介しておます。
【JavascriptとCSSをダウンロード】
http://code.google.com/p/google-code-prettify/downloads/list
　にある
「prettify-small-8-Jan-2009.zip」
　を落として解凍します。解凍されたフォルダ（フォルダ名はsrc）にいくつかのファイルがありますが基本的には、
・prettify.css
・prettify.js
　の２ファイルを使用します。
【アップロード】
　FC2ブログの管理画面にログインしてツールのファイルアップロードをクリック。ダウンロードした「prettify.css」と「prettify.js」をアップロードします。
　アップロードが終わりましたらアップロードされているファイル一覧に２つのファイルが並んでいると思いますので「表示」でリンクされているリンク先URLを適当なエディタ等にそれぞれコピペしておいてください。このURLは後ほどテンプレートに埋め込みます。
【テンプレートの編集】
　環境設定から「テンプレートの設定」を選び現在使用しているテンプレートのHTMLを編集します。
　<head>タグで囲まれた部分に以下の２行を追加します。

<link href="prettify.cssのURL" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.jsのURL"></script>

　hrefとsrcの指定はそれぞれ前もって調べておいたURLを記述してください。上記の２行を追加してさらに<body>の開始タグを以下のように変更します（onloadを指定します）。

<body onload="prettyPrint()">

　２行の追加とタグの変更が終わったらテンプレートを保存します。これで導入は終了です。
【使ってみる】
　記事の編集時、カラーリングを適用したいテキスト部分を<pre class="prettyprint"></pre>タグで囲みます（preではなくcodeタグでもOKです）。こんな感じです。
<pre class="prettyprint">

#!/usr/bin/perl
use utf8;  #-ソースがUTF8だという宣言
use Encode;
binmode STDOUT, ":encoding(utf8)";  #-画面に出力したい文字コード
binmode STDERR, ":encoding(utf8)";  #-エラー出力に使いたい文字コード
binmode STDIN, ":encoding(utf8)";  #-標準入力から入ってくる文字コード
print "Hello World\n";
exit;

</pre>
　でこうなります。

#!/usr/bin/perl
use utf8;  #-ソースがUTF8だという宣言
use Encode;
binmode STDOUT, ":encoding(utf8)";  #-画面に出力したい文字コード
binmode STDERR, ":encoding(utf8)";  #-エラー出力に使いたい文字コード
binmode STDIN, ":encoding(utf8)";  #-標準入力から入ってくる文字コード
print "Hello World\n";
exit;