HTML won't render code block

Question 1

@zzzzBov is right, the browser requires the entities in your markup you want displayed to be encoded.

But according to Chromes source view, it seems your CMS might automatically unescape your markup again when it outputs it:

enter image description here

In this bug report from somebody having the same issue, the maintainer recommends a custom theme function to get around this problem:

In version 0.9 and 1.0 the content of a post and pages are not changed when saved to the database, so if you input html code like text it will be rendered as html, if you want html encoded you will have to input it encoded like <b>text</b>.

To get around this you could use a custom function in the theme functions.php file to handle the content exactly how you like.
function mytheme_article_content() {
    // if you just want the raw content you saved
    return Registry::prop('article', 'html');

    // if you want the content to be parsed with markdown
    $md = new Markdown;
    return $md->transform(Registry::prop('article', 'html'));

    // if you want to encode any html in you posts
    return htmlentities(Registry::prop('article', 'html'), ENT_NOQUOTES, Config::app('encoding'));
}
So you have a few options you can mix around with to get the output you want. And in your template just replace article_html with mytheme_article_content.

I would wager that the last line (return htmlentities...) might be the version you are looking for, so try and delete the two lines above it starting with return and call mytheme_article_content in your template file as the maintainer suggested.

Question 2

The contents of the <pre> tag need to be HTML encoded.

Instead of using <, >, ", and & characters, you'll need to use their encoded counterparts:

< becomes <
> becomes >
" becomes "
& becomes &

Question 3

try to

$('.prettyprint').text('<!DOCTYPE html>');

or

document.querySelector('.prettyprint').innerText('<!DOCTYPE html>');

This automatically encode html entities for a browser

If you are use serverside script language like PHP better to encode it on the server:

PHP:

<pre class="prettyprint lang-html">
   <?=htmlspecialchars('<!DOCTYPE html>');?>
</pre>

Question 4

This must be handled on the server. I guess you have a CMS system with plugins. (Looks like you could be using WP.)

Then try a plugin for code prettyfying. Such a plugin can handle this for you.

If it does not work, then ask the plugin author if s/he wants to fix it.

Question 5

Rather use following HTML tag to do so:

<xmp >
    <!doctype html>
</xmp>

For sure it will work.

Question 6

This <pre class="prettyprint lang-html"><!DOCTYPE html></pre> displays <!DOCTYPE html> ìn my browser (chrome). This is what your page source code is atm

<pre class="lang-html">
     <!DOCTYPE html>
</pre>

Page might not be updated ?

Question 7

You have some malformed HTML which could cause some elements to not render as requested.

enter image description here

Also, where is the source coming from -- a database ?, could you paste exactly what it looks like if you took the data raw from the database (using Navicat or another non-web based tool), and pasted it into Windows Notepad (exactly what is stored .. may have to run it through an online encoder to see)