@shikijs/twoslash does not work on rehype pretty code transformers option

[udohjeremiah]

@shikijs/twoslash does not work on rehype-pretty-code transformers options, which the docs say here that it should work.

However, so far, it is not working. This is a sample of the code:

import { rendererRich, transformerTwoslash } from "@shikijs/twoslash";
import rehypePrettyCode from "rehype-pretty-code";
// ...

const rehypePrettyCodeOptions = {
  theme: moonlightTheme,
  keepBackground: false,
  transformers: [transformerTwoslash({ renderer: rendererRich() })],
  onVisitLine(node) {
    if (node.children.length === 0) {
      node.children = [{ type: "text", value: " " }];
    }
  },
};

// ...

const source = makeSource({
  contentDirPath: "./src/content",
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeAccessibleEmojis,
      rehypeSlug,
      [rehypePrettyCode, rehypePrettyCodeOptions],
      [rehypeAutolinkHeadings, rehypeAutolinkHeadingsOptions],
      rehypePresetMinify,
    ],
  },
});

[lishaduck]

Not at all a minimal reproduction (I'll try to write one sometime), but at least a full project: Effect-TS/website#770.

[lishaduck]

Ok, it turns out that it's about order: https://github.com/Effect-TS/website/compare/23debaa8e1ef70ee534ef21097a99d5361932882..20608435dcc90deb7616af2b89bacdf28cd4fb37 (ignore the CSS changes)

[udohjeremiah]

Thanks for your suggestion @lishaduck but it doesn't work. Turns out that after applying all your new suggestions, what I get is a <pre> code block that just loses all its styling from the theme: "one-dark-pro" in the rehypePrettyCodeOptions?

[lishaduck]

Thanks for your suggestion @lishaduck but it doesn't work. Turns out that after applying all your new suggestions, what I get is a \<pre\> code block that just loses all its styling from the theme: "one-dark-pro" in the rehypePrettyCodeOptions?

Yeah. I ran into that as well. I don't know what plugins you're using, but some orders work, and some lose styling, and some work but without twoslash. I don't really know why, just that's what I'm experiencing.