-
Notifications
You must be signed in to change notification settings - Fork 72
Description
Problem Description
When using the @shikijs/twoslash
transformer, I encountered an issue where the tagName provided in the renderer configuration is automatically converted to lowercase.
Example
Here is the configuration where the issue occurs:
transformers: [
transformerTwoslash({
explicitTrigger: true,
renderer: rendererRich({
hast: {
hoverPopup: {
tagName: 'Popup'
},
// additional configuration
}
}),
}),
],
In this case, the expected behavior is that a Popup
node is generated, which would correspond to the Popup
component in MDX. However, the node is being converted to lowercase (popup
).

I think that during the process where the HTML generated by highlighter.codeToHtml is converted back to hast, the tagName is being transformed to lowercase.
You can reproduce this issue by checking the following example:
StackBlitz Example
twoslash custom popup usage:
https://github.com/shikijs/shiki/blob/main/packages/vitepress-twoslash/src/renderer-floating-vue.ts
https://github.com/fuma-nama/fumadocs/blob/38e2b602d6c8e818cae8d01037c7c2245be93803/packages/twoslash/src/index.ts