Coy doesn't like it when a code block has its code split across multiple `code` elements

Information:

• Prism version: Latest
• Plugins: None
• Environment: Browser…?

Description By right, Prism requires code blocks to be written as such:

<pre><code class="language-xxxx"><!-- Insert arbitrary code here --></code></pre>

Most themes are also able to accept the following:

<pre class="language-xxxx"><code><!-- Some code --></code>
<code><!-- More code --></code>
<code><!-- Even more code --></code></pre>

(ie. Multiple code elements within a pre element. Not about which element has class="language-xxxx".)

Most themes, but Coy.

Example

Tomorrow Night	Coy

On Prism’s website, the ‘Basic Usage’ (and ‘Usage with CDNs’) section are meant to be one code chunk, but to accommodate the custom red box (done with <code class="highlight ...">), the entire code chunk is split into a few code elements, and Coy doesn’t like that.

To be clear, having multiple code elements within a pre element is probably not quite the right way to use Prism in the first place (correct me if I’m wrong, though), plus I can’t see why anyone would put multiple code elements in a pre element, because the ‘look’ of a code block is done with the pre element. (But maybe someone out there has a use case for it? I’d consider it an edge case, I guess.) So while this looks like a fault of Coy’s, it’s not exactly Coy’s fault either. It just so happens that having multiple code elements in a pre element works well with every other theme (I think).

To fix this, we should probably target the CSS on Prism’s site, specifically the pre > code.highlight rule. I think we can use a span element instead to do the red box, but I’m not super sure because I haven’t tried messing around with the browser’s dev tools. I would try, but I need to do something else I’ve been putting off 😛 But I will probably try it later, haha.

[mAAdhaTTah]

Yeah, the HTML5 spec recommends it as implemented. I don’t see a variation for multiple code elements, and Prism isn’t designed assuming that’s a possible code structure.

[RunDevelopment]

Good find.

Yes, that’s very much non-standard use. From what I know Prism only supports <pre><code> blocks and assumes that the pre has no other children (other than children added by plugins). Is that correct @LeaVerou @Golmote @mAAdhaTTah?

I think the easiest way to fix this problem is to just use Line Highlight. We could also use Keep markup and wrap the relevant sections with <mark> tags. I’ll make a PR for the fix later today.