Not working with MDX?

[jarodtaylor]

I want to use this in a Starlight site since the original rehype-mermaid does work in dark mode with SVG. Plus, I love that you have the pan zoom built in.

The problem I'm having is getting it to work in a .mdx file. It works fine in .md, but when I use .mdx, it doesn't render correctly. It spits in the DOM but doesn't render.

[stereobooster]

This can be issue with Astro configuration. There is a demo in this repository and if I change locally extension to mdx - it works

[jarodtaylor]

I thought that it may have been the starlight/tailwind template I used, but this is a fresh install of the base starlight, and I only added @beoe/rehype-mermaid and I am using the inline-class-dark-mode strategy.

I was following your directions here but just had to tweak the custom.css because the SVG was not getting mermaid id, so I just changed it to this:

html[data-theme="light"] .beoe-dark {
  display: none;
}

html[data-theme="dark"] .beoe-light {
  display: none;
}

.beoe svg {
  /* undo global styles */
  .node .label {
    line-height: 1.2;
  }

  /* primitive dark mode */
  .flowchart-link {
    stroke: var(--sl-color-white) !important;
  }

  .marker {
    stroke: var(--sl-color-white);
    fill: var(--sl-color-white) !important;
  }

  .node-labels {
    fill: var(--sl-color-white);
  }
}

Like I said, this works beautifully until I change the file from .md to .mdx

Do you think it's my astro config or are you thinking it's something with Astro's base config?

[jarodtaylor]

BTW, it works fine if I change:

rehypePlugins: [
      [
        rehypeMermaid,
        { class: "not-content", strategy: "inline-class-dark-mode" },
      ],
    ],

to use strategy: "img-class-dark-mode"

It's only doing this on the inline.

[stereobooster]

I think I found what happened https://github.com/withastro/starlight/releases/tag/%40astrojs%2Fstarlight%400.23.0

⚠️ Potentially breaking change: MDX optimization speeds up builds (Starlight’s docs are building ~40% faster for example), but restricts some advanced MDX features. See full details in the MDX optimization documentation.

import { defineConfig } from 'astro/config';
+ import mdx from '@astrojs/mdx';
import starlight from '@astrojs/starlight';

// https://astro.build/config
export default defineConfig({
	integrations: [
		starlight({
			title: 'My docs',
			// ...
		}),
+		mdx(),
	],
});

[jarodtaylor]

That fixed it! Thank you!

[stereobooster]

I will re-open this ticket, because:

there's a bug in @beoe/rehype-mermaid that is injecting root hast nodes inside a tree, which is incorrect following the spec:

Root can be used as the root of a tree, or as a value of the content field on a 'template' withastro/astro#11971 (comment), never as a child.