search

PrismJS / prism

Lightweight, robust, elegant syntax highlighting.
https://prismjs.com
MIT License
12.28k stars 1.3k forks source link

Content is only shown in one column #598

Closed TheZoker closed 9 years ago

TheZoker commented 9 years ago

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_

Golmote commented 9 years ago

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

loganfranken commented 9 years ago

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!

Golmote commented 9 years ago

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 commented 9 years ago

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?

TheZoker commented 9 years ago

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)

Golmote commented 9 years ago

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 ?

TheZoker commented 9 years ago

I re-downloaded it and same issue :/

Golmote commented 9 years ago

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

TheZoker commented 9 years ago

Your right, was cached in my browser :) Thank you very much!