0

I want to display html code in html,I tried solution from SO itself, but that was not helpful or may be I'm missing something. Then, I tried following syntax, but not helpful (only getting Click Here to Apply).

<pre><code><span style='font-size:20px'>Click Here to Apply </span></code></pre>

Anyone help me to figure out, what's wrong in my approach ?

4

6 回答 6

3

您必须将所有 '<' 字符替换为，&lt;并将所有 '>' 替换为&gt;

请注意，如果这是您所寻求的，这将不会提供代码着色。

于 2013-08-04T06:52:30.567 回答
2

曾经有一个xmp标签来支持这一点——这个标签现在已被弃用，但仍被所有主要浏览器支持。

如果没有其他东西适合您的需求，您可以使用它。

<pre><xmp><span style='font-size:20px'>Click Here to Apply </span></xmp></pre>
于 2013-08-04T07:07:48.503 回答
2

托默的回答是正确的，这就是我会这样做的方式。但是还有一个使用 JavaScript 的替代方案。您可以删除元素的 HTML，然后使用createTextNode(). 将元素传递给此函数：

function revealElementHTML(el) {
    var html = el.innerHTML;
    el.innerHTML = "";
    el.appendChild(document.createTextNode(html));
}

jsfiddle.net/rh7RW

于 2013-08-04T07:08:36.427 回答
0

如果您需要彩色片段，jQuery.snippest 提供了一个不错的着色工具。

http://www.steamdev.com/snippet/

于 2013-08-04T07:13:29.993 回答
0

您应该使用 ascii 字符来显示您的代码，或者您必须在 gilly3 的答案中使用 javascript。

您可以在线转换您的 html 代码。

如果您使用 php，请使用htmlentities。

最后，您可以使用以下 css 对其进行样式设置。

pre {
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}
于 2013-08-04T07:15:07.510 回答
0

我已经尝试了所有这些，前/代码并不是真正的解决方案，但我们还有其他 3 个简单的解决方案

  1. 文本区域
<textarea name="tex" id="texa" cols="30" rows="10"class="one textarea">
        here is ok, mama? <a href="#">aoeueouoe</a> 

</textarea>

texa.value+='<br>\n\n'+i;
  1. xmp
<xmp>
    keyi1xiedaimama? <a href="#">aoeueouoe</a>      
</xmp>
  1. 创建文本节点
info.appendChild(document.createTextNode(texa.value));
于 2020-04-13T08:20:14.213 回答