html - 停止 变成 标记内的超链接

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

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