如何在网页上显示HTML片段,而不需要将每个<替换为&lt;>和&gt;?

换句话说,是否有一个标记表示在点击结束标记之前不呈现HTML ?


当前回答

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

对我来说很好。

“记住亚历山大的建议,这就是为什么我认为这是一个很好的方法”

如果我们只是尝试朴素的<textarea>,它可能并不总是工作,因为可能会关闭textarea标签,这可能会错误地关闭父标签,并在父文档上显示HTML源代码的其余部分,这看起来很尴尬。

使用htmlentities将所有适用的字符(如< >)转换为HTML实体,从而消除了任何泄漏的可能性。

这种方法可能有好处或缺点,也可能有更好的方法来实现相同的结果,如果是这样,请评论,因为我很想从中学习:)

其他回答

如果您正在寻找与框架一起工作的解决方案。

const code = `
 <div>
  this will work in react
 <div>
`
<pre>
  <code>{code}</code>
</pre>

你可以用css给它一个漂亮的外观:

pre code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}

一种简单的方法来显示代码将包括它在一个文本区域和添加禁用属性,所以它是不可编辑的。

<textarea disabled> code </textarea>

希望这能帮助那些寻找简单方法完成工作的人。


但是警告,这不会为你转义标签,正如你在这里看到的(下面显然是行不通的):

textarea残疾> < 这是创建textarea的代码: textarea > < textarea > < / textarea > < /

它可能并不适用于所有情况,但将代码片段放在文本区域内将它们显示为代码。

如果你不想让它看起来像一个实际的文本区域,你可以用CSS样式文本区域。

我认为:

你想要编写100%有效的HTML5 你想把代码片段(几乎)文字放在HTML中 特别是<应该不需要转义

你所有的选项都在这棵树里:

with HTML syntax there are five kinds of elements those called "normal elements" (like <p>) can't have a literal < it would be considered the start of the next tag or comment void elements they have no content you could put your HTML in a data attribute (but this is true for all elements) that would need JavaScript to move the data elsewhere in double-quoted attributes, " and &thing; need escaping: &quot; and &amp;thing; respectively raw text elements <script> and <style> only they are never rendered visible but embedding your text in Javascript might be feasable Javascript allows for multi-line strings with backticks it could then be inserted dynamically a literal </script is not allowed anywhere in <script> escapable raw text elements <textarea> and <title> only <textarea> is a good candidate to wrap code in it is totally legal to write </html> in there not legal is the substring </textarea for obvious reasons escape this special case with &lt;/textarea or similar &thing; needs escaping: &amp;thing; foreign elements elements from MathML and SVG namespaces at least SVG allows embedding of HTML again... and CDATA is allowed there, so it seems to have potential with XML syntax covered by Konrad's answer

 

注意:>从来不需要转义。甚至在正常元素中也没有。

已弃用,但适用于FF3和IE8。

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

推荐:

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