joshuakgoldberg/expressive-code-twoslash

If you write documentation or a blog that includes TypeScript code samples, you probably want readers to understand not just the code itself but the types and errors behind it. This plugin brings Twoslash support to Expressive Code, which is a tool for rendering attractive code blocks on websites. Twoslash is a format for annotating TypeScript code with inline information like type hovers, error messages, and callouts. With this plugin, your code blocks can display that rich type information the same way the official TypeScript documentation does. The plugin works by hooking into Expressive Code, extending it so that TypeScript code blocks can include Twoslash-style annotations. When a code block is rendered on your site, the plugin processes those annotations and displays them visually. It supports TypeScript, React TSX, and Vue code blocks. The features cover a range of useful documentation capabilities. You can show JSDoc comments and type information in hover boxes, display compiler error messages, highlight specific lines, and add callout notes alongside your code. It also supports type extraction, code completions, and the ability to show what files the TypeScript compiler emits. These are the kinds of details that make technical tutorials significantly clearer, especially when you are explaining why a particular piece of code behaves a certain way. This tool is designed for people building documentation sites, developer blogs, or any web project that already uses Expressive Code and wants richer TypeScript examples. If you maintain a library and want your docs to feel as polished as the TypeScript language's own documentation, this plugin helps bridge that gap without requiring readers to open an editor themselves.