HTML won't render code block

Asked 10/4, 2014 at 20:7 Answered 20/4, 2014 at 16:5

Solved javascript jquery html syntax-highlighting google-code-prettify

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

Mandal answered 10/4, 2014 at 20:7 Comment(3)

you're lucky with js) try for(i=0; i<10; i++); code, it should be breaked too – Moiety 10/4, 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. – Totipalmate 19/4, 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. – Eccrine 20/4, 2014 at 15: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.

Infidelity answered 20/4, 2014 at 16:5 Comment(0)

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 &

Phosphor answered 10/4, 2014 at 20:9 Comment(5)

So it would look like this? <pre class="prettyprint lang-html"> – Mandal 10/4, 2014 at 20:17

@user3444414, no, you want the contents of the <pre> tag to use the entities, the <pre> tag itself needs to still be raw HTML. – Phosphor 10/4, 2014 at 21:16

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 – Crayton 10/4, 2014 at 22:7

I just tried doing this on the developer tools since it won't work on the editor. And it still wont work..... – Mandal 11/4, 2014 at 19:20

is this also true for <code> </code> ? I am seeing same behaviour, but cant encode it in this case – Osmunda 4/5, 2023 at 7:3

try to

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

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>

Moiety answered 10/4, 2014 at 20:12 Comment(17)

yes, also wrap it in window.onload=function(){ ... } or $(document).ready(function(){ ... }) – Moiety 10/4, 2014 at 20:18

use you PHP on the server? – Moiety 10/4, 2014 at 20:19

Yes I use PHP on the server – Mandal 10/4, 2014 at 20:19

use htmlspecialchars for this on the serverside – Moiety 10/4, 2014 at 20:21

Take a look at what I get now. colourity.com/posts/html-doctype-declaration – Mandal 10/4, 2014 at 20:25

And $('.prettyprint').text('<!DOCTYPE html>'); 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 – Mandal 10/4, 2014 at 20:26

I'm using a CMS. So Its dynamic content. Not a static PHP file – Mandal 10/4, 2014 at 20:27

document.querySelector('pre').innerText = ('<!DOCTYPE html>'); worked – Moiety 10/4, 2014 at 20:28

are you really wrote <?php= ? – Moiety 10/4, 2014 at 20:30

But will I have to change document.querySelector('pre').innerText = ('<!DOCTYPE html>'); the <!DOCTYPE html> part every time I post HTML? I just want to use HTML like any other language – Mandal 10/4, 2014 at 20:31

need <?php echo or <?= here – Moiety 10/4, 2014 at 20:31

That's what I did. And I got the same issue. So I tried changing it to <?php – Mandal 10/4, 2014 at 20:32

Check the source. That's what I did. – Mandal 10/4, 2014 at 20:33

<? =htmlspecialchars('<!DOCTYPE html>');?> in your code... extra space, but php short tags not worked, try <?php echo htmlspecialchars('<!DOCTYPE html>');?> also – Moiety 10/4, 2014 at 20:35

I got rid of the space and its still the same. And <?php echo htmlspecialchars('<!DOCTYPE html>');?> didn't work either. – Mandal 10/4, 2014 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 – Moiety 10/4, 2014 at 20:39

and wrap this variable to htmlspecialchars – Moiety 10/4, 2014 at 20:40

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.

Cambrai answered 14/4, 2014 at 1:49 Comment(2)

I'm using AnchorCMS as stated in my question. Which doesn't support plugins just yet. – Mandal 14/4, 2014 at 2: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. – Cambrai 14/4, 2014 at 3:34

Rather use following HTML tag to do so:

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

For sure it will work.

Castalia answered 14/4, 2014 at 11:12 Comment(2)

Will you please elaborate. – Castalia 15/4, 2014 at 4:2

It doesn't display <!DOCTYPE html> – Crayton 15/4, 2014 at 11:13

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 ?

Pyrogenic answered 17/4, 2014 at 17:50 Comment(3)

Just updated it to your code, but here's whats happening. Once I save the post it turns into <!DOCTYPE html> – Mandal 17/4, 2014 at 19:14

No. The editor gets rid of the <!DOCTYPE html>, so it won't work. – Mandal 17/4, 2014 at 20:44

As posted in the bounty description and various other questions. – Mandal 17/4, 2014 at 20:45

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)

Rabblement answered 20/4, 2014 at 4:44 Comment(1)

Its coming from a database. This is what I get <pre class="prettyprint lang-html"><!DOCTYPE html></pre> – Mandal 20/4, 2014 at 15:33

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

Infidelity answered 20/4, 2014 at 16:5 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags