ソースコード表示ツール

テキストエリア

文字

変換後

置換える文字
< &lt; > &gt; & &amp;
" &quot; ' &#039; ※記号を特殊文字に変換します。

スポンサーリンク

ツールの使用方法

ソースコードの表示に便利使用用途

ブログや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. ソースコードを表示するにはhighlight.js

1.preタグのCSS設定について参考にさせてもらいました。
2.ソースコードを色つきで表示させる軽量なjsライブラリ。