寝太郎の江戸風呂。ね！

[PR]

2024/04/27 (Sat.)

ソースコードを表示するCSSルール。

このブログでは、恥をかえりみずよくソースコードを晒していますが、 これまでは、次のような手間をかけていました。

1. 特殊文字のエスケープ（<>&など）
2. 改行（BR要素の追加）または　PRE要素への放り込み

コードを変換する際に間違えたり、ミスしないものの変換ツールを使ったりと、それなりに煩雑でした。 しかし、もっと簡単に表示する方法がありました。

スタイルシートで、見せたいSCRIPT要素やSTYLE要素を表示してしまえばよいのです。 通常、これらの要素の "display" CSSプロパティは、"None"に設定されていますが、これを "block" にすれば、ページに表示されます。 そして、"white-space" CSSプロパティを "pre" にすれば、整形テキストとして改行されます。 このままだと、横にはみ出すときもあるので、"overflow" CSSプロパティを "scroll"にします。 あとは、背景色や文字色や枠線のスタイルを整えればよいでしょう。

この考えを元に作ったのが次の CSSルールです。 class属性に "showScript" というクラス名（className)を持たせれば、それがSCRIPT要素やSTYLE要素であっても見えるようになります。

ソースコードを表示するCSSルール（Visible Script CSS Rule）

上記の記述自体、STYLE要素のclass属性に "showScript" を持たせて表示させています。 便利！

2011/12/13 (Tue.) Trackback() Comment(0) etc.