在HTML中显示HTML代码
有没有一种方法可以在网页上显示HTML代码片段，而不需要用< 和>与> ？
换句话说，有没有一些标签， 不要呈现HTML直到你打结束标签 ？
在HTML中，没有办法逃避angular色。 但是，在正确声明的 XHTML中（这是XML，并且需要向浏览器声明，特别是仅放入DOCTYPE是不够的），可以使用CDATA部分：
<![CDATA[Your <code> here]]>
但是这只适用于XML，而不适用于HTML。
在HTML中，保证在任何地方工作的唯一解决scheme是手动转义代码（分别<和& <和& ）。
HTML的尝试和真正的方法：
- 将
&字符replace为& - 将
<字符replace为< - 将
>replace为> - 也可以用
<pre>和/或<code>标签环绕HTML样本。
最好的办法：
<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的
突出
JSHighlighter
最适合你的链接：
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中的源代码？
已弃用 ，但在FF3和IE8中可用。
<xmp> <b>bold</b><ul><li>list item</li></ul> </xmp>
推荐的：
<pre><code> code here, escape it yourself. </code></pre>
一种天真的方法来显示代码将被包括在一个textarea和添加禁用的属性，所以它不能编辑。
<textarea disabled> code </textarea>
希望帮助别人寻找一个简单的方法来完成的东西..
我使用<xmp>就像这样： http : //jsfiddle.net/barnameha/hF985/1/
在HTML？ 没有。
在XML / XHTML中？ 你可以使用CDATA块。
不赞成使用的<xmp>标签实质上是这样做的，但不再是XHTML规范的一部分。 它应该仍然在所有当前的浏览器中工作。
这是另一个想法，一个黑客/客厅技巧，你可以把代码放在textarea中，就像这样：
<textarea disabled="true" style="border: none;background-color:white;"> <p>test</p> </textarea>
在文本区域内放置尖括号和代码是无效的HTML，并且会在不同的浏览器中导致未定义的行为。 在Internet Explorer中，HTML被解释，而Mozilla，Chrome和Safari则不予理解。
如果你希望它是不可编辑的，看起来不同，那么你可以很容易地使用CSS来devise它。 唯一的问题是，浏览器将在右下angular添加这个小拖动手柄来调整框的大小。 或者，也可以尝试使用input标签。
将代码注入到textarea的正确方法是使用像这样的PHP的服务器端语言：
<textarea disabled="true" style="border: none;background-color:white;"> <?php echo '<p>test</p>'; ?> </textarea>
然后绕过html解释器，并在所有浏览器中一致地将未解释的文本放入textarea。
除此之外，如果使用这种技术，唯一的方法就是自己逃离代码，如果使用静态HTML或使用.NET的HtmlEncode（）等服务器端方法。
这是简单的…使用这个xmp代码
<xmp id="container"> <xmp > <p>a paragraph</p> </xmp > </xmp>
最好的（虽然恼人的）答案是“逃避文本”。
然而，有很多文本编辑器，甚至是独立的小工具，都可以自动完成。 所以如果你不想要的话，你永远都不应该手动转义它（除非它是一个转义和未转义代码的混合体）
快速谷歌search显示我这一个，例如： http : //malektips.com/zzee-text-utility-html-escape-regular-expression.html
我假设：
- 你想写100％有效的HTML5
- 你想把代码片段（几乎）文字放在HTML中
- 特别是
<不应该需要转义
- 特别是
你所有的select都在这棵树上：
- 与HTML语法
- 有五种元素
- 那些被称为“正常元素”（如
<p>）- 不能有一个文字
< - 这将被视为下一个标签或评论的开始
- 不能有一个文字
- void元素
- 他们没有内容
- 你可以把你的HTML在一个数据属性（但这是所有的元素）
- 那将需要JavaScript来将数据移到其他地方
- 在双引号属性中，
"和&thing;需要转义："和&thing;分别
- 原始的文本元素
- 只有
<script>和<style> - 他们永远不会呈现可见
- 但是在Javascript中embedded文本可能是可行的
- Javascript允许带反引号的多行string
- 它可以被dynamic插入
- 在
<script>任何地方都不允许使用文字</script<script>
- 只有
- 可转义的原始文本元素
- 只有
<textarea>和<title> -
<textarea>是包装代码的好select - 在那里写
</html>是完全合法的 - 由于显而易见的原因，不合法的是子string
</textarea- 通过
</textarea或类似的方法来避免这种特殊情况
- 通过
-
&thing;需要转义：&thing;
- 只有
- 外国元素
- 来自MathML和SVG命名空间的元素
- 至lessSVG允许再embeddedHTML …
- 而且CDATA是允许的，所以它似乎有潜力
- 用XML语法
- 由Konrad的答案覆盖
注意： >永远不需要转义。 即使在正常的元素。
您可以使用像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>
有几种方法可以在HTML中转义所有内容 ，但都不是很好。
或者你可以放入一个加载一个普通的旧文本文件的iframe 。
这是大多数情况下最好的方法：
<pre><code> code here, escape it yourself. </code></pre>
我会投票给第一个提出这个build议的人，但是我没有声望。 为了那些试图在互联网上find答案的人，我感到不得不说一些话。
这是我做到的：
$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
如果您的目标是显示您在同一页面上的其他地方执行的一段代码，则可以使用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;” 在目标股利，并写在每个单独的使用“\ r \ n”在每个结尾。
这是一个演示： https : //jsfiddle.net/wphps3od/
这个方法比使用textarea有一个优点：代码将不会像在textarea中那样被重新格式化。 （类似的东西在textarea中完全删除）
它可能无法在任何情况下工作，但在textarea放置代码片段将显示为代码。
如果你不希望它看起来像一个真正的textarea你可以用CSS来devisetextarea。
//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)
