プログラムソースを表示するpreタグ・メーカー
プログラムのソースを表示したい場合、HTMLタグのpreタグは便利です。
技術系・プログラミング系のブログを書かれている方も多いでしょう。
このブログでもプログラムソースを表示することがあります。
<pre></pre>で囲んでやると、ソース中のスペースや改行をそのまま表示できます。
ただし、preタグ内であっても、「<」、「>」、「&」は、特殊文字として認識されてしまいますので、「<」、「>」、「&」とHTMLエスケープが必要です。
そうしないと、ソースが表示されずに、プログラムが動いてしまう場合があります。
いちいち手打ちで特殊文字をエスケープするのは面倒くさいですので、特殊文字を一発エスケープしてくれるツールを作りました。
ただ、htmlentities()使ってるだけなので、ツールと呼べるほどでもないかもですけど（笑い）
ブログにプログラムのソースを表示したいときには、けっこう便利です。
ちなみに、「"」（ダブルクオート）、「'」（シングルクオート）も、それぞれ「"」、「'」へとエスケープ処理されます。
たとえば・・・
<pre>
<?php
$array = array('PHP', 'JavaScript', 'Perl');
if (is_array($array)) {
var_dump($array);
}
?>
</pre>
上記のソースを、そのままMTなどブログのエントリー画面に貼って投稿すると、PHPが動いてしまう場合があります。（当ブログは、拡張子がhtmlでもphpとして動作するように設定しています。）
PHPが動作した結果、表示は以下のようになります。
array(3) {
[0]=>
string(3) "PHP"
[1]=>
string(10) "JavaScript"
[2]=>
string(4) "Perl"
}
だから、ソースを表示したい場合は、<pre></pre>タグ内の特殊文字をエスケープして、以下のようなソースをブログのエントリー画面に貼らなければならない。
<pre>
<?php
$array = array('PHP', 'JavaScript', 'Perl');
if (is_array($array)) {
var_dump($array);
}
?>
</pre>
こうすれば、以下のようにソースがちゃんと表示されます。
preタグ内では、半角スペースも認識されますので、インデントした見やすいソース表示ができます。
以下、上記ソースをブログのエントリー画面に貼って投稿した時の表示例：
<?php
$array = array('PHP', 'JavaScript', 'Perl');
if (is_array($array)) {
var_dump($array);
}
?>
ちゃんとソースが表示されています。
それと・・・MTの場合、preタグのルールを守らないといけません。
１．preタグ内で、行を空けない。（空の行が入ったら駄目）
２．pre開始タグのすぐ上の文との間に、１行だけ空の行を作る。（２行以上、空けてはいけない。）
守らないと、brタグが勝手に付加されるなどして表示が乱れてしまいます。
すごーい！
さすがですね
てか今はじめて知りました＾＾；
あれー何勉強してたんだろう
やっぱり経験がもの云いますね
いや、このプログラムは全然すごくないよ（笑い）
ほんと、数行のコードだもん
>（ほぼ自分用だったり・・笑）
いえいえ、重宝してますよ。
これからも是非使わせていただきます。
ひろっちさん、こんにちは
おおー、超うれしいです。
ありがとうございます。
JavaScriptで・・・
<script type="text/javascript">
を書くと動作しちゃって、ソースを表示できなかったのがきっかけです。
PHPも<?php 書くと、apache設定次第では、.html拡張子でも動いちゃう場合ありますし。
で、きれいにプログラムソースを表示するツールを探したら、見つからなかったので作りました。
今後もよろしくお願いしますね！
用語もよくわからないまま、
ソースをそのまま表示させる方法を
探していてたどりつきました。
preを使ってもうまく行かず悩んでましたが、
その理由も解決し、ばっちり思い通りに出来ました!!
どうもありがとうございましたm(_ _)m
preタグメーカー勝手にblogで使ってます。
プログラム始めたばかりでHTMLとかぜんぜんわからないのですごくうれしいです。
mooさん
いえいえ、ご利用どうも有り難うございます。
お役に立ててよかったです。
匿名さん
どうぞ自由にお使いくださいね。
今後もよろしくお願いします。
■この記事のトラックバックURL:
http://www.mapee.jp/mpe334/mt-tb.cgi/126
以下のHTMLタグをトラックバック送信元ページ内に挿入して下さい。
※この記事へのリンクがない、また関連のないページからのトラックバックは反映されませんので、ご了承下さい。
