Validation is preventing me from using shikiConfig.themes

[duncanwerner]

What version of astro are you using?

1.0.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

WSL

Describe the Bug

Shiki-twoslash is the syntax highlighter used in the Astro MDX integration. It has an option, themes, which supports multiple themes. The intent of this option is to support light/dark theming, because shiki uses inline styles instead of class names.

Reference: https://github.com/shikijs/twoslash/tree/main/packages/remark-shiki-twoslash#light--dark-modes

Astro's config validation is blocking this property, so I can't use it. It just needs a validation entry in the zod config https://github.com/withastro/astro/blob/main/packages/astro/src/core/config.ts

and a type in the interface declaration https://github.com/withastro/astro/blob/main/packages/markdown/remark/src/types.ts

Link to Minimal Reproducible Example

n/a

Participation

• [X] I am willing to submit a pull request for this issue.

[natemoo-re]

Thanks for opening an issue @duncanwerner! The switch to Shiki-twoslash happened pretty late in the game before 1.0, so I suspect we just didn't catch this case.

I don't see any reason we couldn't support this, but I'd love @bholmesdev to confirm. Since you seem to have tracked down the issue already, we'd happily review a PR with a fix!

[duncanwerner]

Sure I will do that shortly, it's an easy fix. I'm just tracking down some other related issues atm (will post if I find anything useful)

[bholmesdev]

Closing since Shiki-twoslash isn't the default anymore! To add + configure Twoslash, see the "custom syntax highlighting" guide in the MDX README

[kyrylolvov]

@bholmesdev Is there any documentation on integration of twoslash?

[bholmesdev]

@kyrylolvov ah, I don't think we have official docs on that. I'd suggest installing the shiki twoslash remark plugin, and apply to your remarkPlugins in your astro config.