HTMLでコードを表示する

Web(HTML)でプログラミングコード(整形済みテキスト)を表示するには、2種類の方法があります。

  • HTMLの<pre>要素を使う。
  • CSSで「white-space: pre;」を指定する

HTMLの<pre>要素を使う場合

<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
</pre>

実行例は以下。<pre>要素を一般的なブラウザで表示した場合、等幅フォントで表示されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

CSSのwhite-spaceを使う場合

/* CSS */
.test{
	white-space:	pre;
}
<!-- HTML-->
<div class="test">
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
</div>

実行例は以下。

<!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8″>

HTMLの特殊文字はエスケープが必要

上記2通りの方法で整形済みテキストを表示できるが、コードは特殊文字「<」「>」「&」を含まないようにエスケープしなければならない。

テキストエディタなどで変換することもできるが、以下のオンラインツールで簡単に変換可能。

HTMLの特殊文字をエスケープ

使い方

ht010

テキストエリアにオリジナルのHTMLコードを記入して「送信」をクリックすると、特殊文字をエスケープしたコードが 表示されます。コピペして使ってください。

ht020

以上

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA