Cant use custom theme with rehype pretty code plugin

[Fesyse]

So ive been working on my pet project. And im building documentation website with contentlayer2 in docs folder, its shadcn/ui docs style website but whatever.

In config file im using rehype pretty code plugin and setting custom theme in getHighlighter: async options => {} function, but it does not seem to work, even tho i tested plugin with unified library and it seems to work.

To reproduce:

• clone repo
• run cd docs
• run npm install
• run npm run dev or npm run dev:docs
• go to /docs/installation/

and now you can see that theme is not applied

theme example

OS	Windows
Package version	^0.4.6

[timlrx]

I logged theme in https://github.com/Fesyse/another-react-router/blob/main/docs/contentlayer.config.js#L26C11-L26C16 and it appears to be a rejected promise with ShikiCompatError.

Commenting out getHighlighter works as expected.

[Fesyse]

Yea getting theme is working now correctly, but theme still is not applied.

It just set's default theme to github-dark-dimmed

[Fesyse]

Now i cant even use this plugin, when im adding it just throws an error:

X [ERROR] Cannot process MDX file with esbuild [plugin @mdx-js/esbuild]

    _mdx_bundler_entry_point-32fd59ac-a90e-40cc-be63-6e0f555fdb04.mdx:0:0:
      0 │ ---
        ╵ ^

Error: Found 3 problems in 3 documents.

 └── Encountered unexpected errors while processing of 3 documents. This is possibly a bug in Contentlayer. Please open an issue.

     • "docs/cli.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-e33eb5f4-6dd3-4663-9769-610acc7583fb.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] Cannot process MDX file with esbuild
     • "docs/installation.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-f1632743-30d0-4dec-a90e-b98cbd0bde39.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] Cannot process MDX file with esbuild
     • "docs/introduction.mdx": UnexpectedMDXError: Error: Build failed with 1 error:
     _mdx_bundler_entry_point-32fd59ac-a90e-40cc-be63-6e0f555fdb04.mdx:0:0: ERROR: [plugin: @mdx-js/esbuild] Cannot process MDX file with esbuild

SourceFetchDataError: {
  "_tag": "HandledFetchDataError"
}

i didnt change anything btw

[timlrx]

1st error seems to be that import path from "path" is missing.

Next, you should import themes with the method recommended by the docs. I don't think you can modify themes through getHighlighter - just adding theme to getHighlighter does not seem to do anything - I think there are some other changes that needs to be done to options.themes for it to work properly...

[Fesyse]

Thank you so much, just changed rehypePrettyCodeOptions to:

{
  theme: JSON.parse(
    fs.readFileSync(
      path.join(process.cwd(), "/src/lib/highlighter-theme.json"),
      "utf-8"
    )
  )
 }

and everything seems to be working!