HTML代码标签无法执行

Question

如何使代码标记不作为实际的HTML标记执行，只显示在页面上。它无法使用<和>函数。例如，这个网站是如何在代码框内完成的？

此框如何不执行页面上的代码？ 例如。 <img src="example.png" />不会显示。

我怎样才能做到这一点？ 有点像WordPress的短代码API而不是WordPress上的短代码？

Answer 1

使用HTML特殊字符代码

我知道你说如果没有它们你想要做到这一点，但实际上没有优雅的方法可以做到这一点。几乎所有服务器端语言都有一些方法可以自动转换HTML字符。

PHP示例：

<pre>
    <span id='code-span'>    
        <?= htmlspecialchars($code); ?>
    </span>
</pre>

如果您没有任何服务器端语言，可以使用Javascript（jQuery）执行此操作：

var myCode = "<b>This is not bold</b>";
$('span#code-span').text(myCode);

使用text代替html会导致代码被曝光而不是被执行。

Answer 2

尝试：

 <xmp>insert code here</xmp>

Answer 3

不是你的问题的答案，而是另一种选择（因为除了使用过时的xmp element来做你所要求的事情之外别无他法）。您可以使用textarea来显示任意代码。只是：

<textarea>Your HTML markup</textarea>

然后你可以使用CSS来设置它的样式以删除它的边框，使其成为readonly或任何你需要的。

实际上，显示示例代码here的不同方法之间存在比较。

Answer 4

这可以非常轻松而优雅地完成，无需特殊字符代码，JavaScript，PHP，＆lt; textarea＆gt;或＆lt; xmp＆gt;。

只需将标记的名称包装在<span>中，然后将其包装在＆lt;＆gt;中，如下所示：

<<span>h1</span>>This text appears to be in a h1 tag but is not formatted as h1.<<span>/h1</span>>

当浏览器解释它时会生成以下内容：

＆lt; h1＆gt;此文字显示在h1标记中，但未格式化为h1。＆lt; / h1＆gt;

＆LT;编辑＆gt; 然而，应该注意的是，不同的浏览器可以处理＆lt;和＆gt; （例如＆lt;＆lt;＆gt;＆gt;）不同，因为关于如何处理这些案例的HTML是不明确的。这就是为什么应该在您的跨度周围使用特殊字符代码<和>而不是字面输入＆lt;和＆gt;。＆lt; / edit＆gt;

使用内联CSS以这种方式对运算符和方法名称进行着色也非常容易，如果您在<code>块中写入并不自动实现语法，这将非常有用突出特定语言;我认为应该将<code>标记的一个功能实现为属性或属性。