HTML Code Block Issue For Better Solution

[hlaporthein]

Hello All,

I found prismjs yesterday when googling. It is really awesome. It's features meet all my requirements. But I have a little problems in html markup.

For example if I would like to create below html code section

Code No.1

<pre>
    <code class="language-markup">
        <p class="2020" id="ok2o">
            one
        </p>
    </code>
</pre>

The above code only give me result one, I have no idea why paragraph tag is missing. After that I found out the problems, I would need to do HTML Escape to work like below code (No.2)

Code No.2

<pre>
    <code class="language-markup">
        &lt;p class="2020" id="ok2o"&gt;
            one
        &lt;/p&gt;
    </code>
</pre>

Let's say, if the above code.2 method is correct, how should I solve over escaping fifty html tags? I know there are some html escape convert tools. In facts, I know that html escape tools is good if I need to escape more html tags.

So, My Question is

Is using html escape convert tools correct method?
Does prismjs have better solution for that?
Or... Should I create javascript function (like code No.3) to search and escape? ( I think that is not good approach.). Please give me advice and Thanks.

Code No.3

String.prototype.escape = function() {
    var tagsToReplace = {
        '<': '&lt;',
        '>': '&gt;'
    };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};

jQuery(document).ready(function($){

    $('code').each(function(){
    var  org_val = $(this).html(),
         esc_val = org_val.escape();
         $(this).html(esc_val);
    });
});

[Golmote]

You are right. HTML code needs to be escaped to be displayed properly in Prism. Note that this is not related to Prism but to the way the browsers interpret content inside pre and code.

[LeaVerou]

I’ve had this problem myself and I use <script type="text/plain">...</script> elements.
Then I use a small script to convert them to <pre><code>, which runs before Prism inits:

$$("script[type='text/plain']").forEach(script=>{
    var pre = document.createElement("pre");
    var code = document.createElement("code");
    code.className = script.className;
    pre.appendChild(code);
    script.parentNode.insertBefore(pre, script);
    code.appendChild(script);
});

Note that this depends on Prism’s behavior of removing markup. If using the keep markup plugin, it will need a few adjustments.

I should clean up the code and add it as a plugin, since that's such a common request.

[hlaporthein]

Thanks All guys. Have a great day :)

[LeaVerou]

Btw @hlaporthein there is now a beta plugin here: http://prismjs.com/plugins/unescaped-markup/
It's experimental so not listed in the download page.
Feel free to try it out and let us know what you think!