2011年12月25日

Seesaa Blog でソースコードのハイライト




このエントリーをはてなブックマークに追加





google-code-prettify という JavaScript ライブラリを使って
SeeSaa ブログ上でソースコードをハイライト表示する方法です。

ウェブサイトの技術っておもしろいよね seesaaブログでソースコード色分けに挑戦【なんとか形になった編】 の説明の足りないところを補完。

(1) google-code-prettify のページ http://code.google.com/p/google-code-prettify/ の Download から prettify-1-Jun-2011.tar.bz2 (とかもっと新しいのがあれば最新版とか)をダウンロード。
(2) /ziproot/google-code-prettify/src/{prettify.css, prettify.js, その他めぼしい言語の lang-xxx.js} を抜き出す。
※微妙に違う prettify.css と prettify.js が複数あったのでハマりました。src/ の中のがいいみたいです。
(3) SeeSaaBlog のマイページ「記事投稿」タブ→「ファイルマネージャ」を選択。
(4) 「アップロードするファイルを追加」を押して「ファイルを選択」ボタンを増やして、「ファイルを選択」ボタンを押して、prettify.css, prettify.js, lang-xxx.js をそれぞれ選択。
(5) アップロード先のディレクトリを選択。デフォルトだと http://ブログ名.up.seesaa.net/image/ あたりになってしまう。嫌な場合は「追加」ボタンで追加。
(6) アップロードできたかどうかは http://ブログ名.up.seesaa.net/up先dir/prettify.css にアクセスして確かめたりできる。
(7) head にメタタグを書くために「デザイン」タブ→HTML に移動。
(8) カスタマイズしてない場合は「デフォルトHTML」しかないので右上の「HTMLの追加」を押して新しいデザインのHTMLを追加する(たぶん「デフォルトHTML」がひな型になってる)
(9) 下記の通りhtmlの編集。
(10) head タグの間に
<link href="http://ブログ名.up.seesaa.net/up先dir/prettify.css"
type="text/css" rel="stylesheet" />
<script type="text/javascript"
src="http://ブログ名.up.seesaa.net/up先dir/prettify.js"></script>
の2行を追加。
※ ブログ名.up.seesaa.net と、いつものブログアドレスじゃなくてup が付いているのに注意。
(11) body タグを下記のように編集する。
<body onload="prettyPrint();">


これで準備はOK。
以下は、実際の記事を書く時の方法。

(12) <pre class="prettyprint"></pre> の間に所望のソースコードを書く。例えばこう:
<pre class="prettyprint">
var hello=function(){
alert("Hello pretty!");
};
</pre>
class="prettyprint"の小文字に注意

(12-b) もし JavaScript のサンプルをソースコードと一緒に貼るなら、二度手間なのでこういう方法もある:
<pre id="prehello" class="prettyprint"></pre>
<input type=button onclick=hello(); value="start"></input>

<script type="text/javascript"><!--
var hello=function(){
alert("Hello pretty!");
};
document.getElementById("prehello").innerHTML = hello.toString();
--></script>


12-b はこうなる↓





実行用のソースコードと表示用のソースコードが一元化できて
ブログ上でのデバッグが楽。
(コメントがなくなって勝手にインデントされるけど)
posted by aoao at 08:29| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。