CSS breaks syntax highlighting in Storybook docs

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 ❤️ , 😄 🐱

[buonzz]

i’ve got the same problem …

[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