web-dev-qa-db-ja.com

HTMLでHTMLコードを表示する

各<を&lt;および>を&gt;に置き換える必要なしに、WebページにHTMLコードスニペットを表示する方法はありますか？

言い換えれば、というタグは終了タグを押すまでHTMLをレンダリングしないのですか？

htmltags
174
Steven

いいえ、ありません。適切なHTMLでは、一部の文字をエスケープする以外に方法はありません。

  • &を&amp;として
  • <を&lt;として

（ちなみに、>をエスケープする必要はありませんが、対称性のためによく使われます。）

そしてもちろん、（a）空白と改行を保存し、（b）コード要素としてマークアップするために、結果のエスケープされたHTMLコードを<pre><code>…</code></pre>で囲む必要があります。

コードを<textarea>または（廃止予定の）<xmp>要素にラップするなど、他のすべての解決策は失敗します。1

ブラウザにXMLとして宣言されているXHTML（HTTP Content-Typeヘッダを介して！ - 単にDOCTYPEを設定するだけでは不十分）には、代わりにCDATAセクションを使用できます。

<![CDATA[Your <code> here]]>

しかし、これはXMLでは機能し、HTMLでは機能しません。コードには終了区切り文字の]]>を含める必要がないため、これでも完全な解決策とは言えません。そのため、XMLでも最も単純で最も堅牢な解決策はエスケープです。

1 適例：

textarea {border: none; width: 100%;}
<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>
73
Konrad Rudolph

HTMLのための実証済みの真の方法：

  1. &文字を&amp;に置き換えます
  2. <文字を&lt;に置き換えます
  3. >文字を&gt;に置き換えます
  4. 必要に応じて、HTMLサンプルを <pre> または <code> タグで囲みます。
144
Dolph

最善の方法：

<xmp>
// your codes ..
</xmp>

古いサンプル：

サンプル1：

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

サンプル2：

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

サンプル3：（実際にコードブロックを "引用"している場合、マークアップは以下のようになります）

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

素敵なCSSのサンプル：

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

構文強調表示コード（プロ用）：

虹（とてもパーフェクト）

きれい

syntaxhighlighter

ハイライト

JSハイライト

あなたへの最高のリンク：

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

HTMLでソースコードを強調表示する方法は？

137
Erfan Safarpoor

コードを表示する単純な方法としては、textareaにそれを含め、disabled属性を追加して編集できないようにすることが考えられます。

<textarea disabled> code </textarea>

誰かが物事を成し遂げるための簡単な方法を探しているのを助けることを願っています..

41
Krunal

非推奨 、FF3とIE8で動作します。

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

おすすめ：

<pre><code>
    code here, escape it yourself.
</code></pre>
24
s_hewitt

私はこのように<xmp>を使いました： http://jsfiddle.net/barnameha/hF985/1/

14
barnameha

それは非常に簡単です....このxmpコードを使用してください

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
6
Kamlesh

HTMLでは？いいえ.

XML/XHTMLでは？ CDATAブロックを使うことができます。

6
cletus

私が想定し：

  • 100％有効なHTML5を書きたい
  • あなたはHTMLのコードスニペット（ほぼ）をリテラルに置きたい。
    • 特に<はエスケープする必要はありません

あなたのすべてのオプションはこの木にあります：

  • hTMLシンタックスを含む
    • 5種類の要素があります
    • それらは「通常の要素」と呼ばれます（<p>のように）
      • リテラル<を持つことはできません
      • それは次のタグまたはコメントの始まりと見なされます
    • 無効な要素
      • 内容がありません
      • hTMLをデータ属性に入れることができます（ただし、これはすべての要素に当てはまります）。
      • データを他の場所に移動するにはJavaScriptが必要です。
      • 二重引用符で囲まれた属性では、"と&thing;はエスケープする必要があります。それぞれ&quot;と&amp;thing;
    • 生のテキスト要素
      • <script>および<style>のみ
      • それらは表示されません
      • しかしあなたのテキストをJavascriptに埋め込むことは実行可能かもしれません
      • Javascriptはバッククォート付きの複数行の文字列を可能にします
      • それはそれから動的に挿入することができます
      • </scriptのどこにもリテラル<script>は使用できません
    • エスケープ可能な生のテキスト要素
      • <textarea>および<title>のみ
      • <textarea>は、コードをラップするのに適した候補です。
      • そこに</html>を書くことは全く合法です
      • 明白な理由で部分文字列</textareaは合法ではありません
        • この特別な場合は&lt;/textareaなどでエスケープする
      • &thing;はエスケープする必要があります：&amp;thing;
    • 異物
      • mathMLとSVGの名前空間からの要素
      • 少なくともSVGは再びHTMLの埋め込みを許可します...
      • cDATAはそこで許可されているので、それは可能性があるようです
  • xMLシンタックスを持つもの

