Search code examples
javascriptjqueryhtmlsyntax-highlightinggoogle-code-prettify

HTML won't render code block


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


Solution

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