Some help needed with setup

[Tanish2002]

Hello. Greate docs but I am still having a bit of trouble 😅 setting this up. I'm using nextjs 14 with pages router.

my next.config.mjs looks like this

/** @type {import('rehype-pretty-code').Options} */
const options = {
  theme: {
    dark: "github-dark-dimmed",
    light: "github-light",
  },
};

const withMDX = nextMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [[rehypePrettyCode, options]],
  },
});
...
export default withBundleAnalyzer(withMDX(nextConfig));

then in my slug route I get markdown from a cms using getStaticProps

export default function Post({
  post_content,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  return (
    <>
      <div className={`min-h-screen mx-auto flex-col item-center p-24`}>
        <MDXRemote {...post_content} />
      </div>
    </>
  );
}

Now in the the browser, the code block looks like this: with the dom elements like this:

Note: The language in the screenshot is nix. In markdown, I'm doing this

```nix \ ```

I haven't applied any CSS styling since I assumed "theme" does it for me

[o-az]

If you're on next why not use RSC? Example here https://rehype-pretty-code.netlify.app/#react-server-component

[Tanish2002]

@o-az I really don't think so the app router is as stable as vercel claims it to be. Also there are still some things that haven't been implemented in the app router like: router events

[o-az]

@o-az

I really don't think so the app router is as stable as vercel claims it to be.

Also there are still some things that haven't been implemented in the app router like: router events

You don't have to go all in. You can adopt it progressively. Either way, the RSC example should help you fix the issue in your current setup: instead of MDXRemote, pass the highlighted code to a normal html tag and set it using dangerouslySetInnerHTML.

[Tanish2002]

I was actually in fact using app router before. I switched to pages router due to things not working and having to make weird hacks to make them work.

Anyways I was able to make this work:

//inside getStaticProps or getServerSideProps
  const mdxSource = await serialize(res[0].content, {
    mdxOptions: {
      rehypePlugins: [
        [
          // @ts-ignore
          rehypePrettyCode,
          { theme: { dark: "catppuccin-mocha", light: "catppuccin-latte" } },
        ],
      ],
      format: "mdx",
    },
  });

// Inside component
<MDXRemote {...post_content} components={components} />

However wasn't able to make it work with next.config

You can close this issue if you think this is a next issue. :)

[pvlvstepan]

I don't know if I'm doing something fundamentally wrong but I am getting the same issue despite using next-mdx-remote/rsc with Next.js 14 app dir.

I've tried using serialize, compileMDX, and even barebone unified as shown in the RSC example but so far I've managed to make it work with a single theme only.

I've created a minimal reproduction on StackBlitz: https://stackblitz.com/edit/stackblitz-starters-11qvo6?file=app%2Fpage.tsx

Some details if that's gonna help:

• next@14.0.4
• next-mdx-remote@4.4.1
• shikiji@0.10.2
• rehype-pretty-code@0.12.6

[o-az]

@pvlvstepan thanks for sharing a repro link. I'll take a look and get back to you soon.

[o-az]

I don't know if I'm doing something fundamentally wrong but I am getting the same issue despite using next-mdx-remote/rsc with Next.js 14 app dir.

I've tried using serialize, compileMDX, and even barebone unified as shown in the RSC example but so far I've managed to make it work with a single theme only.

I've created a minimal reproduction on StackBlitz: stackblitz.com/edit/stackblitz-starters-11qvo6?file=app%2Fpage.tsx

Some details if that's gonna help:

• next@14.0.4
• next-mdx-remote@4.4.1
• shikiji@0.10.2
• rehype-pretty-code@0.12.6

@pvlvstepan Looks like you didn't include any CSS that handles themes. See this section in the docs: https://rehype-pretty-code.netlify.app/#multiple-themes-dark-and-light-mode

Your example works now with CSS updated. See line 29 and below in globals.css: https://stackblitz.com/edit/stackblitz-starters-oseu5a?file=app%2Fglobals.css

Note that the CSS part is not needed if you're using a single theme. It's only needed if you have dark/light mode setup.

[pvlvstepan]

@pvlvstepan Looks like you didn't include any CSS that handles themes. See this section in the docs: https://rehype-pretty-code.netlify.app/#multiple-themes-dark-and-light-mode

I can confirm that this was indeed the issue. Thanks for your time and prompt response.