How to add remark and rehype plugins

[imlautaro]

I've been trying to add the plugins "remark-math" and "rehype-mathjax" to the MDC configuration but it doesn't work and the "docs" are not clear about that.

It works with the @nuxt/content module, but I need it to work with the MDC module because my markdown is coming from a database, not from the content directory.

What I tried in my nuxt.config.ts file:

mdc: {
  remarkPlugins: {
	remarkMath: {
		src: 'remark-math',
	},
},
rehypePlugins: {
	rehypeMathjax: {
		src: 'rehype-mathjax',
	},
  },
},

[JoaoVCMiranda]

Hi there!

Thank you for sharing, I'm facing a similar issue but with content directories

But I tried to use the CDN approach. And nuxt wouldn't let me have a tag in the tree.

With CDN you would need to do something about the "hydration" module on nuxt (Which I'm not sure yet of how it works).

[jonasfroeller]

I am not sure. I tried it the same way as remark-flexible-code-titles, which worked, but for remark-math it didn't. Then i switched to [require.resolve('remark-math')], which unfortunately doesn't seem to work too.

my configuration:

{
  mdc: {
    remarkPlugins: {
      [require.resolve('remark-math')]: {},
      'remark-flexible-code-titles': {},
    },
    rehypePlugins: {
      [require.resolve('rehype-katex')]: {},
    },
    highlight: {
      highlighter: 'shiki',
      theme: {
        dark: 'github-dark',
        default: 'github-light',
      },
      langs: supportedShikiLanguages,
    },
  },
}

[Adam7066]

In nuxt.config.ts file, only need

export default defineNuxtConfig({
  modules: [ '@nuxtjs/mdc' ],
  mdc: {
    remarkPlugins: {
      'remark-math': {},
    },
    rehypePlugins: {
      'rehype-mathjax': {},
    },
  },
})

P.S. When using a string directly in a .vue file, don't forget to escape \:

const mdRaw = `
$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$
`;

I created an example on StackBlitz, hope it helps. Nuxt MDC Math Example