Skip to Content
Nextra 4.0 is released. Read more
DocumentationAdvancedTwoslash Support

Twoslash Support

Twoslash provides an inline type hove inside the code block.

Basic usage

You can enable twoslash to your code blocks by adding a twoslash metadata:

Markdown
```ts twoslash
// @errors: 2540
interface Todo {
  title: string
}
 
const todo: Readonly<Todo> = {
  title: 'Delete inactive users'.toUpperCase()
  //  ^?
}
 
todo.title = 'Hello'
 
Number.parseInt('123', 10)
//      ^|
               // Just comments, so Popup will be
               // not behind the viewport of `<code>`
               // element due his `position: absolute` style
               //
```

Renders:

interface Todo {
  : string
}
 
const : <Todo> = {
  
title: string
title
: 'Delete inactive users'.()
} .title = 'Hello'
Cannot assign to 'title' because it is a read-only property.
.p
  • parseFloat
  • parseInt
  • prototype
('123', 10)

Custom log message

You can add log message to your code by adding:

  • @log: <message> Custom log message
  • @error: <message> Custom error message
  • @warn: <message> Custom warn message
  • @annotate: <message> Custom annotate message
const  = 1
Custom log message
const = 1
Custom error message
const = 1
Custom warning message
Custom annotation message
Last updated on