ソースコードの表示に便利使用用途
ブログやHPでタグ文字を表示する時に、そのまま記入するとタグ文字として認識してしまうので特殊文字に変換して、ソースコードを見せる為のツールです。
ソースコードの設置について
- 設置方法
- preタグのCSS設定
設置方法
変換したソースコードを表示する際にはpreタグとcodeタグで囲みます。
<pre>
<code>ソースコード</code>
</pre>
preタグは、改行・空白・インデント(字下げ)によって整形されたソースコードをそのまま表示したい場合に使用します。codeタグは、ソースコードをhtmlで表示する時に使用します。
preタグのCSS設定
<pre>タグには以下のCSSを設定します。
/*折り返す時*/
pre{
overflow: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
/*スクロールバーを使う時*/
pre{
overflow-x:scroll;
}
設定しないと、文字がpreタグからはみ出ます。文字の端で折り返すかスクロールバー発生させるか、どちらか一方でOK。
参考サイト
1.preタグのCSS設定について参考にさせてもらいました。
2.ソースコードを色つきで表示させる軽量なjsライブラリ。