diff --git a/code.mdx b/code.mdx index 9cdebff96..c89d9da7c 100644 --- a/code.mdx +++ b/code.mdx @@ -77,6 +77,35 @@ class HelloWorld { ``` ```` +### Twoslash + +In JavaScript and TypeScript code blocks, use `twoslash` to enable interactive type information. Users can hover over variables, functions, and parameters to see types and errors like in an IDE. + + +```ts title="Twoslash Example" twoslash +type Pet = "cat" | "dog" | "hamster"; + +function adoptPet(name: string, type: Pet) { + return `${name} the ${type} is now adopted!`; +} + +// Hover to see the inferred types +const message = adoptPet("Mintie", "cat"); +``` + +````mdx +```ts title="Twoslash Example" twoslash +type Pet = "cat" | "dog" | "hamster"; + +function adoptPet(name: string, type: Pet) { + return `${name} the ${type} is now adopted! 🎉`; +} + +// Hover to see the inferred types +const message = adoptPet("Mintie", "cat"); +``` +```` + ### Title Add a title to label your code example. Use `title="Your title"` or a string on a single line.