-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Coy doesn't like it when a code block has its code split across multiple code elements #3162
Description
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 :P But I will probably try it later, haha.

