Question

我想在html中显示html代码，我从SO本身尝试solution，但这没有用，或者可能是我遗漏了一些东西。然后，我尝试了以下语法，但没有帮助（只有点击此处应用）。

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

任何人都帮我弄明白，我的做法有什么不对？

Answer 1

你必须替换所有'＆lt;'包含<和所有'＆gt;'的字符与>

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

Answer 2

曾经有一个xmp标记来支持此功能 - 此标记现已弃用，但仍受所有主流浏览器支持。

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

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

Answer 3

Tomer's answer是正确的，这就是我这样做的方式。但是有一种使用JavaScript的替代方案。您可以删除元素的HTML，然后使用createTextNode()将其添加回文本。将元素传递给此函数：

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

jsfiddle.net/rh7RW

Answer 4

如果你需要着色片段， jQuery.snippet提供了一个很好的着色工具。

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

Answer 5

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

您可以转换您的HTML代码online。

如果您使用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+ */
}

Answer 6

我已经尝试了所有方法，pre / code并不是真正的解决方案，但是我们还有其他3个简单的解决方案

textarea

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

xmp

<xmp>
    keyi1xiedaimama? <a href="#">aoeueouoe</a>      
</xmp>

createTextNode

info.appendChild(document.createTextNode(texa.value));

如何在html页面中显示html源代码

6 个答案: