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

#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 bug(addon-docs): Code styling preview bug in CSF format #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]

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

storybook/lib/components/src/blocks/Source.tsx

Lines 44 to 69 in c7479f6

	const Source: FunctionComponent<SourceProps> = (props) => {
	const { error } = props as SourceErrorProps;
	if (error) {
	return <EmptyBlock>{error}</EmptyBlock>;
	}
	const { language, code, dark, format, ...rest } = props as SourceCodeProps;
	const syntaxHighlighter = (
	<StyledSyntaxHighlighter
	bordered
	copyable
	format={format}
	language={language}
	className="docblock-source"
	{...rest}
	>
	{code}
	</StyledSyntaxHighlighter>
	);
	if (typeof dark === 'undefined') {
	return syntaxHighlighter;
	}
	const overrideTheme = dark ? themes.dark : themes.light;
	return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
	};

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

[peiris]

@shilman Any update on this?

[quantizor]

@shilman would love to see configuration for this land in v7