How can I configure the popups from twoslash to use the custom theme

[tylersayshi]

The highlighting is slightly different from the code blocks to the popups with code. The code blocks on the page are now correct in their highlighting and the pop up is wrong.

repo for this: https://github.com/tylersayshi/fuma-move

This is the same theme working correctly on the current site:

https://arktype.io/

Also, while I am here. What is the recommended way to override the styles of the popups? I'd like to control things like the border, box shadow and padding.

[fuma-nama]

I am not sure what you are referring to, if you meant Shiki chose the undesired theme, it's probably because

https://github.com/tylersayshi/fuma-move/blob/73fdc73e8e79a947fc627def6ef2e590250cc397/lib/shiki.ts#L121

[fuma-nama]

Also, while I am here. What is the recommended way to override the styles of the popups? I'd like to control things like the border, box shadow and padding.

Pass props to PopupContent Component

[tylersayshi]

it's probably because

good catch! That does help and now I am able to get my RSC for Code working (used on the homepage)

but what breaks is the source.config.ts - the mdx was using the wrong highlighting before and now is just not being highlighted at all it seems.

this was my latest config to get the Code.tsx working for the homepage with your tip. Weirdly - I needed to re-import the theme in that file and also define both the themes and theme fields to get the background color of the snippets correct.

[fuma-nama]

For docs pages, you passed the package json to themes instead of colors (see shiki.ts).
There's a fix:

const arkdarkColors = await import("arkdark/arkdark.json", {
  with: { type: "json" },
});

export const shikiConfig = {
  ...rehypeCodeDefaultOptions,
  themes: {
    dark: arkdarkColors.default,
    light: arkdarkColors.default,
  },
  langs: [
    ...(rehypeCodeDefaultOptions.langs ?? []).filter(v => v !== 'ts'),
    { ...arktypeTextmate, name: "ts" } as never,
  ],
  transformers: [
    ...(rehypeCodeDefaultOptions.transformers ?? []),
    twoslash,
    transformerNotationErrorLevel(),
  ],
};

And Fumadocs UI's CodeBlock component has a keepBackground prop, you can use it like:

export const Code: React.FC<CodeProps> = async ({ filename, lang = "ts" }) => {
  const codeText = await fs.readFile(
    process.cwd() + "/components/code-snippets/snippets/" + filename,
    "utf8"
  );

  // preload languages for shiki
  // https://github.com/fuma-nama/fumadocs/issues/1095
  await getSingletonHighlighter({
    langs: Object.keys(bundledLanguages),
  });

  const rendered = await highlight(codeText, {
    ...shikiConfig,
    meta: {
      __raw: "twoslash",
    },
    lang,
    components: {
      pre: props => <CodeBlock keepBackground {...props}><Pre>{props.children}</Pre></CodeBlock>,
      // @ts-expect-error -- JSX component
      Popup,
      PopupContent,
      PopupTrigger,
    },
  });

  return <>{rendered}</>;
};

instead of passing theme directly

[tylersayshi]

Thanks for the keepbackground tip! that worked perfectly.

For docs pages, you passed the package json to themes instead of colors (see shiki.ts).

Were you able to actually run this and see it working? The change makes sense to me, but the docs pages still do not get highlighted. The code is still all just plain white text.

I committed my change in case I missed something from your suggestion.

[tylersayshi]

oh... actually it works once the project is built and served as final static assets, but the highlighting does not work while running the dev server for the docs pages. 🤔

[tylersayshi]

wow... highlighting works when I use --turbo for dev...

[fuma-nama]

Could you clear the cache? it happens sometimes, hopefully it's not a Next.js bug otherwise it would be painful to solve