Support local theme json files

[paradox460]

Is your feature request related to a problem? Please describe

With the migration to shikiji in 2.8.x, use of the css-variables theme is broken, rendering only black text. This is intentional, and documented by shikiji. I was using css-variables themes to load in a custom style of theme, as I was not able to get custom theme JSONs working.

Describe the solution you'd like

I would like a mechanism to load and register any compatible JSON theme into shikiji, from the nuxt.config.js highlight property. Custom themes should be able to be loaded for both the "default" bare case, and for the object case, so I can load light, dark, and any other theme configuration. They should be able to do everything the built in themes can do.

Describe alternatives you've considered

I've thought about rewriting my ProseCode component to not use slot, and instead register my own Shikiji renderer, for the purposes of loading and using my own theme. This would do the job, but does not seem particularly efficient, as the MDC transformer for shikiji would still run.

I've thought about writing my own MDC transformer to add the custom theme I want, but this looks like it would become a maintenance burden as it drifts from the nuxt/content MDC transformer.

Additional context

Here is how it looks when it is broken:

Here is how it should look:

[nobkd]

Have you tried adding your theme like described here (docs were updated yesterday)? https://content.nuxt.com/get-started/configuration#highlight (third code block)

Related issue: #2384 Docs update: #2395

Edit: I think I misunderstood the issue. I don't know how to properly replace css variables theme

[paradox460]

I did, but it does not work.

The theme file I am using is tomorrow.json.

When using this file, the only error that appears in the terminal is:

[@nuxtjs/mdc] Failed to highlight code block Cannot add property 57, object is not extensible

In the generated HTML output, the code is just wrapped in a <code><pre>, no shikiji style are applied.

If I load a style that was included with shiki, such as dark-plus via an external JSON, it throws errors similar to the earlier one:

[@nuxtjs/mdc] Failed to highlight code block [shikiji] Theme `vscode://schemas/color-theme` is not built-in.

If I edit the json manually, and remove the line that reads

  "$schema": "vscode://schemas/color-theme",

No more errors occur, however the code is still not styled. But unlike earlier, if I inspect the generated HTML, I do see the <span> tags that set the shiki variables, but it does not appear that the CSS needed to make those variables take effect is being applied, as it is with a built-in theme.

Finally, if I rename the theme in the corresponding json file, I get the same is not built-in error as before

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.