Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS Modules - CustomClass not applied to <pre>?

See original GitHub issue

Information:

Prism version: Latest on PrismJS doc page, 1.21.0
Plugins: CustomClass
Environment: Browser

Description I am using CSS Modules so the CustomClass plugin worked a treat (e.g. token___foo) however I noticed that <pre> was still using language-XX rather than language-XX___foo.

Example Looks like the doc page https://prismjs.com/plugins/custom-class/#example has the same issue as below:

I wonder if a hook is missing as wrap seems to apply for inside the code snippet only.

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

RunDevelopmentcommented, Aug 10, 2020

I wonder if this doc page would benefit from a blurb indicating that the plugin applies to the tokens only?

That’s true. I’ll add it.

1reaction

RunDevelopmentcommented, Aug 7, 2020

I did notice that every class (except for language-xxxx) is correctly applied even for the line-numbers:

What? Whatever is causing this, it’s not our Custom Class plugin. It can’t do that.

Out of curiosity, what makes it troublesome if CustomClass is applied for language-xxxx?

Currently, there’s no (standard) way to change the class names added (or removed) to (or from) the code and pre elements. We’d have to add new functionality to Core specifically for this.

I can see that language-xxxx are part of the CSS modules already.

I’m sorry, What is that supposed to mean? Prism itself can’t really handle CSS modules, AFAIK, but I also know almost nothing about CSS modules. Could you please explain what you mean in more detail?

Also, regarding line-numbers___TeamID: The Line numbers plugin won’t be active with that class. Are you sure that the plugin still works?

Top Results From Across the Web

Some of CSS modules styles are not being applied

I have a hard time applying one of my CSS rules using CSS modules. Here is React code and CSS styles. All rules...

composeClasses should append keys from classes, not ...

So if my custom class name why I pass as prop is applied before the internal one, and the rule is to use...

Adding CSS | Enact

In this part we've explored applying CSS classes to React components, importing locally-scoped classes from a CSS module, and using expressions in JSX...

How to Edit, Customize, and Override Bootstrap CSS to Suit ...

The first way — using CSS overrides— applies to sites using BootstrapCDN or the pre-compiled versions of Bootstrap.

Tailwind CSS from Zero to Hero - Dark Mode, JIT & More!

The two utility classes provided are sr-only and not-sr-only. sr-only: this is used to hide any HTML element visually but not from screen ......