Что касается экранирования символов, вам нужно экранировать «<» (как <code><) и «&» (как &). Если вы используете автоматизированные инструменты, убедитесь, что они обрабатывают эти символы.
Чтобы сохранить форматирование (разрывы строк и интервалы), вы можете использовать <pre> разметку. Лучше всего использовать так, чтобы первая строка начиналась сразу (на той же строке) после тега <pre>, а за последней строкой сразу (без переноса строки) следовал конечный тег </pre>. В противном случае некоторые браузеры могут отображать лишние пустые строки.
Разметка <pre> подразумевает системно-зависимый моноширинный шрифт по умолчанию. Это, конечно, можно изменить в CSS. Разметка также подразумевает уменьшение размера шрифта в большинстве браузеров, по-видимому, для управления свойствами моноширинных шрифтов; поэтому вы можете установить значение размера шрифта (может быть 100%) в соответствии с вашим дизайном.
Кроме того, вы можете обернуть код внутри любого элемента блока (например, <div>) и установить пробел: предварительно для него в CSS. Это означает, что форматирование сохраняется, но шрифт и размер шрифта те же, что и для окружающего текста (если вы не установили его явно).
Вы можете дополнительно использовать <code> разметку, чтобы указать содержимое в виде компьютерного кода. Он также устанавливает шрифт моноширинный и уменьшенный размер, но в остальном чисто логический. Если вы хотите указать используемый язык, то class = language-html будет способом, предложенным в черновиках HTML5. Это не имеет прямого влияния как таковое; это просто упрощает последовательное оформление примеров кода HTML и распознает их при обработке JavaScript, если это необходимо.
Пример:
<pre><code class=language-html><div>
<p>
<span>Hello world</span>
</p>
</div>