HTML won't render code block

Question

So I'm using Google code prettify with AnchorCMS. All other languages but HTML work. This is what I'm trying to use.

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

But I think that the editor is interpreting the HTML within the <pre> tags and that's why Its not working. Here's what happens when I try to show the above code. And there's this example that I used <pre class="prettyprint lang-js"> on. I'm not really sure what to do now. Any ideas? Also sorry for the direct link to my website. I wouldn't of been able to show it on JSFiddle

you're lucky with js) try for(i=0; i<10; i++); code, it should be breaked too — vp_arth
– vp_arth, Commented Apr 10, 2014 at 20:25
I'm shocked that the title "HTML won't work" was actually accurate and didn't get closed by the stackoverflow moderators. — Parris
– Parris, Commented Apr 19, 2014 at 22:35
The title is accurate within a very limited context which the title doesn't introduce. My immediate reaction was to down-vote it. I'll hold off on that, but I encourage the OP to change the title. — mc0e
– mc0e, Commented Apr 20, 2014 at 15:01

zzzzBov · Accepted Answer · 2014-04-10 20:09:52Z

12

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 &

answered Apr 10, 2014 at 20:09

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3444414 Over a year ago

So it would look like this? <pre class="prettyprint lang-html">

zzzzBov Over a year ago

@user3444414, no, you want the contents of the <pre> tag to use the entities, the <pre> tag itself needs to still be raw HTML.

Idris Over a year ago

This is what I currently have <pre class="prettyprint lang-html"><!DOCTYPE html> </pre> But all I get is a blank code box. As seen here colourity.com/posts/html-doctype-declaration

user3444414 Over a year ago

I just tried doing this on the developer tools since it won't work on the editor. And it still wont work.....

strix25 Over a year ago

is this also true for <code> </code> ? I am seeing same behaviour, but cant encode it in this case

janfoeh · Accepted Answer · 2014-04-20 17:27:47Z

@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.

vp_arth · Accepted Answer · 2014-04-10 20:20:21Z

0

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>

edited Apr 10, 2014 at 20:20

answered Apr 10, 2014 at 20:12

vp_arth

15k4 gold badges43 silver badges72 bronze badges

17 Comments

vp_arth Over a year ago

yes, also wrap it in window.onload=function(){ ... } or $(document).ready(function(){ ... })

vp_arth Over a year ago

use you PHP on the server?

user3444414 Over a year ago

Yes I use PHP on the server

vp_arth Over a year ago

use htmlspecialchars for this on the serverside

user3444414 Over a year ago

Take a look at what I get now. colourity.com/posts/html-doctype-declaration

|

Leo · Accepted Answer · 2014-04-14 01:49:37Z

0

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.

answered Apr 14, 2014 at 1:49

Leo

4,5167 gold badges56 silver badges85 bronze badges

2 Comments

user3444414 Over a year ago

I'm using AnchorCMS as stated in my question. Which doesn't support plugins just yet.

Leo Over a year ago

Oh, sorry, I did not notice. ;-) -- Then follow the advices of zzzzBov and vp_arth (the PHP part). Unfortunately it does not get easier than that.

Rohit Paul · Accepted Answer · 2014-04-14 11:12:48Z

0

Rather use following HTML tag to do so:

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

For sure it will work.

answered Apr 14, 2014 at 11:12

Rohit Paul

3361 gold badge3 silver badges13 bronze badges

2 Comments

Rohit Paul Over a year ago

Will you please elaborate.

Idris Over a year ago

It doesn't display <!DOCTYPE html>

Smi Lee · Accepted Answer · 2014-04-17 17:50:20Z

0

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 ?

answered Apr 17, 2014 at 17:50

Smi Lee

1387 bronze badges

3 Comments

user3444414 Over a year ago

Just updated it to your code, but here's whats happening. Once I save the post it turns into <!DOCTYPE html>

user3444414 Over a year ago

No. The editor gets rid of the <!DOCTYPE html>, so it won't work.

user3444414 Over a year ago

As posted in the bounty description and various other questions.

Kraang Prime · Accepted Answer · 2014-04-20 04:44:22Z

0

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)

answered Apr 20, 2014 at 4:44

Kraang Prime

10.6k11 gold badges66 silver badges133 bronze badges

1 Comment

user3444414 Over a year ago

Its coming from a database. This is what I get <pre class="prettyprint lang-html"><!DOCTYPE html></pre>

Collectives™ on Stack Overflow

HTML won't render code block

7 Answers 7

5 Comments

Comments

17 Comments

2 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

17 Comments

2 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related