が、どうも見づらいので、何かソースコードを見やすくできるようなものはないのかと調べて、実際に試した報告をします。
タイトルがすでに【失敗編】なので、このエントリーは失敗談です(笑)
コードハイライタはCodePressです。
ではどうぞ
まず、
1.色分けが自動でされる
2.seesaaブログで使える
この二つが絶対条件なのですが1はネットにたくさん文献があるのですが2についてはほとんど見つからず、結局自分で試してみるという形になってしまいました。。
Webベースのソースコードエディタ「CodePress 0.9.6」
各種言語に対応したハイライタ「CodePress」
CodePressというのは、単なるコードハイライタではなく、テキストエリア内で実際にソースを書く事ができ、リアルタイムで括弧の補完や色分けをしてくれるというスグレモノです。
サンプルを見るだけで非常にすばらしいものだと思いました。
Javascriptだけで動くみたいなのでぜひこれをseesaaブログで使いたいと思いました。
早速zipをダウンロードし、展開してファイルをアップロード。
・・・あれ?
seesaaのアップロードディレクトリって階層指定できないじゃん!!
codepressディレクトリの下にenginesやlanguagesなどのディレクトリを配置しないといけないんです。
じゃあ・・・と思い、駄目元で新規ディレクトリ作成部分のテキストボックスに
codepress/engines
と入れてみたら、、、、、なんと成功しました。
(もしかしたらヘルプとかに書いてあるかもしれませんね・・・笑)
ということで50ファイルほどをセコセコとアップロード。
(まとめてアップロードする機能がほしい・・・)
ファイルのアップロードが終わったら、
head内に
を記述。
ブログ記事内に置くテキストエリアでソースコードを囲む。
<textarea id="mycodearea" class="codepress php">
//ここにソースコードを記述
</textarea>
これだけです。
こんなに簡単で良いのかってくらい設定が簡単です。
設定も完了し、ブログを更新。
ブラウザで開いてみると・・・
・・・・・Javascriptのエラーが・・・・・・
中の人いわく、「書き込みができません」
だそうです。。。
「CodePress」でリアルタイムシンタックスハイライト - うなの日記
こちらで書かれている、
ハイライト時には元々のテキストエリアは非表示になり、独自の要素に置き換えられているため、
これを読んで、もしかしたら一度構築された記事を置き換えようとするところでエラーが出ているのかもしれないと思いました。
もしそうであればseesaaブログでは使えないとうことに・・・orz
その後もjsファイルを外部に置いて呼び出してみたり色々試してみたのですが、駄目でした・・・泣
私は泣く泣くCodePressをseesaaで利用することを諦めました。
誰か使っている人がいましたら是非教えてください;;
seesaaブログでソースコード色分けに挑戦【なんとか形になった編】
へ続きます。