stopping <a> turning into a hyperlink within <code> tags

user_9990572 0
Viewed 88

I'm trying to add an <a> and <img> so the actual text appears on my page. Not the link.

So I want the actual HTML to show on my page, like this: enter image description here

Currently, a dead image appears... I thought <code> alone prevented this, and just showed the plain 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>

I apologise if this question has been asked before, but I'm struggling to put my question into words to find a good answer.

css html
3 Answers

There was the <xmp> tag to print plain text (plaintext) at screen , but this not the best option, use html entities to type the brackets.

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>

even if that works , Best practice is to turn < and > into &lt; & &gt; ( list https://www.freeformatter.com/html-entities.html ) to avoid scripts going buggy while ging through the 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>

user_24420990

<pre> and <code> just deal with the way in which the text is displayed... using a monospace font. (<pre> has the extra advantage of not requiring <br/> tags for new lines.)

However, any elements within that code will still be rendered by the browser as it sees fit.

You need to escape any HTML within the tags for it to be displayed as you're expecting...

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>

Note, you can do both &lt; and &gt; but you only really need the former for it to work

user_9303930

Try inserting a &lt; for < and a &gt; for >.

user_126108500
Related