2010-03-05

ブログでのソースコード表示  [by miyachi]

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

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

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

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

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

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

ソース入力:
結果出力:

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

<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>

よしバッチリかな。クリアボタンを後から付けましたがこれは簡単なので上のソースには反映しませんでした。以上何かの参考になれば幸いです。
2010-03-05 13:23:40 - miyachi - [プログラミング] - この投稿をtweetする!

コメント一覧

れい のコメント

miyachi 様
PHP初心者のブログを始めたばかりの者です。ソースコードの表示方法を検索していて、こちらのサイトを見つけました。他のサイトでは上手くいかなかったので、本当に感謝しています。
以下のブログ2つで紹介させていただきました。
http://programming.dtiblog....
http://php-programming.sees...
これからもよろしくお願いいたします!
2011-04-24 01:40:04

miyachi のコメント

れい様。お役に立てて何よりです :-)
よろしければ使ってやって下さい。
2011-04-25 13:27:22

TTanaka のコメント

使わせてもらいます
2012-09-16 14:07:11

miyachi のコメント

TTanaka様、どうぞご自由にお使いください。ところで「MTサイト構築Tips集」がアクセスできなくなっている気が…うちも長続きできるように頑張ります(^^;
2012-09-17 11:19:33

kimiko のコメント

私も今日見つけ、早速使わせていただきました!
どうもありがとうございました(^▽^)
2013-03-29 17:34:42

miyachi のコメント

kimiko様、お役に立てて何よりです。
2013-03-30 10:15:25

コメントを書く


:

: "LangEdge" と入力
:
:

DISALLOWED (TrackBack)