忍者ブログ

2018
02
18

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/02/18 (Sun.)

2011
12
13

ソースコードを表示する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" を持たせて表示させています。 便利!

PR

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

Comments

名前
メールアドレス
URL
コメント
PASS  Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback

Trackback for this entry:

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

01 2018/02 03
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア