Skip to content

Bug: tagName Lowercasing in @shikijs/twoslash renderer for custom popup #251

@Zih0

Description

@Zih0

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).

image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions