Repository: storybook
Issue: [Bug]:  GFM enablement not working for web-components in storybook 2
Labels: bug,needs triage

### Describe the bug

Good afternoon,

Following the guide to enable the GFM with MDX2 (https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm)  to enable gfm features like table is not working, after follow the configuration it still not rendering the tables inside the MDX2.

I tested in version 7.0.22 and also 7.1.0 alpha version, the last tests is attached to reproduce the issue.

Thanks in advance.

### To Reproduce

[default-ts.zip](https://github.com/storybookjs/storybook/files/11789753/default-ts.zip)

```javascript
// main.js
import remarkGfm from 'remark-gfm';

/** @type { import('@storybook/web-components-vite').StorybookConfig } */
const config = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', 
  {
    name: '@storybook/addon-essentials',
    options: {
      docs: false,
    }
  },
  // Other addons go here
  {
    name: '@storybook/addon-docs',
    options: {
      mdxPluginOptions: {
        mdxCompileOptions: {
          remarkPlugins: [remarkGfm],
        },
      },
    },
  }],
  framework: {
    name: '@storybook/web-components-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};
export default config;
```

```json
// package.json
{
  "name": "before-storybook",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "lit": "^2.7.2"
  },
  "devDependencies": {
    "@storybook/addon-docs": "^7.1.0-alpha.36",
    "@storybook/addon-essentials": "^7.1.0-alpha.36",
    "@storybook/addon-links": "^7.1.0-alpha.36",
    "@storybook/blocks": "^7.1.0-alpha.36",
    "@storybook/web-components": "^7.1.0-alpha.36",
    "@storybook/web-components-vite": "^7.1.0-alpha.36",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remark-gfm": "^3.0.1",
    "storybook": "^7.1.0-alpha.36",
    "typescript": "^5.0.2",
    "vite": "^4.3.9"
  },
  "resolutions": {
    "@storybook/addon-a11y": "7.1.0-alpha.36",
    "@storybook/addon-actions": "7.1.0-alpha.36",
    "@storybook/addon-backgrounds": "7.1.0-alpha.36",
    "@storybook/addon-controls": "7.1.0-alpha.36",
    "@storybook/addon-docs": "7.1.0-alpha.36",
    "@storybook/addon-essentials": "7.1.0-alpha.36",
    "@storybook/addon-highlight": "7.1.0-alpha.36",
    "@storybook/addon-interactions": "7.1.0-alpha.36",
    "@storybook/addon-jest": "7.1.0-alpha.36",
    "@storybook/addon-links": "7.1.0-alpha.36",
    "@storybook/addon-mdx-gfm": "7.1.0-alpha.36",
    "@storybook/addon-measure": "7.1.0-alpha.36",
    "@storybook/addon-outline": "7.1.0-alpha.36",
    "@storybook/addon-storyshots": "7.1.0-alpha.36",
    "@storybook/addon-storyshots-puppeteer": "7.1.0-alpha.36",
    "@storybook/addon-storysource": "7.1.0-alpha.36",
    "@storybook/addon-toolbars": "7.1.0-alpha.36",
    "@storybook/addon-viewport": "7.1.0-alpha.36",
    "@storybook/addons": "7.1.0-alpha.36",
    "@storybook/angular": "7.1.0-alpha.36",
    "@storybook/api": "7.1.0-alpha.36",
    "@storybook/blocks": "7.1.0-alpha.36",
    "@storybook/builder-manager": "7.1.0-alpha.36",
    "@storybook/builder-vite": "7.1.0-alpha.36",
    "@storybook/builder-webpack5": "7.1.0-alpha.36",
    "@storybook/channel-postmessage": "7.1.0-alpha.36",
    "@storybook/channel-websocket": "7.1.0-alpha.36",
    "@storybook/channels": "7.1.0-alpha.36",
    "@storybook/cli": "7.1.0-alpha.36",
    "@storybook/client-api": "7.1.0-alpha.36",
    "@storybook/client-logger": "7.1.0-alpha.36",
    "@storybook/codemod": "7.1.0-alpha.36",
    "@storybook/components": "7.1.0-alpha.36",
    "@storybook/core-client": "7.1.0-alpha.36",
    "@storybook/core-common": "7.1.0-alpha.36",
    "@storybook/core-events": "7.1.0-alpha.36",
    "@storybook/core-server": "7.1.0-alpha.36",
    "@storybook/core-webpack": "7.1.0-alpha.36",
    "@storybook/csf-plugin": "7.1.0-alpha.36",
    "@storybook/csf-tools": "7.1.0-alpha.36",
    "@storybook/docs-tools": "7.1.0-alpha.36",
    "@storybook/ember": "7.1.0-alpha.36",
    "@storybook/html": "7.1.0-alpha.36",
    "@storybook/html-vite": "7.1.0-alpha.36",
    "@storybook/html-webpack5": "7.1.0-alpha.36",
    "@storybook/instrumenter": "7.1.0-alpha.36",
    "@storybook/manager": "7.1.0-alpha.36",
    "@storybook/manager-api": "7.1.0-alpha.36",
    "@storybook/nextjs": "7.1.0-alpha.36",
    "@storybook/node-logger": "7.1.0-alpha.36",
    "@storybook/postinstall": "7.1.0-alpha.36",
    "@storybook/preact": "7.1.0-alpha.36",
    "@storybook/preact-vite": "7.1.0-alpha.36",
    "@storybook/preact-webpack5": "7.1.0-alpha.36",
    "@storybook/preset-create-react-app": "7.1.0-alpha.36",
    "@storybook/preset-html-webpack": "7.1.0-alpha.36",
    "@storybook/preset-preact-webpack": "7.1.0-alpha.36",
    "@storybook/preset-react-webpack": "7.1.0-alpha.36",
    "@storybook/preset-server-webpack": "7.1.0-alpha.36",
    "@storybook/preset-svelte-webpack": "7.1.0-alpha.36",
    "@storybook/preset-vue-webpack": "7.1.0-alpha.36",
    "@storybook/preset-vue3-webpack": "7.1.0-alpha.36",
    "@storybook/preset-web-components-webpack": "7.1.0-alpha.36",
    "@storybook/preview": "7.1.0-alpha.36",
    "@storybook/preview-api": "7.1.0-alpha.36",
    "@storybook/preview-web": "7.1.0-alpha.36",
    "@storybook/react": "7.1.0-alpha.36",
    "@storybook/react-dom-shim": "7.1.0-alpha.36",
    "@storybook/react-vite": "7.1.0-alpha.36",
    "@storybook/react-webpack5": "7.1.0-alpha.36",
    "@storybook/router": "7.1.0-alpha.36",
    "@storybook/server": "7.1.0-alpha.36",
    "@storybook/server-webpack5": "7.1.0-alpha.36",
    "@storybook/source-loader": "7.1.0-alpha.36",
    "@storybook/store": "7.1.0-alpha.36",
    "@storybook/svelte": "7.1.0-alpha.36",
    "@storybook/svelte-vite": "7.1.0-alpha.36",
    "@storybook/svelte-webpack5": "7.1.0-alpha.36",
    "@storybook/sveltekit": "7.1.0-alpha.36",
    "@storybook/telemetry": "7.1.0-alpha.36",
    "@storybook/theming": "7.1.0-alpha.36",
    "@storybook/types": "7.1.0-alpha.36",
    "@storybook/vue": "7.1.0-alpha.36",
    "@storybook/vue-vite": "7.1.0-alpha.36",
    "@storybook/vue-webpack5": "7.1.0-alpha.36",
    "@storybook/vue3": "7.1.0-alpha.36",
    "@storybook/vue3-vite": "7.1.0-alpha.36",
    "@storybook/vue3-webpack5": "7.1.0-alpha.36",
    "@storybook/web-components": "7.1.0-alpha.36",
    "@storybook/web-components-vite": "7.1.0-alpha.36",
    "@storybook/web-components-webpack5": "7.1.0-alpha.36",
    "sb": "7.1.0-alpha.36",
    "storybook": "7.1.0-alpha.36"
  }
}
```

```mdx
// introduction.mdx

import { Meta } from '@storybook/blocks';
import Code from './assets/code-brackets.svg';
import Colors from './assets/colors.svg';
import Comments from './assets/comments.svg';
import Direction from './assets/direction.svg';
import Flow from './assets/flow.svg';
import Plugin from './assets/plugin.svg';
import Repo from './assets/repo.svg';
import StackAlt from './assets/stackalt.svg';

<Meta title="Example/Introduction" />

| hi |
| hi |


# Welcome to Storybook

Storybook helps you build UI components in isolation from your app's business logic, data, and context.
That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.

Browse example stories now by navigating to them in the sidebar.
View their code in the `stories` directory to learn how they work.
We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.

<div className="subheading">Configure</div>

<div className="link-list">
  <a
    className="link-item"
    href="https://storybook.js.org/docs/react/addons/addon-types"
    target="_blank"
  >
    <img src={Plugin} alt="plugin" />
    <span>
      <strong>Presets for popular tools</strong>
      Easy setup for TypeScript, SCSS and more.
    </span>
  </a>
  <a
    className="link-item"
    href="https://storybook.js.org/docs/react/configure/webpack"
    target="_blank"
  >
    <img src={StackAlt} alt="Build" />
    <span>
      <strong>Build configuration</strong>
      How to customize webpack and Babel
    </span>
  </a>
  <a
    className="link-item"
    href="https://storybook.js.org/docs/react/configure/styling-and-css"
    target="_blank"
  >
    <img src={Colors} alt="colors" />
    <span>
      <strong>Styling</strong>
      How to load and configure CSS libraries
    </span>
  </a>
  <a
    className="link-item"
    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
    target="_blank"
  >
    <img src={Flow} alt="flow" />
    <span>
      <strong>Data</strong>
      Providers and mocking for data libraries
    </span>
  </a>
</div>

<div className="subheading">Learn</div>

<div className="link-list">
  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
    <img src={Repo} alt="repo" />
    <span>
      <strong>Storybook documentation</strong>
      Configure, customize, and extend
    </span>
  </a>
  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
    <img src={Direction} alt="direction" />
    <span>
      <strong>In-depth guides</strong>
      Best practices from leading teams
    </span>
  </a>
  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
    <img src={Code} alt="code" />
    <span>
      <strong>GitHub project</strong>
      View the source and add issues
    </span>
  </a>
  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
    <img src={Comments} alt="comments" />
    <span>
      <strong>Discord chat</strong>
      Chat with maintainers and the community
    </span>
  </a>
</div>

<div className="tip-wrapper">
  <span className="tip">Tip</span>Edit the Markdown in{' '}
  <code>stories/Introduction.stories.mdx</code>
</div>
```



### System

```shell
Environment Info:

  System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
  Binaries:
    Node: 19.8.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (114.0.1823.51)
```


### Additional context

This issue is checked in vite builder and also in webpack 5 builder.