остановка превращения <a>в гиперссылку в тегах <code>

Question

Я пытаюсь добавить <a> и <img>, чтобы фактический текст появился на моей странице. Не ссылка.

Итак, я хочу, чтобы фактическое значение HTML отображалось на моей странице, например:

В настоящее время появляется мертвое изображение ... Я думал * Один только 1010 * предотвратил это и просто показал простой 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>

Я прошу прощения, если этот вопрос был задан ранее, но я изо всех сил пытаюсь выразить свой вопрос словами, чтобы найти хороший ответ .

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>

, даже если это работает, Рекомендуется превратить < и > в < & > (список 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;

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>

Обратите внимание, вы можете сделать как < , так и >, но вам действительно нужно только первое чтобы он работал

Answer 3

Попробуйте вставить < для < и > для >.