[✨] Add extra syntax highlighters via. MDX config

[absolutejam]

Is your feature request related to a problem?

Currently, I cannot seem to register extra languages to refractor as it is run as part of the Vite build process via. a plugin.

As you can see, this does register the tsx syntax but nothing else - https://github.com/BuilderIO/qwik/blob/6f3f0ef5a8eb472a9dab0e934a5327dd1005cfb2/packages/qwik-city/buildtime/markdown/syntax-highlight.ts

Describe the solution you'd like

Allow specifying additional languages to be registered.

This might be best done via. a 'setup' callback, which has access to the Refractor object:

// vite.config.ts

import fsharp from "refractor/lang/fsharp";

export default defineConfig(async () => {
  return {
    plugins: [
      qwikCity({
        mdxPlugins: {
          // as well as a `boolean`, also allow taking a config object
          rehypeSyntaxHighlight: {
            enabled: true,
            setup: (refractor: Refractor) => {
              refractor.register(fsharp)
            }
          }
        }
      })
    ]
  }

This setup callback would be passed to the rehypeSyntaxHighlight plugin and called there.

Describe alternatives you've considered

I tried to import refractor and register new languages in the root.tsx as part of a useTask$ but it had no effect.

Additional context

No response

[absolutejam]

Just to confirm, I'm happy to take a crack at this if it looks like the right approach

[Lionardo]

I am not sure if I am right with my issue but when I try to install react-markdown
the markdown component throws errors. Do I need to register this plugin also?

[manucorporat]

should be easy to add a PR! anybody open for it?

[gioboa]

We moved this issue to qwik-evolution repo to create a RFC discussion for this.
Here is our Qwik RFC process thanks.