| 1 | --- |
| 2 | depends: |
| 3 | - guide/syntax#code-block |
| 4 | relates: |
| 5 | - TwoSlash: https://twoslash.netlify.app/ |
| 6 | since: v0.46.0 |
| 7 | tags: [codeblock] |
| 8 | description: | |
| 9 | A powerful tool for rendering TypeScript code blocks with type information on hover or inlined. |
| 10 | --- |
| 11 | |
| 12 | # TwoSlash Integration |
| 13 | |
| 14 | [TwoSlash](https://twoslash.netlify.app/) is a powerful tool for rendering TypeScript code blocks with type information on hover or inlined. It's quite useful for preparing slides for JavaScript/TypeScript-related topics. |
| 15 | |
| 16 | To use it, you can add `twoslash` to the code block's language identifier: |
| 17 | |
| 18 | ````md |
| 19 | ```ts twoslash |
| 20 | import { ref } from 'vue' |
| 21 | |
| 22 | const count = ref(0) |
| 23 | // ^? |
| 24 | ``` |
| 25 | ```` |
| 26 | |
| 27 | It will be rendered as: |
| 28 | |
| 29 | ```ts twoslash |
| 30 | import { ref } from 'vue' |
| 31 | |
| 32 | const count = ref(0) |
| 33 | // ^? |
| 34 | ``` |
| 35 | |
| 36 | <!-- For the popup to not overlap the content below --> |
| 37 | <div class="py-20" /> |
| 38 |