Is there a way to add custom remark & rehype plugins for markdown? seems they are

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

this is what I ended up using in viteconfig <div class="highlight highlight-source

Example: <div class="highlight highlight-source-ts notranslate position-relative o

Landed in vite-plugin-react-pages@4.1.5

Custom remark & rehype plugins for markdown? about vite-plugin-react-pages HOT 5 CLOSED

husayt commented on July 19, 2024

Custom remark & rehype plugins for markdown?

from vite-plugin-react-pages.

Comments (5)

csr632 commented on July 19, 2024

@husayt Implemented in https://github.com/vitejs/vite-plugin-react-pages/pull/160/files and published as [email protected]. You can try it out :)

from vite-plugin-react-pages.

husayt commented on July 19, 2024

Thank you very much. This is really exciting. Can you please, provide an example of config?

from vite-plugin-react-pages.

husayt commented on July 19, 2024

this is what I ended up using in viteconfig

export default defineConfig({
  plugins: [
    react(),
    pages({
      pagesDir: path.join(__dirname, 'pages'),
      /** user can add/remove remark plugins passed to mdx */
      modifyRemarkPlugins: [
        {
          name: 'remark-emoji',
          createPlugin: () => import('remark-emoji').then((m) => m.default),
        },
        {
          name: 'remark-mdc',
          createPlugin: () => import('remark-mdc').then((m) => m.default),
        },
        {
          name: 'remark-mdc',
          createPlugin: () => import('remark-mdc').then((m) => m.default),
        },
        // {
        //   name: 'remark-rehype',
        //   createPlugin: () => import('remark-rehype').then((m) => m.default),
        // },
      ],
      /** user can add/remove rehype plugins passed to mdx */
      modifyRehypePlugins: [
        {
          name: 'rehype-external-links',
          createPlugin: () =>
            import('rehype-external-links').then((m) => m.default),
        },

        {
          name: 'rehype-raw',
          createPlugin: () => import('rehype-raw').then((m) => m.default),
        },
        {
          name: 'rehype-sort-attribute-values',
          createPlugin: () =>
            import('rehype-sort-attribute-values').then((m) => m.default),
        },
        {
          name: 'rehype-sort-attributes',
          createPlugin: () =>
            import('rehype-sort-attributes').then((m) => m.default),
        },
      ],
    }),
  ],
})

from vite-plugin-react-pages.

csr632 commented on July 19, 2024

Example:

export default defineConfig({
  plugins: [
    react(),
    pages({
      pagesDir: path.join(__dirname, 'pages'),
      modifyRemarkPlugins(original) {
        return [
          ...original,
          {
            name: 'remark-emoji',
            createPlugin: () => import('remark-emoji').then((m) => m.default),
          }
        ]
      },
      modifyRehypePlugins(original) {
        return [
          ...original,
          // add rehype plugins here
        ]
      },
    }),
  ],
})