add minimal repro for source highlight error

.storybook/main.ts

@@ -1,18 +1,13 @@
 import { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-  stories: [
-    '../src/docs/Introduction.mdx',
-    '../src/docs/*.mdx',
-    '../src/**/*.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../src/**/Bug.mdx'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-    '@storybook/addon-coverage',
-    '@storybook/addon-designs',
+    // '@storybook/addon-a11y',
+    // '@storybook/addon-coverage',
+    // '@storybook/addon-designs',
   ],
   typescript: {
     reactDocgen: 'react-docgen',

.storybook/preview.tsx

@@ -1,68 +1,68 @@
-import type { Preview } from '@storybook/react'
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+// import type { Preview } from '@storybook/react'
+// import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 
-import { globalDecorators } from './decorators'
-import { viewports as breakpoints } from '../src/styles/breakpoints'
-import { DocsContainer, DocsContainerProps } from '@storybook/blocks'
-import { ThemeProvider } from 'styled-components'
-import { lightTheme } from '../src/styles/theme'
+// import { globalDecorators } from './decorators'
+// import { viewports as breakpoints } from '../src/styles/breakpoints'
+// import { DocsContainer, DocsContainerProps } from '@storybook/blocks'
+// import { ThemeProvider } from 'styled-components'
+// import { lightTheme } from '../src/styles/theme'
 
-// Create custom viewports using widths defined in design tokens
-const breakpointViewports = Object.keys(breakpoints).reduce((acc, key) => {
-  acc[`breakpoint${key}`] = {
-    name: `Breakpoint - ${key}`,
-    styles: {
-      width: `${breakpoints[key as keyof typeof breakpoints]}px`,
-      // Account for padding and border around viewport preview
-      height: 'calc(100% - 20px)',
-    },
-    type: 'other',
-  }
-  return acc
-}, {} as typeof INITIAL_VIEWPORTS)
+// // Create custom viewports using widths defined in design tokens
+// const breakpointViewports = Object.keys(breakpoints).reduce((acc, key) => {
+//   acc[`breakpoint${key}`] = {
+//     name: `Breakpoint - ${key}`,
+//     styles: {
+//       width: `${breakpoints[key as keyof typeof breakpoints]}px`,
+//       // Account for padding and border around viewport preview
+//       height: 'calc(100% - 20px)',
+//     },
+//     type: 'other',
+//   }
+//   return acc
+// }, {} as typeof INITIAL_VIEWPORTS)
 
-const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    viewport: {
-      viewports: {
-        ...breakpointViewports,
-        ...INITIAL_VIEWPORTS,
-      },
-    },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    docs: {
-      toc: true,
-      source: {
-        excludeDecorators: true,
-      },
-      container: (props: DocsContainerProps) => (
-        <ThemeProvider theme={lightTheme}>
-          <DocsContainer {...props} />
-        </ThemeProvider>
-      ),
-    },
-  },
-  globalTypes: {
-    theme: {
-      name: 'Theme',
-      description: 'Theme for the components',
-      defaultValue: 'light',
-      toolbar: {
-        icon: 'circlehollow',
-        items: [
-          { value: 'light', icon: 'circlehollow', title: 'light' },
-          { value: 'dark', icon: 'circle', title: 'dark' },
-          { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
-        ],
-      },
-    },
-  },
-  decorators: globalDecorators,
-}
-export default preview
+// const preview: Preview = {
+//   parameters: {
+//     actions: { argTypesRegex: '^on[A-Z].*' },
+//     viewport: {
+//       viewports: {
+//         ...breakpointViewports,
+//         ...INITIAL_VIEWPORTS,
+//       },
+//     },
+//     controls: {
+//       matchers: {
+//         color: /(background|color)$/i,
+//         date: /Date$/,
+//       },
+//     },
+//     docs: {
+//       toc: true,
+//       source: {
+//         excludeDecorators: true,
+//       },
+//       container: (props: DocsContainerProps) => (
+//         <ThemeProvider theme={lightTheme}>
+//           <DocsContainer {...props} />
+//         </ThemeProvider>
+//       ),
+//     },
+//   },
+//   globalTypes: {
+//     theme: {
+//       name: 'Theme',
+//       description: 'Theme for the components',
+//       defaultValue: 'light',
+//       toolbar: {
+//         icon: 'circlehollow',
+//         items: [
+//           { value: 'light', icon: 'circlehollow', title: 'light' },
+//           { value: 'dark', icon: 'circle', title: 'dark' },
+//           { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },
+//         ],
+//       },
+//     },
+//   },
+//   decorators: globalDecorators,
+// }
+// export default preview

src/Bug.mdx

@@ -0,0 +1,16 @@
+# Usage
+
+To use this button. please install the following packages:
+```
+yarn add @mycompany/button
+```
+
+Then use it in your application such as:
+```jsx
+import { Button } from '@mycompany/button'
+
+export const Page = () => {
+  const getFood = () => {}
+  return <Button onClick={getFood}>Click me</Button>
+}
+```