How to make `remark-shiki-twoslash` evaluate as well on frontend

[abstract widget]

Hi Everyone,

I'm trying to make working remark-shiki-twoslash. However it seems to me that remark-shiki-twoslash only evaluates code on server-side.

I have question is that even possible using this plugin to make it work client side to have all js interactions? If yes needs to be done something specific?

Or I have to go by custom solution outside of astro config?

export default defineConfig({
...
integrations: [
mdx({
syntaxHighlight: false,
remarkPlugins" [remarkShikiTwoslash.default],
}),
],
});

Does anybody has experience with that?

How to make remark-shiki-twoslash evaluate as well on frontend

[swift laurel]

if the plugin adds .js that is meant to run on frontend that should work normally aka if it’s injecting scripts or something similar

[abstract widget]

This plugin is replacement for highlighter provided by astro itself. So you can in markdown write code such as this.

var something = 'blah';

However astro renders these MDX SSR. remark-shiki-twoslash requires frontend part to work as well.

I'm aware I can import component such

import { SomeComponent } from './component';

<SomeComponent client:load />

This makes running related js for component client side. However regarding syntax highlight there is no control.

[swift laurel]

if the syntax highlighting has client side code I assume the plugin will inject the scripts for you, or does it provide some JavaScript you can import and include on your page?

What does the client side aspect do?

[abstract widget]

This helps to understand https://shikijs.github.io/twoslash/

Even playground for even faster understanding https://shikijs.github.io/twoslash/playground?#code/PTAEAkFMCdNBLAzqAhgO1JAHigtgBwBs4BjAewBM5E1599IAXAGlDTMfhLkYAsVGAKBBsyaOGQBmoPpESkyuXJDSNkKWAgyzQZAK6N8BmWRm840eAHNejUAFoAfIOFgAKudCw0VWBVAAbjCI8GK60nxIoORUoIh4RHBGhITIrrrGOowAngzhoADkiIzQBXGmfAJekCi+yBRiBXbikBTpjKa8ZEHQuj1mcPBUqvCS8DCs6P4doOaE+KCSZCR6yGLpAO78dgCSoAAUOigGXdAAlGbwaADWCMhXjDBynGhWAIQuIvbfK4zf9oJyGhimw9LhQABeUAARgATABmQFiEHFXpQgBECIALNj0elQASAHoAfiAA