Skip to content

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

@hoonweiting

Description

@hoonweiting

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
image image

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions