Почему код отображается в блоке кода?

Question

Я хочу отображать HTML на веб-странице. Я завернул в блок кода, но последние две строки все еще выполняются / отображаются. Что я делаю не так?

<pre><code>
div {background: brown;}
div.bluebg {background: blue;}
<div>default brown background</div>
<div class="base">blue background</div>

Последние две строки были заключены в теги div. Я заметил, что stackoverflow удаляет их. Я не хочу лишать их, но, видимо, изменяю с помощью < and >. Есть ли список тегов, которые нужно изменить, чтобы отобразить их на веб-странице? Есть ли онлайн-программа, которая может преобразовать их в приведенный выше синтаксис?

Answer 1

Я не думаю, что [эти теги] означают то, что вы думаете, что они означают.

<pre> позволяет сохранить пробелы и переводы строк. <code> позволяет вам семантически указать, что код отображается на вашей странице. Оба имеют несколько стилей по умолчанию (например, применение шрифта фиксированной ширины), но ни один из них не делает ничего, чтобы экранировать <, >, & или ", поэтому любой неэкранированный HTML-код, помещенный между теги будут обрабатываться как HTML. Вам придется использовать <, >, & и ". Вот страница, где вы можете вставить текст и экранировать его: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/

Answer 2

Вам нужно заменить < на <, > на > и & на & и все.

Answer 3

Судя по содержанию вашего поста, я предполагаю, что вы говорите об отображении кода в Markdown при переполнении стека.

Не переносите код в <pre> и <code>, просто сделайте отступ в 4 пробела, например:

div {background: brown;}
div.bluebg {background: blue;}
<div>default brown background</div>
<div class="base">blue background</div>

Уценка фактически анализирует HTML (как минимум этих тегов ), как вы можете видеть. Вне уценки вам все равно придется изменить <div> на <div>, чтобы он все равно корректно отображался - использование кода / pree не останавливает рендеринг кода.