html - HTML 代码标签不执行

Question

如何使代码标签不作为实际的 HTML 标签执行，而只是在页面上显示它们。它不能使用<and>功能。例如，该网站如何在代码框内执行此操作？

这个盒子怎么不执行页面上的代码呢？例如。<img src="example.png" />不会显示。

我怎样才能做到这一点？有点像 WordPress 的简码 API，但不是 WordPress？

score 6 · Accepted Answer

使用 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将导致标签被渲染而不是被执行。

score 6 · Accepted Answer

6

尝试：

 <xmp>insert code here</xmp>

于 2013-08-08T16:29:56.550 回答

score 3 · Accepted Answer

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

<textarea>Your HTML markup</textarea>

然后你可以使用CSS来设置它的样式以删除它的边框、制作它readonly或任何你需要的东西。

实际上，这里有显示示例代码的不同方法之间的比较。

score 0 · Accepted Answer

无需特殊字符代码、JavaScript、PHP、<textarea> 或 <xmp>即可轻松优雅地完成此操作。

只需将标签的名称包装在 a<span>中，然后将其包装在 <> 中，如下所示：

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

当浏览器解释它时，它将产生以下内容：

<h1>此文本似乎在 h1 标记中，但未格式化为 h1。</h1>

<edit> 但是，应该注意的是，不同的浏览器可能会以不同的方式处理 < 和 > 的后续实例（例如 << 或 >>），因为 HTML 关于如何处理这些情况是模棱两可的。这就是为什么您应该在跨度周围使用特殊字符代码<而>不是按字面输入 < 和 >。</edit>

以这种方式使用内联 CSS 为运算符和方法名称着色也非常容易，如果您正在编写一个<code>不会自动为特定语言实现语法高亮的块，这将特别有用；<code>我认为应该将标签的一个特性实现为属性或属性。