Codehike breaks Mermaid.js diagram rendering in Nextra

[RichardJECooke]

In Nextra in next.config.mjs, if we add this

const withNextra = nextra({
  mdxOptions: {
    remarkPlugins: [[remarkCodeHike, { theme: "monokai" }]],
  },
  theme: "./theme.tsx",
  defaultShowCopyCode: true,
});

Then Mermaid diagrams no longer render in our .mdx pages. Any ideas how to have both Mermaid and Codehike working please?

https://github.com/shuding/nextra/issues/2477

[RichardJECooke]

Fix is to skip Mermaid in CodeHike when rendering:

const withNextra = nextra({
  mdxOptions: {
    remarkPlugins: [[remarkCodeHike, {
      theme: "monokai",
      skipLanguages: ["mermaid"],
    }]],
  },
  theme: "./theme.tsx",
  defaultShowCopyCode: true,
});