前回の投稿もそうですが「プログラマの日記」なものでプログラム等のソースコードをブログに書く場合が多いです。しかし表示は手を抜いていたので見苦しいものでした。以前から何とかしなければと考えていましたが、お昼休みにエイヤッとやってしまったので記録です。

まずどういうやり方が一般的なのかググってみました。JavaScriptやPHPのプラグイン的にやるケースが多いようです。行番号が付けられたりして便利そうですが、プラグインを使うのはどうも好きではありません。そんな中で見つけたのがMTサイト構築Tips集様の以下の記事。

　pre、codeタグを使ってソースコードを美しく表示する

CSSを使って結構美しく出来るようです。早速参考にしてみてCSSにPREとCODEタグの定義を組み込んでみました。おお。結構綺麗。背景画像もこのブログ用に修正して…前回の投稿のソースも見やすくなったと思いますがいかがでしょうか？MTサイト構築Tips集様ありがとうございましたm(_ _)m

ただまだ問題があります。ソースを入れる場合にソースコードの特殊文字を変換する必要があります。まあこれは比較的簡単なのでJavaScriptで作ってみました。以下長くなるので続きを読むにて。

さて以下に変換のフォームとスクリプトを置いてみました。上の「ソース入力」にプログラムソースをペーストして「変換実行」をクリックすると「結果出力」に特殊文字がエスケープされpreとcodeタグで囲まれた文字列が出力されるので、これをコピーして利用すればＯＫです。ほとんど自分用だな(^^;

ソース入力：

結果出力：

早速この機能を使って上のソースコードを表示してみましょう。

<script type="text/javascript">
function html_convert()
{
	var str0 = document.convert_form.src.value;
	var reg1 = new RegExp(/&/g);
	var str1 = (str0.replace(reg1, "&amp;"));
	var reg2 = new RegExp(/\"/g);
	var str2 = (str1.replace(reg2, "&quot;"));
	var reg3 = new RegExp(/</g);
	var str3 = (str2.replace(reg3, "&lt;"));
	var reg4 = new RegExp(/>/g);
	var str4 = (str3.replace(reg4, "&gt;"));
	var reg5 = new RegExp(/\r\n/g);
	var str5 = (str4.replace(reg5, "<br>"));
	var reg6 = new RegExp(/\n/g);
	var str6 = (str5.replace(reg6, "<br>"));
	var reg7 = new RegExp(/\r/g);
	var str7 = (str6.replace(reg7, "<br>"));
	var rslt = "<pre><code>" + str7 + "</code></pre>";
	document.convert_form.dst.value = rslt;
}
</script>

<form name="convert_form">
<div>ソース入力：<br><textarea name="src" rows="6" cols="58"></textarea></div>
<div>結果出力：<br><textarea name="dst" rows="6" cols="58"></textarea></div>
<div><input type="button" onclick="html_convert()" value="変換実行"></div>
</form>

よしバッチリかな。クリアボタンを後から付けましたがこれは簡単なので上のソースには反映しませんでした。以上何かの参考になれば幸いです。