阻止 <a> 变成 <code> 标签内的超链接

Question

我正在尝试添加一个<a>，<img>因此实际文本会出现在我的页面上。不是链接。

所以我希望实际的 HTML 显示在我的页面上，如下所示：

目前，出现了一个死图像......我认为<code>单独阻止了这一点，并且只显示了纯html？

无论如何，这是我当前的代码，我希望它以<a href="/hello"><img style="" src="/hello.png" /></a>纯文本形式显示出来。

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* 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+ */
    background-color: #f5f5f5;
    margin: 20px;
    padding: 20px;
    color: #f9f9f9;
    background-color: #222;
    text-shadow: 0 1px 0 #000;
    border-radius: 8px;
    border-bottom: 1px solid #555;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4) inset, 0 0 20px rgba(0,0,0,0.2) inset;
    font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

<pre>
<code>
<a href="/hello"><img style="" src="/hello.png" /></a>
</code>
</pre>

如果之前有人问过这个问题，我深表歉意，但我正在努力将我的问题变成文字以找到一个好的答案。

Answer 1

在 screen 上有<xmp>打印纯文本 ( plaintext)的标签，但这不是最佳选择，请使用 html 实体键入括号。

pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* 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+ */
  background-color: #f5f5f5;
  margin: 20px;
  padding: 20px;
  color: #f9f9f9;
  background-color: #222;
  text-shadow: 0 1px 0 #000;
  border-radius: 8px;
  border-bottom: 1px solid #555;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4) inset, 0 0 20px rgba(0, 0, 0, 0.2) inset;
  font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

<pre>
<code>
<xmp>
<a href="/hello"><img style="" src="/hello.png" /></a>
</xmp>
</code>
</pre>

即使有效，最佳实践是将<并>转换为<&>（列出https://www.freeformatter.com/html-entities.html）以避免脚本在通过 DOM 时出错。

pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* 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+ */
  background-color: #f5f5f5;
  margin: 20px;
  padding: 20px;
  color: #f9f9f9;
  background-color: #222;
  text-shadow: 0 1px 0 #000;
  border-radius: 8px;
  border-bottom: 1px solid #555;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4) inset, 0 0 20px rgba(0, 0, 0, 0.2) inset;
  font: 16px/24px 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

<pre>
<code>
	&lt;a href="/hello"&gt;&lt;mg style="" src="/hello.png" /&gt;&lt;/a&gt;
</code>
</pre>