CSS breaks syntax highlighting in Storybook docs

[aareman]

Describe the bug
The CSS from the Gentellela (a bootstrap admin template) overides the .tags and pre/code css selectors which breaks the syntax highlighting in storybook docs.

gentellela include in preview-head.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/gentelella/1.4.0/css/custom.min.css" rel="stylesheet">

Screenshots
If applicable, add screenshots to help explain your problem.

Potential Solution
use hash classes instead of 'tag' 'text' etc...

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Environment Info:

  System:
    OS: Linux 5.0 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
  Binaries:
    Node: 11.15.0 - /usr/bin/node
    npm: 6.7.0 - /usr/bin/npm
  npmPackages:
    @storybook/addon-a11y: ^5.2.8 => 5.2.8
    @storybook/addon-docs: ^5.3.0-rc.1 => 5.3.0-rc.1
    @storybook/addon-storyshots: ^5.2.8 => 5.2.0

Thank you for storybook ❤️ , 😄 🐱

[aareman]

perhaps https://github.com/storybookjs/storybook/blob/next/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx#L137

changing that to true would fix it?

---

scratch that... I tried it via react dev tools and it doesn't work. 😢

[aareman]

As an update the code/pre classes in bootstrap 3/4 both are part of this in addition to gentellela.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[LeBenLeBen]

Coming to this for the same bug but different cause, our very own CSS is conflicting in the same way. It would be great if these items classes gets generated with a random name so it would never conflicts with other styles just like other Storybook elements.

Looks similar to #8758

[buonzz]

i've got the same problem ...

[lentilz]

I am also still experiencing this on v7.1.0-alpha.16

[superstooge]

This also happens with Storybook 7.6.17 for react-webpack5 + Bulma