Docs: Storybook 7 config example #325
Description
Styles fix
Wrap all components in class sb-unstyled. In fact, I'm happy with the situation in which only my styles are applied on the page.
<Meta of={BannerStories} />
<div className="sb-unstyled">
# h1
<CH.Code>
\`\`\`python one.py
print("Hello, one!")
\`\`\`
\`\`\`python two.py
print("Hello, two!")
\`\`\`
</CH.Code>
</div>Config with remarkPlugins
// .storybook/preview.ts
import '@code-hike/mdx/styles.css';
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-webpack5';
import { remarkCodeHike } from '@code-hike/mdx';
import theme from 'shiki/themes/dark-plus.json' assert { type: 'json' };
export const config: StorybookConfig = {
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)', '../src/**/*.@(mdx)'],
addons: ['@storybook/addon-essentials', '@nrwl/react/plugins/storybook'],
framework: {
name: '@storybook/react-webpack5',
options: {},
},
webpackFinal: async (config, options) => {
const rule = (config.module?.rules || []).find((rule) =>
typeof rule != 'string'
? rule.test?.toString().endsWith('\\.mdx$/')
: false
);
(rule as any).use[0].options.mdxCompileOptions.remarkPlugins.push([
remarkCodeHike,
{ theme, lineNumbers: false, showCopyButton: true },
]);
return config;
},
};