Nextra 3.0がリリースされました。 詳細を読む

Twoslashサポート

Twoslashはコードブロックの中でのインラインタイプホバーを提供します。

基本的な使用法

twoslashメタデータを追加することで、コードブロックに対してTwoslashを有効にすることができます。

マークダウン
```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
               //
```

レンダリングされます。

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)

カスタムログメッセージ

追加することでコードにログメッセージを追加できます。

  • @log: <メッセージ> カスタムログメッセージ
  • @error: <メッセージ> カスタムエラーメッセージ
  • @warn: <メッセージ> カスタム警告メッセージ
  • @annotate: <メッセージ> カスタムアノテートメッセージ
const  = 1
Custom log message
const = 1
Custom error message
const = 1
Custom warning message
Custom annotation message