Storybook: Addon-docs: Make syntax-highlighter theme configurable

[patricklafrance]

Is your feature request related to a problem? Please describe.

React-Syntaxt-Highlighter support a lot of Prism themes. It would be nice if Storybook provide a way for the user to pick the theme of is choice.

Describe the solution you'd like

One solution would be to make it configurable through SB theme system.

Something like:

// my-custom-sb-theme.js

import { create } from '@storybook/theming/create';
import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';

export default create({
  base: 'light',

  ....

  prismTheme: darcula
});

import { addons } from '@storybook/addons';
import myCustomTheme from './my-custom-sb-theme';

addons.setConfig({
  theme: myCustomTheme
});

Additional context

https://github.com/storybookjs/storybook/issues/9640 could be tackled with this story

[Smolations]

@shilman Is there any workaround for this currently? I am not theming storybook at all and the default syntax highlighting is basically unusable. I have no idea who designed this particular theme, but it is _bad_:

[shilman]

@Smolations i think that's a CSS collision between the prism theme and your CSS. Here's how it should look:

So in my estimation there are two separate issues:

1. Figuring out how to scope the prism themes (see #9718)
2. Adding configuration support (this issue)

Help wanted on either issue!

[Smolations]

Well I'll be a monkey's uncle...shame on me for not checking that in the first place! 🙈

Sorry for wasting your time on this. Keep up the good work! 😁

[stale[bot]]

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!

[manuelmeister]

@shilman I tried to add this in https://github.com/storybookjs/storybook/blob/c7479f6e513a7d279a24e5d2e5235c6e32068921/lib/components/src/blocks/Source.tsx#L44-L69
but I couldn't figure out how to get a theme var.

[shilman]

Try withTheme hook? https://github.com/storybookjs/storybook/blob/next/addons/viewport/src/Tool.tsx#L126