HTMLでHTMLスニペットを表示する

どのように私は、各を交換することなく、WebページのHTMLスニペットを表示することができ<て<と>して>？

つまり、終了タグを押すまでHTMLをレンダリングしないタグはありますか？

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

• & なので &
• < なので <

（ちなみに、脱出する必要はありませんが>、対称性の理由で脱出することがよくあります。）

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

このようにあなたのコードをラッピングなど他のすべてのソリューション、<textarea>または（非推奨）<xmp>要素は、壊れます。¹

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

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

ただし、これはHTMLではなくXMLでのみ機能します。また、コードに終了区切り文字を含めることはできないため、これは完全な解決策ではありません]]>。したがって、XMLでさえ、最も単純で最も堅牢なソリューションは、エスケープによるものです。

¹適例：

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>

HTMLの実証済みの方法：

1. &文字を置き換える&
2. <文字を置き換える<
3. >文字を置き換える>
4. オプションで、HTMLサンプルをタグ<pre>や<code>タグで囲みます。

最良の方法：

<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;
}

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

レインボー （非常に完璧）

かわいがる

構文ハイライター

ハイライト

JSHighlighter

あなたに最適なリンク：

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でソースコードを強調表示する方法

コードを表示する単純な方法の1つは、それをtextareaに含め、無効にした属性を追加して編集できないようにすることです。

<textarea disabled> code </textarea>

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

非推奨ですが、FF3およびIE8で機能します。

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

推奨：

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

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

非推奨 <xmp>タグは基本的にそれを行いますが、XHTML仕様の一部ではなくなりました。現在のすべてのブラウザでも動作します。

ここに別のアイデアがあります。ハック/パーラーのトリックです。次のようにコードをテキストエリアに配置できます。

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

山かっことこのようなコードをテキスト領域内に配置すると、HTMLが無効になり、異なるブラウザーで未定義の動作が発生します。Internet ExplorerではHTMLが解釈されますが、Mozilla、Chrome、Safariでは解釈されません。

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

textareaにコードを挿入する正しい方法は、たとえば次のPHPのようなサーバー側言語を使用することです。

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

次に、htmlインタープリターをバイパスし、未解釈のテキストをすべてのブラウザーで一貫してtextareaに配置します。

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

HTMLで？番号。

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

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

私が想定し：

• 100％有効なHTML5を書きたい
• コードスニペット（ほとんど）をHTMLに配置したい
  • 特に<エスケープする必要はありません

すべてのオプションはこのツリーにあります：

• HTML構文
  • 5種類の要素があります
  • 「通常の要素」と呼ばれるもの（ <p>）
    • リテラルを持つことはできません <
    • 次のタグまたはコメントの開始と見なされます
  • 空の要素
    • 彼らにはコンテンツがありません
    • HTMLをデータ属性に配置できます（ただし、これはすべての要素に当てはまります）
    • データを別の場所に移動するにはJavaScriptが必要です
    • 二重引用符で囲まれた属性で"、&thing;エスケープする必要がある："および&thing;それぞれ
  • 生のテキスト要素
    • <script> そして <style>唯一
    • それらは表示されません
    • しかしあなたのテキストをJavascriptに埋め込むことは現実的かもしれません
    • Javascriptでは、バックティック付きの複数行の文字列が可能です
    • その後、動的に挿入できます
    • リテラル</scriptはどこでも許可されていません<script>
  • 回避可能な生のテキスト要素
    • <textarea> そして <title>唯一
    • <textarea> コードをラップするのに適した候補です
    • 書くことは完全に合法です </html>そこ
    • 部分文字列は合法ではありません </textarea明らかな理由から
      • </textareaまたはこのような特殊なケースをエスケープする
    • &thing; エスケープする必要があります： &thing;
  • 異元素
    • MathMLおよびSVG名前空間の要素
    • 少なくともSVGは再びHTMLの埋め込みを許可します...
    • CDATAが許可されているため、可能性があるようです
• XML構文
  • コンラートの答えでカバー

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

目標が同じページの別の場所で実行しているコードのチャンクを表示することである場合は、textContentを使用できます（pure-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/

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

