2008年05月01日

seesaaブログでソースコード色分けに挑戦【失敗編】

前回、PHP TIPSというカテゴリを新規に作成し、ソースコードをブログに直接書きました。

が、どうも見づらいので、何かソースコードを見やすくできるようなものはないのかと調べて、実際に試した報告をします。


タイトルがすでに【失敗編】なので、このエントリーは失敗談です(笑)

コードハイライタはCodePressです。

ではどうぞ




まず、

1.色分けが自動でされる
2.seesaaブログで使える


この二つが絶対条件なのですが1はネットにたくさん文献があるのですが2についてはほとんど見つからず、結局自分で試してみるという形になってしまいました。。

Webベースのソースコードエディタ「CodePress 0.9.6」

各種言語に対応したハイライタ「CodePress」

CodePressというのは、単なるコードハイライタではなく、テキストエリア内で実際にソースを書く事ができ、リアルタイムで括弧の補完や色分けをしてくれるというスグレモノです。

サンプルを見るだけで非常にすばらしいものだと思いました。
Javascriptだけで動くみたいなのでぜひこれをseesaaブログで使いたいと思いました。

早速zipをダウンロードし、展開してファイルをアップロード。


・・・あれ?
seesaaのアップロードディレクトリって階層指定できないじゃん!!

codepressディレクトリの下にenginesやlanguagesなどのディレクトリを配置しないといけないんです。

じゃあ・・・と思い、駄目元で新規ディレクトリ作成部分のテキストボックスに

codepress/engines

と入れてみたら、、、、、なんと成功しました。
(もしかしたらヘルプとかに書いてあるかもしれませんね・・・笑)

ということで50ファイルほどをセコセコとアップロード。
(まとめてアップロードする機能がほしい・・・)

ファイルのアップロードが終わったら、
head内に



<script type="text/javascript" src="http://yourdomain/codepress/codepress.js"></script>



を記述。

ブログ記事内に置くテキストエリアでソースコードを囲む。



<textarea id="mycodearea" class="codepress php">
//ここにソースコードを記述
</textarea>



これだけです。
こんなに簡単で良いのかってくらい設定が簡単です。

設定も完了し、ブログを更新。

ブラウザで開いてみると・・・






・・・・・Javascriptのエラーが・・・・・・


中の人いわく、「書き込みができません」


だそうです。。。


「CodePress」でリアルタイムシンタックスハイライト - うなの日記
こちらで書かれている、

ハイライト時には元々のテキストエリアは非表示になり、独自の要素に置き換えられているため、


これを読んで、もしかしたら一度構築された記事を置き換えようとするところでエラーが出ているのかもしれないと思いました。
もしそうであればseesaaブログでは使えないとうことに・・・orz

その後もjsファイルを外部に置いて呼び出してみたり色々試してみたのですが、駄目でした・・・泣


私は泣く泣くCodePressをseesaaで利用することを諦めました。

誰か使っている人がいましたら是非教えてください;;



seesaaブログでソースコード色分けに挑戦【なんとか形になった編】

へ続きます。

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
posted by トモヒロ | Comment(0) | TrackBack(0) | ブログ
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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


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

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

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