have to add class to <pre> too with WordPress + W3Totalcache about prism HOT 9 CLOSED

I'm having the same issue.

This works correctly :

<pre><code class="language-css">p { color: red }</code></pre>

Whilst this failed at highlighting syntax :

<pre><code class="language-none">p { color: red }</code></pre>

I have to set the class on the <pre> tag to make it work :

<pre class="language-none"><code>p { color: red }</code></pre>

from prism.

Since Prism doesn’t have this issue out of the box, it sounds like an issue with the WP plugin. Anyone know its author so we can @mention him/her here?

from prism.

Not sure this has something to do with WordPress. See this JS Bin : http://jsbin.com/aduvun/1/

Note that this happens on Chrome 26.0.1410.65 and Safari 6.0.4 (7536.29.13). Not tested on other browsers.

from prism.

Oh, maybe I misunderstood the issue. Well of course you need to define the language somewhere, otherwise Prism wouldn’t know how to highlight it.
Some syntax highlighters auto-detect languages, but this is usually done by brute force: Trying to highlight with every available language and counting the number of resulting tokens. I think it’s pretty inefficient.

from prism.

Sorry, I think I have poorly expressed myself. The issue is not really auto-detecting of languages, but setting a default highlighting when a <code> tag has an undefined language setted in its class.

See the second example, when class="language-none" is setted on the <code> tag, the text loses the dark background color (it is kind of difficult to notice it on the screenshot because it's almost white on white). However if I set class="language-none" on the <pre> tag it works perfectly.

Maybe that's the intended behaviour, but it looks odd to me.

from prism.

To be clear, it looks like the WordPress plugin just takes care of adding the Prism assets to the page:
http://plugins.svn.wordpress.org/prism-syntax-highlighter/trunk/wp-prism.php

The real issue here (as @iamdto explained) is that the following two examples render exactly the same:

<pre class="language-css"><code>p { color: red }</code></pre>

<pre><code class="language-css">p { color: red }</code></pre>

While the following two examples render differently:

<pre class="language-none"><code>p { color: red }</code></pre>

<pre><code class="language-none">p { color: red }</code></pre>

(They match @iamdto's results from above)

I think this is all due to the following line of CSS:
https://github.com/loganfranken/prism/blob/gh-pages/themes/prism.css#L55

Removing the :not(pre) > appears to fix it. I can put a PR for this unless there are any objections.

from prism.

8030db9 actually fixed this as well (nice work @Golmote!):
https://jsfiddle.net/za1qg99x/

Looks like this can be closed!

from prism.

Indeed. Thanks!

from prism.

So cool, seriously didn't think this would get picked up, amazing work! <3

from prism.