Como alternativa a solução de escapar/substituir os caracteres pode-se usar <textarea>
para exibir o código. Basta utilizar a propriedade readonly
e remover as bordas do elemento:
textarea {
border: none;
resize: none
}
<textarea readonly rows='10' cols='40'>
<!doctype html>
<html lang='pt-br'>
<head>
<title>StackOverflow pt</title>
</head>
<body>
<!-- ... -->
</body>
</html>
</textarea>
Somente a como curiosidade: existia a tag <xmp>
que permitia exibir texto sem interpretá-lo como HTML. Em alguns navegadores, o código abaixo ainda pode funcionar. Lembrando que é uma tag obsoleta e seu uso é desencorajado, o snippet é somente a título de curiosidade mesmo:
<xmp>
<!doctype html>
<html lang='pt-br'>
<head>
<title>StackOverflow pt</title>
</head>
<body>
<!-- ... -->
</body>
</html>
</xmp>