Prism: Content is only shown in one column

Created on 18 Jun 2015 · 9Comments · Source: PrismJS/prism

Here is the code I tested:

<!DOCTYPE html>
<html lang="en">
<head>

<script>
    // Just a lil’ script to show off that inline JS gets highlighted
    window.console && console.log('foo');
</script>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" />
<title>Prism</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="themes/prism.css" data-noprefix />
<script src="prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="http://www.google-analytics.com/ga.js" async></script>
</head>
<body>

And here is the output:
img_2015 06 18_22h10m37s_004_

Source

TheZoker

Most helpful comment

I think you might fix your issue with a little hook like the following (to be inserted after Prism main script):

Prism.hooks.add('before-highlight', function(env) {
    env.element.innerHTML = env.element.innerHTML.replace(/<br\s*\/?>/g,'\n');
    env.code = env.element.textContent.replace(/^(?:\r?\n|\r)/,'');
});

@LeaVerou Should we handle this in the official release?

Golmote on 19 Jun 2015

👍8 😄2 ❤1 🎉1

All 9 comments

Thanks for reporting.
Could you provide an online page reproducing the problem?

Golmote on 18 Jun 2015

Hey @TheZoker, I _think_ your new lines might be getting stripped.

If you look at the source code (view-source:http://demo.comboot.io/viewtopic.php?style=2&f=2&t=7&p=66#p66) from the original issue you reported:

<div class="content">
                            <dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;">Select all</a></dt><dd><pre class="line-numbers"><code class="language-markup">&lt;?php <br />&nbsp;Print &quot;Hello, World!&quot;;<br />&nbsp;?&gt; <br /><br />&nbsp;&lt;?php <br />&nbsp;Echo &quot;Hello, World!&quot;;<br />&nbsp;?&gt;<br /></code></pre></dd></dl>
                        </div>

It looks like it's all in one line in the markup, so Prism will display it in kind.

Let me know if I'm off base, though!

loganfranken on 18 Jun 2015

Oh, sorry I didn't see the other issue on the other repo.
It looks like your line feeds are replaced with <br /> tags, which are stripped during highlighing (like any other HTML tags in the code block).

Golmote on 18 Jun 2015

I think you might fix your issue with a little hook like the following (to be inserted after Prism main script):

Prism.hooks.add('before-highlight', function(env) {
    env.element.innerHTML = env.element.innerHTML.replace(/<br\s*\/?>/g,'\n');
    env.code = env.element.textContent.replace(/^(?:\r?\n|\r)/,'');
});

@LeaVerou Should we handle this in the official release?

Golmote on 19 Jun 2015

👍8 😄2 ❤1 🎉1

Hi, thanks for the fast answer :)
Just included the code, but now its totaly messed :P
http://demo.comboot.io/viewtopic.php?style=2&f=2&t=34
http://demo.comboot.io/viewtopic.php?style=2&f=2&t=7&p=66#p66 (code completly missing)

TheZoker on 23 Jun 2015

The version of Prism you're using seems quite outdated. Have you tried to redownload it from http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript&plugins=line-numbers+autolinker ?

Golmote on 23 Jun 2015

I re-downloaded it and same issue :/

TheZoker on 23 Jun 2015

Be sure to empty your browser cache. I can no longer reproduce the issue on the two links you posted previously:

http://demo.comboot.io/viewtopic.php?style=2&f=2&t=34

http://demo.comboot.io/viewtopic.php?style=2&f=2&t=7&p=66#p66