ツイート |  |
Follow @koteitan
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) アップロード先のディレクトリを選択。デフォルトだと https://ブログ名.up.seesaa.net/image/ あたりになってしまう。嫌な場合は「追加」ボタンで追加。
(6) アップロードできたかどうかは https://ブログ名.up.seesaa.net/up先dir/prettify.css にアクセスして確かめたりできる。
(7) head にメタタグを書くために「デザイン」タブ→ＨＴＭＬ に移動。
(8) カスタマイズしてない場合は「デフォルトＨＴＭＬ」しかないので右上の「ＨＴＭＬの追加」を押して新しいデザインのＨＴＭＬを追加する（たぶん「デフォルトＨＴＭＬ」がひな型になってる）
(9) 下記の通りhtmlの編集。
(10) head タグの間に
<link href="https://ブログ名.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>
※ ブログ名.up.seesaa.net と、いつものブログアドレスじゃなくてup が付いているのに注意。
(11) body タグを下記のように編集する。
<body onload="prettyPrint();">
これで準備はＯＫ。
以下は、実際の記事を書く時の方法。
(12) <pre class="prettyprint"></pre> の間に所望のソースコードを書く。例えばこう:
<pre class="prettyprint">class="prettyprint"の小文字に注意。
var hello=function(){
alert("Hello pretty!");
};
</pre>
(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 はこうなる↓
ブログ上でのデバッグが楽。
（コメントがなくなって勝手にインデントされるけど）
