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, Apr 10 '14 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, Apr 19 '14 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, Apr 20 '14 at 15:01

score 12 · Answer 1 · answered Apr 10 '14 at 20:09

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 '14 at 20:09

zzzzBov

174,988
54
320
367

So it would look like this? `<pre class="prettyprint lang-html">` – Apr 10 '14 at 20:17

1

@user3444414, no, you want the **contents** of the `

` tag to use the entities, the `` tag itself needs to still be raw HTML.

– zzzzBov Apr 10 '14 at 21:16

This is what I currently have `
```
<!DOCTYPE html>
```
` But all I get is a blank code box. As seen here http://colourity.com/posts/html-doctype-declaration
– Idris Apr 10 '14 at 22:07
I just tried doing this on the developer tools since it won't work on the editor. And it still wont work..... – Apr 11 '14 at 19:20
is this also true for ? I am seeing same behaviour, but cant encode it in this case – strix25 May 04 '23 at 07:03

vp_arth · Answer 2 · 2014-04-10T20:20:21.463

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 '14 at 20:20

answered Apr 10 '14 at 20:12

vp_arth

14,461
4
37
66

yes, also wrap it in `window.onload=function(){ ... }` or `$(document).ready(function(){ ... })` – vp_arth Apr 10 '14 at 20:18
use you PHP on the server? – vp_arth Apr 10 '14 at 20:19
Yes I use PHP on the server – Apr 10 '14 at 20:19
use [htmlspecialchars](http://docs.php.net/manual/en/function.htmlspecialchars.php) for this on the serverside – vp_arth Apr 10 '14 at 20:21
Take a look at what I get now. http://colourity.com/posts/html-doctype-declaration – Apr 10 '14 at 20:25
And `$('.prettyprint').text(' ');` is only the `!DOCTYPE html`. I'm going to be typing tons of lines of code on the posts and don't really want to do that every time I post – Apr 10 '14 at 20:26
I'm using a CMS. So Its dynamic content. Not a static PHP file – Apr 10 '14 at 20:27
`document.querySelector('pre').innerText = (' ');` worked – vp_arth Apr 10 '14 at 20:28
are you really wrote ` – vp_arth Apr 10 '14 at 20:30
But will I have to change `document.querySelector('pre').innerText = (' ');` the ` ` part every time I post HTML? I just want to use HTML like any other language – Apr 10 '14 at 20:31
need ` – vp_arth Apr 10 '14 at 20:31
That's what I did. And I got the same issue. So I tried changing it to ` – Apr 10 '14 at 20:32
Check the source. That's what I did. – Apr 10 '14 at 20:33
` =htmlspecialchars(' ');?>` in your code... extra space, but php short tags not worked, try `');?>` also – vp_arth Apr 10 '14 at 20:35
I got rid of the space and its still the same. And `');?>` didn't work either. – Apr 10 '14 at 20:37
I see... php doesn't work here... I think you are edit a template... You should find where in php code you fill this template with code example – vp_arth Apr 10 '14 at 20:39
and wrap this variable to htmlspecialchars – vp_arth Apr 10 '14 at 20:40

score 0 · Answer 3 · answered Apr 14 '14 at 01:49

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 '14 at 01:49

Leo

4,136
6
48
72

I'm using AnchorCMS as stated in my question. Which doesn't support plugins just yet. – Apr 14 '14 at 02:19
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. – Leo Apr 14 '14 at 03:34

score 0 · Answer 4 · answered Apr 14 '14 at 11:12

0

Rather use following HTML tag to do so:

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

For sure it will work.

answered Apr 14 '14 at 11:12

Rohit Paul

336
1
3
13

Will you please elaborate. – Rohit Paul Apr 15 '14 at 04:02
It doesn't display – Idris Apr 15 '14 at 11:13

score 0 · Answer 5 · answered Apr 17 '14 at 17:50

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 '14 at 17:50

Smi Lee

138
7

Just updated it to your code, but here's whats happening. Once I save the post it turns into ` ` – Apr 17 '14 at 19:14
No. The editor gets rid of the `<!DOCTYPE html>`, so it won't work. – Apr 17 '14 at 20:44
As posted in the bounty description and various other questions. – Apr 17 '14 at 20:45

score 0 · Answer 6 · answered Apr 20 '14 at 04:44

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 '14 at 04:44

Kraang Prime

9,981
10
58
124

Its coming from a database. This is what I get `
```
<!DOCTYPE html>
```
`
– Apr 20 '14 at 15:33

janfoeh · Accepted Answer · 2014-04-20T17:27:47.900

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

HTML won't render code block

7 Answers7