Skip to content

Bare TypeScript code in @example is interpreted as Markdown/HTML #2313

@tats-u

Description

@tats-u

Steps to reproduce

/**
 * @example
 * <Ruby text="ほっけ">𩸽</Ruby>
 * <Ruby text="ビャンビャン">𰻞𰻞</Ruby>麺
 */
export const Ruby = ({ children, text }: { children: string; text: string }) => (
  <ruby>
    {children}
    <rp></rp>
    <rt>{text}</rt>
    <rp></rp>
  </ruby>
);
  1. The above file is .tsx file
  2. Set typescript.experimental.useTsgo to true in settings.json
  3. See the description of Ruby by holding your mouse pointer on "Ruby"
  4. See how @example is rendered

Note: this occurs even in non-JSX .ts files (e.g. tokens are not highlighted or newlines are removed), but is not as critical as in .tsx files.

Behavior with typescript@5.9

Interpreted as TS code:

Image

insiders.vscode.dev

Behavior with tsgo

Interpreted as Markdown/HTML:

Image

Workaround: wrap it with ```tsx````

Image

This also works in Strada:

Image

To fix (Strada probably adopts this method):

  1. Find a code block marker (```)
  2. If exists, treat the content as Markdown
  3. If missing, treat the content as TypeScript code

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