在 <code> 标签内停止 <a> 变成超链接

Question

我想在我的网页上添加 <a> 和 <img> ，以便实际文本显示在页面上，而不是链接。

所以我希望页面上显示实际的HTML，像这样：

目前只显示了一个无法访问的图片... 我以为仅使用 <code> 可以防止这种情况，只显示普通的HTML代码？

Anyway, this is my current code, I want it to literally echo out <a href="/hello"><img style="" src="/hello.png" /></a> in plain text.

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>

如果这个问题之前已经被问过了，我很抱歉，但我很难用言辞表达我的问题以找到一个好的答案。

- MattHodson

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>

- G-Cyrillus

Answer 2

"

<pre>和<code>只是处理文本显示的方式...使用等宽字体。（<pre>的额外优点是不需要使用<br/>标签来表示新行。）

但是，该代码中的任何元素仍将由浏览器按其自己的方式呈现。

您需要对标签中的任何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>
&lt;a href="/hello">&lt;img style="" src="/hello.png" />&lt;/a>
</code>
</pre>

注意，您可以同时使用<和>，但实际上只需要前者就能使其正常工作。

- freefaller

Answer 3

尝试插入<代替<，以及>代替>。

- Ciber_Turtle