結局のところ、（迷惑ではありますが）最良の答えは「テキストをエスケープする」ことです。

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

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

<textarea ><?php echo htmlentities($page_html); ?></textarea>

私にとってはうまくいきます。

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

単純<textarea>に試してみただけではtextarea、親タグが誤って閉じられ、残りのHTMLソースが親ドキュメントに表示される可能性がある閉じたタグが存在する可能性があるため、うまく機能しない可能性があります。

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

このアプローチには、利点や欠点、あるいは同じ結果を達成するためのより良い方法があるかもしれません。もしそうなら、私はそれらから学びたいのでコメントしてください:)

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;
?>

次に、$strhtmlencoded の値をダンプします。

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

これは簡単なトリックで、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>

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

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

実際には、これを行う方法があります。これには制限（1つ）がありますが、100％標準であり、（xmpのように）非推奨ではなく、機能します。

そして、それは些細なことです。ここにあります：

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

説明させてください。まず、通常のHTMLコメントは、ブロック全体が解釈されるのを防ぐために機能します。タグを簡単に追加できます。それらはすべて無視されます。解釈からは無視されますが、innerHTML！残っているのは、内容を取得し、前後のコメントトークンをフィルター処理することです。

（少なくとも-制限）を除いて、（少なくとも私のChromeでは）コメントのネストはサポートされていないため、HTMLコメントを中に入れることはできません。最初に '->'を押すと、ショーが終了します。

まあ、それは厄介な小さな制限ですが、テキストにHTMLコメントがない場合は、まったく問題になりません。そして、1つの構成要素をエスケープしてから、それらの全体をエスケープする方が簡単です。

さて、その奇妙なLlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo文字列は何ですか？それはハッシュのようなランダムな文字列であり、ブロックで使用される可能性は低く、使用されますか？ここでは、コンテキスト、だ、なぜ私はそれを使用しているが。私の場合、1つのDIVのコンテンツを取得し、それをShowdownマークダウンで処理してから、出力を別のdivに割り当てました。アイデアは、HTMLファイルにインラインでマークダウンを記述し、ブラウザーで開くだけで、その場でロード時に変換されるというものでした。したがって、私の場合、<!--に変換され<p><!--</p>、コメントは適切にエスケープされました。動作しましたが、画面を汚染しました。したがって、正規表現で簡単に削除するには、ランダムな文字列を使用しました。これがコードです：

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

そしてそれは機能します。

誰かが興味があれば、この記事はこのテクニックを使って書かれています。気軽にダウンロードして、HTMLファイルを確認してください。

それはあなたがそれを何のために使っているかによります。ユーザー入力ですか？次にを使用して<textarea>、すべてをエスケープします。私の場合、そしておそらくあなたの場合もそうですが、私は単にコメントを使用し、それが仕事をします。

マークダウンを使用せず、タグからそのまま取得したい場合は、さらに簡単です。

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

それを取得するJavaScriptコード：

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

すべてを脱出する方法はいくつかありますHTMLでますが、どれも良いません。

またはiframe、プレーンな古いテキストファイルをロードするを配置することもできます。

これはほとんどの状況で断然最良の方法です。

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

最初に提案した人に賛成票を投じたはずですが、評判はありません。インターネットで答えを見つけようとする人のために、私は何かを言わざるを得ませんでした。

これは私がそれをした方法です：

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

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

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

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

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

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

実際のテキストエリアのように見せたくない場合は、CSSを使用してテキストエリアのスタイルを設定できます。

これは少しハックですが、次のようなものを使用できます。

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}

<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

そのCSSを使用すると、ブラウザーは本文内にスクリプトを表示します。タイプが不明なため、このスクリプトは実行されませんtext/html。<script>終了</script>タグを含めない限り、内の特殊文字をエスケープする必要はありません。

私はこのようなものを使用して、ページの本文に実行可能なJavaScriptを表示します。これは、一種の「文芸的プログラミング」です。

この質問にはさらに多くの情報があります。。

 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)

ここで一緒に働くいくつかの答えの組み合わせ：

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)

<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>