Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problems with several code blocks in the same page #3363

Closed
BartolomeSintes opened this issue Mar 3, 2022 · 5 comments
Closed

Problems with several code blocks in the same page #3363

BartolomeSintes opened this issue Mar 3, 2022 · 5 comments

Comments

@BartolomeSintes
Copy link

Information:

  • Prism version: 1.27 downloaded from prismjs.com
  • Plugins: Copy to Clipboard + Toolbar (and also Command line, Line numbers, Show invisibles and Keep markup)
  • Environment: Browser

Description
I have updated prism.js from version 1.25 into 1.27 (with Copy to Clipboard plugin) and prism does not work properly now.
The html source code of my pages is like this:

<div class="codigo">
        <pre>
<code class="language-python">import webbrowser

If I use the prism version 1.25 I downloaded last September, this code is shown in the Firefox code inspector like this:

<div class="codigo">
    <div class="code-toolbar">
        <pre class="language-python" tabindex="0">
<code class="language-python">import webbrowser

But if I use prism version 1.27, this code is shown in the Firefox code inspector like this:

<div class="codigo">
    <div class="code-toolbar">
        <pre class="language-none" tabindex="0">
<code class="language-python language-none">import webbrowser

I you need aditional information or file samples, please ask for them and I would provide them the best I can.

Thanking you in advance,
Bartolome Sintes

@RunDevelopment
Copy link
Member

Could you please provide a minimal example project reproducing your problem?

@BartolomeSintes
Copy link
Author

I have tried to create a minimal example. Writing the example, I have realised that the problem arises when there are several blocks. The Copy to clipboard plugin is not involved.
This page uses v 1.25 and works OK
https://mclibre.org/tmp/prism-github-issue-3363/prism-1-25.html
This page uses v 1.27 and the second block is not OK
https://mclibre.org/tmp/prism-github-issue-3363/prism-1-27.html
Zip file containing both examples:
prism-github-issue-3363-1.zip
Both prism.js files include several languages and plugins (Command line, Line numbers, Show invisibles, Keep markup)

@BartolomeSintes BartolomeSintes changed the title Problems with Copy to clipboard plugin Problems there are several code blocks in the same page Mar 3, 2022
@BartolomeSintes BartolomeSintes changed the title Problems there are several code blocks in the same page Problems with several code blocks in the same page Mar 3, 2022
@RunDevelopment
Copy link
Member

RunDevelopment commented Mar 4, 2022

I see the problem:

image

The problem is copy-language-python. The old regex (used in v1.25.0) incorrectly detects this class as a language-xxxx class. This bug was fixed in #3167.

The real problem is that Prism tries to highlight that code block in the first place. This is because the CSS selector we use works on substrings and not CSS classes. That's a bug. I'll file a separate issue for this (#3364).

Does this explain your problem?

@BartolomeSintes
Copy link
Author

Yes, thank you very much for your explanation.
I was using two versions of prism.js, one with the copy-to-clipboard plugin and another one without it. I have realised now that it just worked by chance. I can get the same result using only the version with the plugin and adding a class when I would want to hide the toolbar.

@RunDevelopment
Copy link
Member

Glad to see that your issue has been resolved!

I can get the same result using only the version with the plugin and adding a class when I would want to hide the toolbar.

Yes. Pretty much all plugins have a way to turn them off for specific code blocks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants