2008年05月01日

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

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

の続きです。

こちらもタイトルですぐにわかりますが、なんとかそれっぽく形にすることができました。

コードハイライタはgoogle-code-prettifyです。

ではどうぞ




CodePressがうまく導入できず、見切りをつけたあと目をつけたのが

google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ

これです。

導入方法はCodePressと同様に非常に簡単です。

・prettify.cssとprettify.jsをファイルマネージャでアップロード。

・head内に以下を記述



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




・bodyタグにOnloadを追加



<body onload="prettyPrint();">



・ソースコードをclassをつけてpreで挟む



<pre class="prettyprint">
//ソースコード
</pre>



以上です。


が、、、、、、、、、

なぜか私の環境が悪いのかseesaaが悪さをしているのか、htmlタグだけが四角で囲まれるのです。

へん


たぶんこれっておかしいんですよね・・・謎

ネット文献をあさってみたんですがそれらしい記述は見当たらず・・・。

ということでソースをざっと見て直せるんなら直そうかと。。

style関連をざっと探すが見つからず。。
じっくり見ればいいんですがとりあえずタグの種類を定義しているあたりを少しさわって、四角い枠は出なくなったのでこれでいいかなと・・・(笑)

色分けされることが目的でしたので。

へん


やる気になったら全体をしっかり読んで直そうと思います。

というわけで、

seesaaブログでのソースコード色分けが、なんとかできました。



<?php

//テスト

$arr = array("A","B","C");

for($i=0;$i<count($arr);$i++)
{
echo $arr[$i] . "<br>";
}

?>


何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
posted by トモヒロ | Comment(2) | TrackBack(1) | ブログ
この記事へのコメント
おはようございます。
色わけされると、やはり見やすいですね。
前に書いてある部分のコードが
コピペできない!と焦ったら画像でした^^;
一人で勝手に勘違いしておりました。

いろんな技術があって、やりだすと止まらなくて
やっぱり楽しいですね。
私もさっそくマネッコして、こちらを導入したいと思います^^



Posted by K子 at 2008年05月03日
K子さんもスクリプトを貼るようなサイトをお持ちですか?
Wordpressとかなら多分CodePressが使えるんじゃないでしょうか。
もし使えるなら絶対そっちのほうがオススメです。
会社のサーバでテストしたんですけどあっちはテキストエリア内に指定するidの中で言語を指定する事が出来ます。
指定された言語に適した色分けがされるのですごくいいですよ。
Posted by トモヒロ at 2008年05月03日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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


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

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

Seesaa Blog でソースコードのハイライト
Excerpt: ツイート Follow @koteitan google-code-prettify という JavaScript ライブラリを使って SeeSaa ブログ上でソースコードをハイライト表..
Weblog: あおいはっぱ
Tracked: 2011-12-25 08:29
×

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