サイトにプログラムコードを貼り付けるpreタグのCSS

By , 2012年5月10日

実体参照されていないため、表示されない。
突然ですが、サイトにJavaScriptやC言語などのプログラミングコードを貼り付ける時は、普通にコードを入力していくと、実体参照(<>)などが、&lt;&gt;などに変換されてしまい、普通にコードを記述することは出来ませんよね。

そんなときに、使用するのが<pre>という整形のHTMLタグなのですが、この<pre>をデフォルトのままそのまま記入すると、<pre>で囲んだコードの中身が、一行の記述が長かったりすると、途中で表示が、途切れてしまいます。

例:
<pre>
var browser=(document.compatMode==”CSS1Compat”)? document.documentElement : document.body //IE6かの判定
</pre>

途切れてしまう

これを、回避する方法として、<pre>をCSSで制御するのですが、自分でも驚くことに、管理人はこの<pre>を今まで殆ど使っていなかったりします。なので、「無いなら、これから作るしかない」というわけで、CSSで<pre>を制御する、CSSを書いてみましたので、そのCSSを公開いたします。

<pre>タグのスタイルシート

pre.code {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#eeeeee none repeat scroll 0 0;
border:1px solid #999999;
color:#444444;
display:block;
font-size:1em;
margin:1em;
overflow:scroll;
padding:0.5em;
width:560px;
}

上記、CSSは各自、ご自由にサイトに記入して、お使いいただければと思います。(改変可)

行ったことは、overflow:scroll;とdisplay:block;の指定にて、一行のコードが長くなると、自動的に560pxのところで、折り返すようになります。使い方は、<pre class=”code”>~コードの内容~</pre>
という風にpreのclassにてcodeを入力すれば良いだけです。

実際に使ってみました&このように使います。

<script language="javascript">
document.write("<form><textarea name=(browsermime' rows='10' cols='60'>MIMEタイプ表示スクリプト\n");
for(i=0;i<navigator.mimeTypes.length;i++){
document.write(navigator.mimeTypes[i].type,":",navigator.mimeTypes[i].description,":",navigator.mimeTypes[i].suffixes,"\n");
document.write("</textarea></form>\n");
}

※上記スクリプトは、現在お使いのブラウザのMIMEタイプをすべて表示するスクリプトです。

このように、CSSを使いプログラムコードを、楽に書いていくことが可能となりました。実際に<pre>内にコードを記入する場合は、実体参照に変換を行ってから、コードを書くようにしましょう。

ちなみに、上記サイトを使えば、楽に実体参照を変換することが出来ますが、元々の実体参照の文字列には以下のサイトを参考にすると良いと思います。殆どの実体参照がまとめられています。
HTML4で支える文字実体参照

これで、気兼ねなく、コードを書いていけるようになりました^^


コチラもあわせてどうぞ!
  1. JavaScriptメモ帳、その1
  2. JavaScriptデバッグ中のエラーの種類について
  3. JavaScript用エディタ「JavaScriptist」
  4. 40カ国以上の国の言語を翻訳可能なブログパーツ「World-Word-翻訳」
  5. ポチッとSeeブックマーク概要

Leave a Reply


OfficeFolders theme by Themocracy