注：>はエスケープする必要がありません。通常の要素でもそうではありません。

5
Robert Siemer

非推奨の<xmp>タグは本質的にそれを行いますが、もはやXHTML仕様の一部ではありません。それは現在のすべてのブラウザではまだ動作するはずです。

これは別のアイデア、ハック/パーラーのトリックです。あなたはそのようにテキストエリアにコードを入れることができます：

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

このような山括弧とコードをテキスト領域内に置くことは無効なHTMLであり、異なるブラウザでは未定義の動作を引き起こします。 Internet ExplorerではHTMLが解釈されますが、Mozilla、Chrome、およびSafariでは解釈されません。

編集不可能で外観を変えたい場合は、CSSを使用して簡単にスタイルを設定できます。唯一の問題は、ブラウザがボックスのサイズを変更するために右下隅にその小さなドラッグハンドルを追加することです。あるいは、代わりに入力タグを使用してみてください。

テキストエリアにコードを挿入する正しい方法は、次のようなサーバーサイドの言語を使用することですPHP。

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

それからhtmlインタプリタを迂回し、未解釈のテキストをすべてのブラウザで一貫してtextareaに入れます。

それ以外の唯一の方法は、静的HTMLの場合はコードを自分自身でエスケープするか、そのようなテクノロジを使用する場合は.NETのHtmlEncode（）などのサーバーサイドメソッドを使用することです。

5
GShenanigan

究極的には（最も厄介ではあるが）最も良い答えは「テキストからの脱出」です。

しかしながら、これを自動的に行うことができる多くのテキストエディタ、あるいはスタンドアロンのミニユーティリティさえあります。そうしたくないのであれば、手動でエスケープする必要はありません（エスケープされたコードとエスケープされていないコードが混在していない限り...）

たとえば、クイックGoogle検索でこれが表示されます。 http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

3
Stephen R

同じページの別の場所で実行しているコードの集まりを表示することを目的としている場合は、textContentを使用できます（純粋なjsで、よくサポートされています： http://caniuse.com /＃feat = textcontent ）

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

結果を複数行にフォーマットするには、CSSスタイルを "white-space：pre;"に設定する必要があります。ターゲットdivで、それぞれの最後に "\ r\n"を使用して行を個別に書き込みます。

これがデモです。 https://jsfiddle.net/wphps3od/

この方法は、テキストエリアを使用するよりも利点があります。コードは、テキストエリアと同じように再フォーマットされません。 （&nbsp;のようなものはテキストエリアで完全に削除されます）

3
Timothy Kanski

生のテキストを挿入するためにPHPのようなサーバーサイドの言語を使うことができます：

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

それから$str htmlencodedの値をダンプします。

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>
2
kta

これはほとんどの状況ではるかに最良の方法です。

<pre><code>
    code here, escape it yourself.
</code></pre>

私はそれを提案した最初の人に投票したでしょうが、私は評判がありません。私は人々がインターネット上で答えを見つけようとしているために何かを言うことを強いられたと感じました。

1
xdaxdb
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

エスケープされたHTMLを返します

1
Govind Singh

HTMLで すべてをエスケープする する方法はいくつかありますが、どれもいい方法ではありません。

あるいは、プレーンテキストファイルをロードするiframeを入れることもできます。

1
BCS

これは簡単なトリックです、そして私はSafariとFirefoxでそれを試しました

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

これは次のように表示されます。

enter image description here

ライブで見ることができます ここ

1
Ramtin

これが私のやり方です。

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
1
techiegirl
<textarea ><?php echo htmlentities($page_html); ?></textarea>

私のためにうまくいきます。

「Alexander's提案を覚えておいて、これが私がこれが良いアプローチだと思う理由です」

普通の<textarea>を試しただけではうまくいかないかもしれません。なぜなら、親タグを誤って閉じて、親文書上の残りのHTMLソースを表示してしまう可能性がある閉じtextareaタグがあるからです。

htmlentitiesを使用すると、< >などの該当するすべての文字がHTMLエンティティに変換され、リークの可能性がなくなります。

この方法には利点や欠点、あるいは同じ結果を得るためのより良い方法があるかもしれません。

1
Anupam
<textarea readonly> code </textarea>

OR

<textarea disabled> code </textarea>

テキスト領域内の文字列を選択してコピーすることに興味がある場合は、 'readonly'属性を持つ1番目の属性を使用してください。

データの選択やコピーに興味がない場合は、2番目のものを使用してください。つまり、情報を表示するだけの場合は。

0
Micklo_Nerd

あなたが試すことができます：

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>
0
Brendan

すべての状況で機能するわけではありませんが、コードスニペットをtextarea内に配置すると、コードとして表示されます。

実際のテキストエリアのように見たくない場合は、CSSでテキストエリアをスタイルすることができます。

0
Drew Thomas