の続きです。
こちらもタイトルですぐにわかりますが、なんとかそれっぽく形にすることができました。
コードハイライタは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>";
}
?>
何かしら参考になりましたらクリックをよろしくお願いします
色わけされると、やはり見やすいですね。
前に書いてある部分のコードが
コピペできない！と焦ったら画像でした＾＾；
一人で勝手に勘違いしておりました。
いろんな技術があって、やりだすと止まらなくて
やっぱり楽しいですね。
私もさっそくマネッコして、こちらを導入したいと思います＾＾
Wordpressとかなら多分CodePressが使えるんじゃないでしょうか。
もし使えるなら絶対そっちのほうがオススメです。
会社のサーバでテストしたんですけどあっちはテキストエリア内に指定するidの中で言語を指定する事が出来ます。
指定された言語に適した色分けがされるのですごくいいですよ。