codeをpreと同様に表示する

/ HTML5/CSS3/jQuery / Comment[0]

HTMLにおいてソースコードを示す際に使用するcode要素ですが、デフォルトではspanと同じく無装飾のインライン要素です。このcode要素をpre要素と同様にスペース・改行・タブを維持した整形済みテキストとして表示させるCSSを書きます。

code { display:block; white-space:pre; word-wrap:normal; }

こんな感じです。要素に直接指定してしまうと柔軟性に欠けるので適当にクラスを付けて、そのクラスに対して指定しましょう。
ブラウザ幅いっぱいでの改行を抑止するのであれば、更にoverflow-x:autoを追加しましょう。

上記スタイルを指定すればcodeではなくてもdivだろうがspanだろうがpre同様に表示されるようになります。

関連記事

コメント

:
:
:
:
:
管理人のみ表示を許可