Twoslash
This feature integrate Twoslash
All of the Typescript code blocks would provide inline type hover.
Enable twoslash
- Install @sveltepress/twoslash package
NPM
YARN
PNPM
npm install --save @sveltepress/twoslashsh
- Config
highlighter.twoslashtotrue
vite.config.(js|ts)
+
+
+
import { defineConfig } from 'vite'
import { sveltepress } from '@sveltepress/vite'
import { defaultTheme } from '@sveltepress/theme-default'
export default defineConfig ({
plugins : [
sveltepress ({
theme : defaultTheme ({
highlighter : {
twoslash : true
}
})
})
]
})ts
Basic type annotation
const foo = false
const obj = {
a : 'a',
b : 1
}ts
```ts
const foo = false
const obj = {
a: 'a',
b: 1
}
```md
Click fold/expand code
Errors
const foo : Foo = null
const a: number = '1'ts
```ts
// @errors: 2304 2322
const foo: Foo = null
const a: number = '1'
```md
Click fold/expand code
Queries
const hi = 'Hello'
const msg = `${hi }, world`
//
//
Number .p arseInt ('123', 10)
//
//
//
//ts
```ts
const hi = 'Hello'
const msg = `${hi}, world`
// ^?
//
//
Number.parseInt('123', 10)
// ^|
//
//
//
//
```md
Click fold/expand code
Custom logs
const a = 1Custom log message
const b = 1Custom error message
const c = 1Custom warning message
Custom annotation messagets
```ts
// @log: Custom log message
const a = 1
// @error: Custom error message
const b = 1
// @warn: Custom warning message
const c = 1
// @annotate: Custom annotation message
```md
Click fold/expand code
Cut codes
cut before
use // ---cut--- or // ---cut-before--- can cut all codes before this line
console .log (level )ts
```ts
const level: string = 'Danger'
// ---cut---
console.log(level)
```md
Click fold/expand code
cut after
use // ---cut-after--- can cut all codes after this line
console .log (level )
ts
```ts
const level: string = 'Danger'
// ---cut-before---
console.log(level)
// ---cut-after---
console.log('This is not shown')
```md
Click fold/expand code
cut start/end
use // ---cut-start--- and // ---cut-end--- to cut contents between them
const level : string = 'Danger'
console .log ('This is shown')ts
```ts
const level: string = 'Danger'
// ---cut-start---
console.log(level) // This is not shown.
// ---cut-end---
console.log('This is shown')
```md
Click fold/expand code
Twoslash for svelte
<script>
import { onMount } from 'svelte'
let count = 0
onMount (() => {
console .log ('mount')
})
</script>
<button on:click="{count ++}">
Count is: { count }
</button>svelte