\n {highlighter && (\n <>\n
\n )\n}\n```\n\n### Solid\n\nImport `@shikijs/magic-move/solid` and pass the highlighter instance to the `ShikiMagicMove` component.\n\n```tsx\nimport { ShikiMagicMove } from '@shikijs/magic-move/solid'\nimport { bundledLanguages, bundledThemes, createHighlighter } from 'shiki'\nimport { createResource, createSignal, Show } from 'solid-js'\n\nimport '@shikijs/magic-move/style.css'\n\nfunction App() {\n const [code, setCode] = createSignal(`const hello = 'world'`)\n\n const [highlighter] = createResource(async () => {\n return await createHighlighter({\n themes: Object.keys(bundledThemes),\n langs: Object.keys(bundledLanguages),\n })\n })\n\n function animate() {\n setCode(`let hi = 'hello'`)\n }\n\n return (\n \n \n {h => (\n <>\n \n
\n )\n}\n```\n\n### Svelte\n\nImport `@shikijs/magic-move/svelte` and pass the highlighter instance to the `ShikiMagicMove` component.\n\n```svelte\n\n\n{#await highlighter then highlighter}\n ` as the outermost wrappers of code block html. If you use a custom Shiki [transformer](/guide/transformers), this behavior may be undesirable. For example, if the transformer produces\n\n```html\n\n \n \n …\n \n
\n\n```\n\nthe result after `markdown-it` processing will be\n\n```html\n\n \n \n \n \n …\n \n
\n \n \n
\n```\n\nWork around this by adding [olets/markdown-it-wrapperless-fence-rule](https://github.com/olets/markdown-it-wrapperless-fence-rule) to your `markdown-it` configuration, or by writing your own `markdown-it` fence rule (see [markdown-it#269](https://github.com/markdown-it/markdown-it/issues/269)).\n","docs/packages/monaco.md":"# Monaco Editor Integration\n\nShiki uses the same TextMate grammar and themes as VS Code, so it can be used to highlight Monaco Editor. Shiki provides an official integration for Monaco Editor. You can also use [modern-monaco](https://github.com/esm-dev/modern-monaco) that includes built-in Shiki integration.\n\n## @shikijs/monaco\n\n\n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHtml(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return \n}\n```\n\n### Custom Components\n\nYou can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.\n\n```tsx\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki'\n\nexport default function Page() {\n return (\n \n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHast(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n components: {\n // your custom `pre` element\n pre: props => \n },\n }) as JSX.Element\n}\n```\n\n## React Client Component\n\nFor client components, they are pre-rendered on server and hydrated/rendered on client.\nWe can start by creating a client `CodeBlock` component.\n\nCreate a `shared.ts` for highlighter:\n\n```ts\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki/bundle/web'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki/bundle/web'\n\nexport async function highlight(code: string, lang: BundledLanguage) {\n const out = await codeToHast(code, {\n lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n }) as JSX.Element\n}\n```\n\nIn your `codeblock.tsx`:\n\n```tsx\n'use client'\nimport { JSX, useLayoutEffect, useState } from 'react'\nimport { highlight } from './shared'\n\nexport function CodeBlock({ initial }: { initial?: JSX.Element }) {\n const [nodes, setNodes] = useState(initial)\n\n useLayoutEffect(() => {\n void highlight('console.log(\"Rendered on client\")', 'ts').then(setNodes)\n }, [])\n\n return nodes ?? Loading...
\n}\n```\n\nThe `initial` prop can be passed from a server component to pre-render the code block on server.\n\nIn your `page.tsx`:\n\n```tsx\nimport { CodeBlock } from './codeblock'\nimport { highlight } from './shared'\n\nexport default async function Page() {\n // `initial` is optional.\n return (\n \n \n )\n}\n```\n\n::: info\nThe above example uses the `shiki/bundle/web` bundle. You can change it to [Fine-grained Bundle](/guide/bundles#fine-grained-bundle) to fully control the bundled languages/themes.\n:::\n\n### Performance\n\nShiki lazy loads the requested languages and themes, the Next.js bundler can handle lazy imports automatically.\nImporting `shiki` or its web bundle is efficient enough for most Next.js applications, Fine-grained Bundle won't significantly impact the bundle size.\n\nIn addition, you can use the `createHighlighter` API to preload specific languages and themes.\nPlease refer to [Highlighter Usage](/guide/install#highlighter-usage) for further details.\n\n### Highlighter Instance\n\nIf you define a highlighter (without `await`) as a global variable, you can reference it directly from server and client components.\n\n```ts\nimport { createHighlighter } from 'shiki'\n\nconst highlighter = createHighlighter({\n themes: ['nord'],\n langs: ['javascript'],\n})\n\n// Inside an async server component, or client side `useEffect`\nconst html = (await highlighter).codeToHtml('const a = 1', {\n lang: 'javascript',\n theme: 'nord'\n})\n```\n","docs/packages/nuxt.md":"# Nuxt\n\n[Nuxt](https://nuxt.com) is a general-purpose meta-framework that gives you full control over your application. You can install Shiki along with integrations like ([markdown-it](/packages/markdown-it), [rehype](/packages/rehype)) or import manually as you needed.\n\nOn top of that, Nuxt also provide some module integrations for Shiki allowing you use it easier:\n\n- [`nuxt-shiki`](https://github.com/pi0/nuxt-shiki) - Shiki integration for client and server sides, with component usage.\n- [`@nuxt/content`](https://github.com/nuxt/content) - Nuxt Content has Shiki built-in for markdown files. [You can enable it with the `highlight` option](https://content.nuxt.com/docs/getting-started/configuration#highlight).\n - [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc) - The underlying module of `@nuxt/content` that provides Markdown Component (MDC) syntax as well as Shiki for syntax highlighting.\n\n## TwoSlash Integration\n\n- [`nuxt-content-twoslash`](https://github.com/antfu/nuxt-content-twoslash) - A Nuxt module that adds Twoslash support to Nuxt Content. Twoslash information are evaluated at build time.\n","docs/packages/rehype.md":"---\noutline: deep\n---\n\n# @shikijs/rehype\n\n you want to highlight\nconst textStream = getTextStreamFromSomewhere()\n\n// Pipe the text stream through the token stream\nconst tokensStream = textStream\n .pipeThrough(new CodeToTokenTransformStream({\n highlighter,\n lang: 'javascript',\n theme: 'nord',\n allowRecalls: true, // see explanation below\n }))\n```\n\n### `allowRecalls`\n\nDue to the fact that highlighting may change based on the context of the code, themed tokens can be re-evaluated as the stream progresses. Because streams are one-directional, `@shikijs/stream` emits a special **recall** token that tells the receiver to discard the last N tokens that changed.\n\nBy default, `CodeToTokenTransformStream` only emits **stable** tokens — no recalls. The trade-off is coarser granularity, usually one line at a time.\n\nFor stream consumers that can handle recalls (e.g. the bundled Vue, React, Solid, and Svelte components), set `allowRecalls: true` to get finer-grained tokens.\n\nTypically recalls should be handled like:\n\n```ts\nimport type { RecallToken } from '@shikijs/stream'\nimport type { ThemedToken } from 'shiki'\n\nconst receivedTokens: ThemedToken[] = []\n\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n if ('recall' in token) {\n // discard the last `token.recall` tokens\n receivedTokens.length -= token.recall\n }\n else {\n receivedTokens.push(token)\n }\n },\n}))\n```\n\n## Consume the Token Stream\n\n### Manually\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n console.log(token)\n },\n}))\n```\n\nOr in Node.js:\n\n```ts\nfor await (const token of tokensStream) {\n console.log(token)\n}\n```\n\n### Vue\n\n```vue\n\n\n\n ` tag is modified: ``\n\n::: details HTML Output\n\n```html\n\n \n \n \n function(){\n \n console.log('hewwo') \n \n \n console.log('hello') \n \n }\n \n \n
\n```\n\n:::\n\n---\n\n### `transformerNotationHighlight`\n\nUse `[!code highlight]` to highlight a line.\n\n````md\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [\\!code highlight]\nconsole.log('Not highlighted')\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [!code highlight]\nconsole.log('Not highlighted')\n```\n\n- `// [!code highlight]` outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also highlight multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [\\!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n````\n\nRenders:\n\n```ts\n// [!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n---\n\n### `transformerNotationWordHighlight`\n\nUse `[!code word:Hello]` to highlight the word `Hello` in any subsequent code.\n\n````md\n```ts\n// [\\!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\n// [!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\nYou can also specify the number of lines to highlight words on, e.g. `[!code word:Hello:1]` will only highlight occurrences of `Hello` on the next line.\n\n````md\n```ts\n// [\\!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders:\n\n```ts\n// [!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\n---\n\n### `transformerNotationFocus`\n\nUse `[!code focus]` to focus a line.\n\n````md\n```ts\nconsole.log('Not focused');\nconsole.log('Focused') // [\\!code focus]\nconsole.log('Not focused');\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not focused')\nconsole.log('Focused') // [!code focus]\nconsole.log('Not focused')\n```\n\n- Outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also focus multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n````\n\nRenders:\n\n```ts\n// [!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n\n---\n\n### `transformerNotationErrorLevel`\n\nUse `[!code error]`, `[!code warning]`, and `[!code info]` to mark a line with an error, warning, or info levels.\n\n````md\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [\\!code error]\nconsole.warn('Warning') // [\\!code warning]\nconsole.log('Info') // [\\!code info]\n```\n````\n\n- Outputs: `` for errors\n- Outputs: `` for warnings\n- Outputs: `` for info\n- The outer `` tag is modified: ``\n\nWith some additional CSS rules, you can make it look like this:\n\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [!code error]\nconsole.warn('Warning') // [!code warning]\nconsole.log('Info') // [!code info]\n```\n\n---\n\n### `transformerRenderWhitespace`\n\nRender whitespaces (tabs and spaces) as individual spans, with classes `tab` and `space`.\n\nOptions:\n\n- `position`: `'all' | 'boundary' | 'trailing' | 'leading'`. Default `'all'`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction block( ) {\n space( )\n tab( ) \n}
\n\n::: details Example CSS\n\n```css\npre.shiki .tab,\npre.shiki .space {\n position: relative;\n}\n\npre.shiki .tab::before {\n content: '⇥';\n position: absolute;\n opacity: 0.3;\n}\n\npre.shiki .space::before {\n content: '·';\n position: absolute;\n opacity: 0.3;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderIndentGuides`\n\nRender indentations as individual spans, with class `indent`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction func() {\n console.log(1);\n\n for (const i of []) {\n console.log(2);\n }\n}
\n\n::: details Example CSS\n\n```css\npre.shiki .indent {\n display: inline-block;\n position: relative;\n left: var(--indent-offset);\n}\n\npre.shiki .indent:empty {\n height: 1lh;\n vertical-align: bottom;\n}\n\npre.shiki .indent::before {\n content: '';\n position: absolute;\n opacity: 0.15;\n width: 1px;\n height: 100%;\n background-color: currentColor;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderLineNumber`\n\nRender line numbers as individual spans, with class `line-number`.\n\n```ts\nimport { transformerRenderLineNumber } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n transformers: [\n transformerRenderLineNumber(),\n ],\n})\n```\n\nOptions:\n\n- `start`: Start number. Default `1`.\n- `classLineNumber`: Class for line number. Default `'line-number'`.\n\nWith some additional CSS rules, you can make it look like this:\n\n```css\npre.shiki .line-number {\n user-select: none;\n opacity: 0.5;\n margin-right: 1em;\n}\n```\n\n---\n\n### `transformerMetaHighlight`\n\nHighlight lines based on the [meta string](/guide/transformers#meta) provided on the code snippet.\n\n````md\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n````\n\nRenders (with custom CSS rules):\n\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n\n- Outputs: `` for included lines.\n\n### `transformerMetaWordHighlight`\n\nHighlight words based on the meta string provided on the code snippet.\n\n````md\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg)\nconsole.log(msg) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\n---\n\n### `transformerCompactLineOptions`\n\nSupport for `shiki`'s `lineOptions` that is removed in `shiki`.\n\n---\n\n### `transformerRemoveLineBreak`\n\nRemove line breaks between ``. Useful when you set `display: block` to `.line` in CSS.\n\n---\n\n### `transformerRemoveNotationEscape`\n\nTransform `// [\\!code ...]` to `// [!code ...]`.\nAvoid rendering the escaped notation syntax as it is.\n\n---\n\n### `transformerStyleToClass`\n\nConvert Shiki's inline styles to unique classes.\n\nClass names are generated based on the hash value of the style object with the prefix/suffix you provide. You can put this transformer in multiple highlights passes and then get the CSS at the end to reuse the exact same styles. As Shiki doesn't handle CSS, it's on your integration to decide how to extract and apply/bundle the CSS.\n\nFor example:\n\n```ts\nimport { transformerStyleToClass } from '@shikijs/transformers'\nimport { codeToHtml } from 'shiki'\n\nconst toClass = transformerStyleToClass({ // [!code highlight:3]\n classPrefix: '__shiki_',\n})\n\nconst code = `console.log('hello')`\nconst html = await codeToHtml(code, {\n lang: 'ts',\n themes: {\n dark: 'vitesse-dark',\n light: 'vitesse-light',\n },\n defaultColor: false,\n transformers: [toClass], // [!code highlight]\n})\n\n// The transformer instance exposes some methods to get the CSS\nconst css = toClass.getCSS() // [!code highlight]\n\n// use `html` and `css` in your app\n```\n\nHTML output:\n\n```html\n\n console\n .\n log\n (\n '\n hello\n '\n )\n
\n```\n\nCSS output:\n\n```css\n.__shiki_14cn0u {\n --shiki-dark: #bd976a;\n --shiki-light: #b07d48;\n}\n.__shiki_ps5uht {\n --shiki-dark: #666666;\n --shiki-light: #999999;\n}\n.__shiki_1zrdwt {\n --shiki-dark: #80a665;\n --shiki-light: #59873a;\n}\n.__shiki_236mh3 {\n --shiki-dark: #c98a7d77;\n --shiki-light: #b5695977;\n}\n.__shiki_1g4r39 {\n --shiki-dark: #c98a7d;\n --shiki-light: #b56959;\n}\n.__shiki_9knfln {\n --shiki-dark: #dbd7caee;\n --shiki-light: #393a34;\n --shiki-dark-bg: #121212;\n --shiki-light-bg: #ffffff;\n}\n```\n\n### `transformerRemoveComments`\n\nRemove comments from the code. It works by checking the internal grammar token metadata to determine if the token is a comment.\n\nThis transformer requires `includeExplanation: true` to work.\n\n```ts\nimport { transformerRemoveComments } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n lang: 'ts',\n includeExplanation: true, // [!code highlight]\n transformers: [\n transformerRemoveComments(), // [!code highlight]\n ],\n})\n```\n\nOptions:\n\n- `removeEmptyLines`: Remove lines that become empty after removing comments. Default `true`.\n\nFor example:\n\n````md\n```js\n// This is a comment\nconst x = 1 // Inline comment\n/* Block comment */\nconst y = 2\n\n// Another comment\n```\n````\n\nWill renders:\n\n```js\nconst x = 1\nconst y = 2\n```\n","docs/packages/twoslash.md":"---\noutline: deep\n---\n\n# @shikijs/twoslash\n\n = {\n title: 'Delete inactive users'.toUpperCase(),\n// ^?\n}\n\ntodo.title = 'Hello'\n\nNumber.parseInt('123', 10)\n// ^|\n\n //\n //\n```\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c6f2791b81c2170bb12e4d54f17b345c35c290fb6b3e803987a0875ad1778705\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvEaRjMaACXYBzfB1U1SAYQizGELOMlxEvJavX5NO2QHlDEsHAA8/NnBgA+bqYAKpCABbdg9nczUVKzIbLwAdMHZArF00aVl5GHDLa11cKigIEQREEC10ml5mXgBlfHYAa3ZpXN46i0jNXnYnNGZRGApeAHd2NHxeSF5WPuVBZmV4Xl1eMZhAxYAjYShWGCgAOniAdS5AyrAoXjkRcemwWfmYc8vV9d5AwThUjafWCGZYJdAn05qxWBh9pRqPNishkCAPHkCGg0FhEAB6dFwOqNfZfDC7dGzdiwdFbC67OAAYn43RgAFplKRmHSoPTyTtcABdLlUL7MUgMRAATiou3uYyQACYAIxUXqkBZCkAyOSKSLZaK5KEcMC4RAABioNwFzDEZCQwoAvhR0Nh9QRiBb5XRlSwOFw+EJREYpKqMgApZhEZjVGTsQwAJRgC1oAFF7nT9A5jAB+UxBkNh0gRtDR2MJ5R0+y+nimfN0Qt0+KJZKCtJqmCZ0PhqMxyuJvVQgpFPAAVQ8K3wT0C0DIUmb2dzvHzcdoWCunaeaAgXSSu3WYFSq14tgSyjDfT1pEOYHiAEE4Lv94JSIJgbw4IIsHW0Fe4EEnvw1bfFmN5NIfQAOTfE8ayCNMNCXJ83TKBM8jsCQvCTq2qSyLG8CDB+6zxFg8iaE4lSyBMECpE+L4pHs+y8HGpABKQV4jGCvA/EOARDFIQzDlIeEMbBvAACqugAshkvBMswgTAgxwyjPg8TCORr57LweEouOcCDH0lxcTAUg7hJUkCl0oisIIsBXmpBFXv+qSfE83Qhhwlx7iot73lUcAYFuzC0Ke1QwKkAAG/C6EWRCwUFKyrkFaB3jAUUrl0yiQMRqyDmQ9FXtpj6NAufQYLwinPsplzLI5bAkqp+EaZCfIKkKABsRogOKyiSogUoAOzygKSp4P6NAoTmbYFkuOp0kgcoqvgprmuQIo2naOB4IQJDkC69ADcYqRtBEGhkKYWQdFqshQvygpTVKAAcYp6e1+BTdNCr9SUe2ahtrWTYgADMxqzcy81II1S3UPaq1Op9NBbSU7qcDwDYZMdB3aLkyalkdGonajdgpk4rjuF4Pi8P4QQhDAYRYyjMSeDWSQpIj6rtNT2r5IUxSlOUTxVLUDRNCILTvdjJn8v0gwjGMJFTDMcwLFeyyvJs2y7AcxynM8VxmrcMuPBrivvJ8oFTP8gLvCCbDgnV0LKLC8KIlCViohiWI4uweKYISxKkhylI0nSjLMqy7LK9yvIIg1U0ACy3a190dbKvWKoFA1c8jUQ40iur6n9M1zZo0og7aYMrW9kNQtDbpYAEOCChgfBpzkuOlgTrAeJ4+z3XSpjnkMLK9BsuzOBW8ZLp43bs3gWiG0EM4xnOC6d3qVsXUKMpdZHd0So9iCNYnr0gIvmffRvueA/nnWg5gJeOut5eukwlWeozTbBi2I15u2I9Fnq6OOHA6bIVflOUaHZv4wBLH/Ymw8qx6jpq+Z+w1czQPGmzXsJQBzLmHO8McpAJxANQrPZQ89FxgOimuLAG49Lbiwa5A8IgjxkFPBeK8tD3IPiUikd8n4BA/lkDZWaqR6FgBAixMCHxIIqRgvceC4gkKIMMLwdCdBMKPk/LhGquDsrEUgGREqlEDg0ToroRi7BmKsTGOxTi3Fqp8WkUJegokKiGWkiYsYCknB6MFCpKyGktIXGGNYgyzIjKkBMiIMyFlqrqU0UOAC9kTJOSqqwu87DvK9D8vEAKwVQqKkQpFMhsV4qJVXCoVKmD4BgSMTJHKcA8rnEKsVCiXiyqhIqs5KJ1ll4R0QDKa6UpN4PWlD1aESdlSDRflmVCyCwETS7IgE+Joz4Wh6QaS+4MSi9GUFCMAkkHR/C2fVAUQpZS71jlvJALUK6T2nmcfZ7x4BwEeLM/UwzFlmnPqsouV8HRrWdNQe+JQBY9EqKYGU51ulSkhQMjqz0+rJxKMwZ5SBXkA3ecswuy0HSbO2bsvAmVdDgqOdKG60Lt6XIBaUG5Vwqn3LgI8hYSLEAxzeUDQ0azr6/KhhSoFXwWKgsJZdTqP0T5tRhXveFIANiMuZai1lGLi5YvmDi9YeBe64IFccyOLVRVks2sqKeXwZ5qoSNI9YdKnlim+qKU+aKFqfMxRDW+ertrApEPyw5gqpSR1OTqqa4qxmMutSy8+8rvl4GxVQHZKqEVgB0RkDV0oACs/SzmDMNM6koBqVxnCPKRBCkhaX0qPnMmU01g3LNWWHAWsA8C1gZsAZ+DdTpPCtAIAIZwgLYj5uiAWsggJwPrQg/B79pl0l4K2/g7beCdtduiQ+6IABWr84CoX7WeUQO1WhU3TrwAAvJUXuoxG3bsbjARgwB4i8BIV3IdkyR2fxgWe7g8QrTPvXTy1IVR90yniB+lie7eA/o3a6gDQGoTrF6EgUAro9JwEcOGhAVorRAA==\"}\nimport { createHighlighterCore } from 'shiki/core'\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript'\n\nconst highlighter = await createHighlighterCore({\n engine: createJavaScriptRegexEngine()\n})\n\n// @log: Custom log message\nconst a = 1\n// @error: Custom error message\nconst b = 1\n// @warn: Custom warning message\nconst c = 1\n// @annotate: Custom annotation message\n```\n\n---\n\n### `rendererClassic`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/twoslash/src/renderer-classic.ts)\n\nThis renderer aligns with the output of legacy [`shiki-twoslash`](https://github.com/shikijs/twoslash).\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"be50298f5ea6976d501abea603d4b03abe8280f3bf0a7b10df97e47172449e7c\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvUjDCwZpAMKsucdiMbdEvACoB3CHBVx8AJVnyyAHTDsAtlgik00i2TLLV6yiCgQRCIggOvgwvLD8zIKsLjJy7qS8bOwA5rZgKbx67Gj4vLlhTqnsYGy8AAYAAibsANbsAFZwAPRoBkZc+OW8EIJoWH0AdD5waMzOSACcVKyyKblIAIwArFRjpCkwDEFxlkrGaiI+HGC4iAAMVCL448xiZFMAvhTo2GcExA9rdNsgLBxcPhCUTiST5UjMMBwfhOOxkfSGYz4RgQLCgqEAfm0OghUJhpDhpARHRMAEl4rQAPJoiRQrS8ADK+Dq7BxkOhsOstgcThcaFxHIJ8PaSJ8fgCeAAYnc0E4MAJhGJafkILwRDJmDQkozmfVwez8YSBE58iLOrwSjQUhD0XBhlRRuNtgAmABsMzmC0Qi2m1HGm1+/INnKJZpMxxKZ0uIGut3u5EQbuerxweEIJHI33oTGSgP1eJDxKRKJpkjgWN0AsNwsRnXJsCppbp2iZLLZBaFpBs9kcznzgsJRc6Yv8gRA0rEcoVIOVsrVGq1zB1LP71cS+NNtZMFrAVpttLtI3W2wA7AAWD0ZL0+tb+rZ4IMdwdh/AR05IZ1XG4Q+NIc7J6g3jTT5M2oH4mCwUhUTITA+HbAcaxJfBqVtQZdgSCshxMcx4gUXgAB9eGECJIygEcJSCRRBFGCA7FcXCyDgFVwhgER2FgXhCD0XgYDuPIShhXgTF6VgoF4AAjMJ0JkMiHWPKYAA5L3mV9ECUv0NnvHY3AUN8zgAZi/OMaATZ0AMwVMgnTL4wOzIJ/k4Hh6L2Tw4EOTRsRfHC9m7Hk+2kjwDm8KhxTHEIwgiKIYmchIkg4NISkybJcnyUIelIYpSlYCpql1RoWjaLcuh6PoBjQe0QEdCZvXOdTZivVSVlvTTfgC/YvCOGZIyQQyY2/GUHm9MyAF0rmgd4e15XhgBihRXMOChV0LF9eEeAQoLogByXKWSaVoX02mwbEfBDQyKxhgBsXhZrIbQ2vm9RNF4Zpml4AAeABaD6bEebgfDhMYkFAH5ZDUSQHwQR5HiAA=\"}\nimport { rendererClassic, transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n renderer: rendererClassic() // <--\n})\n```\n\nYou might need to reference `shiki-twoslash`'s CSS to make it look good. [Here](https://github.com/shikijs/shiki/blob/main/packages/twoslash/style-classic.css) we also copied the CSS from `shiki-twoslash` but it might need some cleanup.\n\n### `rendererFloatingVue`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/vitepress-twoslash/src/renderer-floating-vue.ts)\n\nThis renderer outputs Vue template syntax that using [Floating Vue](https://floating-vue.starpad.dev/) as the popup component (to render it outside the containers). This renderer is **NOT** directly usable but an internal renderer for the [VitePress integration](/packages/vitepress#twoslash). Listing it here for reference if you want to create your own renderer.\n\n## Options\n\n### Explicit Trigger\n\nWhen integrating with `@shikijs/markdown-it` or `rehype-shiki`, we may not want Twoslash to run on every code block. In this case, we can set `explicitTrigger` to `true` to only run on code blocks with `twoslash` presented in the codeframe.\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c33fc7b243f56e1595f93ca6e9e052fed95abb58a9edc5376b448c62984626f1\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvNKWZg4/CKQC2ZACoB3CHFZd8jCFnGS4AfkS81s+YpXqtOvQEkwsWgHkjE+dwsBlfHYAa3YrOQUlVVIAHTB2ZSwlNGlrCLtSTW1dOHxKECgIEQREEAAxZjElDAFhMW9pCF4RUhhmGl5mXgDg9hTw2yiBJWkHbPxedjAaAHNZY3kAOjy4NGZSBkQATipWGDBptFzEAEZt6jXpmA3qVIH7LL08jjBcRAAGKhF8NYqaci2AL4UdDYV4EYhkPI0ehMNicHh9GyRe6OHIGLwmcyWW7IjKjZyuOieeY8fyBEJhJHpWLxRLrRFpKKZVG5KgFIp4cqVUjVISieYNJotNowDpdcm9GT9XFDUgjB45CZTGCzNreOBLKgrNYbACsAHYdnsDkdTlRVqRLtcpVSmfick9Jq8AEyfb6yMSQ95AkE4PCEEjkc10a6MLCkQxkTB8SmMlFjYnqhZ0LAcETsNBWdjTS6kLEAIwgEF2cl4AB9eAAlFUAUVoWHLvGEsH4TqgeXZxRA1YAjoJ2C04LwAAZoe34YeC/Oi8PwPY0KBK6T4UUiaCi/OsQpBXiqVaC5hYVPVQ7sIc2uNB87TYrIZD5GD8ZiCVgMKhP1hwXAAXW/WotGwABzHEa+yHEgxy6uaFxXHgKZphmWY5pCOxOkgADMbo/J6/zOgCf4gGusB4LSSS8MADJ3HiCrjACAgRsovAAOQAAI5D0ABWcAAPRjjRTGxLEF5UcyYyMMAsS8Lw8HsOmmakNmuYWDIgiitx3G8AAPAAtNpsQAtweR7swSCgCGexwN4eBoAgAIAkAA=\"}\nimport { transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n explicitTrigger: true // <--\n})\n```\n\n````md\nIn markdown, you can use the following syntax to trigger Twoslash:\n\n```ts\n// this is a normal code block\n```\n\n```ts twoslash\n// this will run Twoslash\n```\n````\n\n## Integrations\n\nWhile you can set up Twoslash with Shiki on your own with the instructions above, you can also find high-level integrations with frameworks and tools here:\n\n- [VitePress](/packages/vitepress#twoslash) - A plugin to enable Twoslash support in VitePress.\n- [Nuxt](/packages/nuxt#twoslash-integration) - A module to enable Twoslash for Nuxt Content.\n- [Vocs](https://vocs.dev/docs/guides/twoslash) - Vocs has TwoSlash support built-in.\n- [Slidev](https://sli.dev/features/twoslash#twoslash-integration) - Slidev has TwoSlash support built-in.\n\n## Recipes\n\n### CDN Usage\n\nBy default [`twoslash`](https://github.com/twoslashes/twoslash/tree/main/packages/twoslash) runs on Node.js and relies on your local system to resolve TypeScript and types for the imports. Import it directly in non-Node.js environments would not work.\n\nLuckily, Twoslash implemented a virtual file system, which allow you to provide your own files for TypeScript to resolve in memory. However, loading these files in the browser is still a challenge. Thanks to the work on the [TypeScript WebSite](https://github.com/microsoft/TypeScript-Website), the TypeScript team has provided some utilities to fetch types on demand through CDN, they call it [Automatic Type Acquisition (ATA)](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata).\n\nWe make tiny wrappers around the building blocks and provide an easy-to-use API in [`twoslash-cdn`](https://twoslash.netlify.app/packages/cdn). For example:\n\n```js\n// FIXME: Replace with explicit versions in production\nimport { createTransformerFactory, rendererRich } from 'https://esm.sh/@shikijs/twoslash@latest/core'\nimport { codeToHtml } from 'https://esm.sh/shiki@latest'\nimport { createTwoslashFromCDN } from 'https://esm.sh/twoslash-cdn@latest'\nimport { createStorage } from 'https://esm.sh/unstorage@latest'\nimport indexedDbDriver from 'https://esm.sh/unstorage@latest/drivers/indexedb'\n\n// ============= Initialization =============\n\n// An example using unstorage with IndexedDB to cache the virtual file system\nconst storage = createStorage({\n driver: indexedDbDriver({ base: 'twoslash-cdn' }),\n})\n\nconst twoslash = createTwoslashFromCDN({\n storage,\n compilerOptions: {\n lib: ['esnext', 'dom'],\n },\n})\n\nconst transformerTwoslash = createTransformerFactory(twoslash.runSync)({\n renderer: rendererRich(),\n})\n\n// ============= Execution =============\n\nconst app = document.getElementById('app')\n\nconst source = `\nimport { ref } from 'vue'\n\nconsole.log(\"Hi! Shiki + Twoslash on CDN :)\")\n\nconst count = ref(0)\n// ^?\n`.trim()\n\n// Before rendering, we need to prepare the types, so that the rendering can happen synchronously\nawait twoslash.prepareTypes(source)\n\n// Then we can render the code\napp.innerHTML = await codeToHtml(source, {\n lang: 'ts',\n theme: 'vitesse-dark',\n transformers: [transformerTwoslash],\n})\n```\n","docs/packages/vitepress.md":"---\noutline: deep\n---\n\n# VitePress Integration\n\n[VitePress](https://vitepress.dev/) uses Shiki under the hood, so you don't need explicit integration.\n\nVitePress provides [a few options for customizing Shiki](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts#L66-L112). Learn more about them in the [VitePress documentation](https://vitepress.dev/reference/site-config#markdown).\n\n## Twoslash\n\nTo enable [TypeScript Twoslash](/packages/twoslash) (type hover on code snippets) in VitePress, we provide a VitePress plugin for easy setup. Pre-styled, with [Floating Vue](https://floating-vue.starpad.dev/) to display the type information out side of the code container.\n\n![\"Shiki](\"https://raw.githubusercontent.com/shikijs/shiki/main/docs/public/logo.svg\")
\n\n# Shiki 式\n\n[](https://www.npmjs.com/package/shiki)\n[](https://www.npmjs.com/package/shiki)\n[](https://app.codecov.io/gh/shikijs/shiki)\n\nA beautiful syntax highlighter based on TextMate grammars, accurate and powerful.\n\n[📚 **Documentation**](https://shiki.style)\n\n## License\n\n[MIT](./LICENSE)\n","packages/stream/README.md":"# @shikijs/stream\n\nStreaming colorization for [shiki](https://github.com/shikijs/shiki). Useful for highlighting text streams like LLM outputs.\n\n[Documentation](https://shiki.style/packages/stream)\n\n## License\n\nMIT\n","packages/themes/README.md":"# @shikijs/themes\n\nTextMate themes for Shiki.\n\n## License\n\nMIT\n","packages/transformers/README.md":"# @shikijs/transformers\n\nCommon transformers for [shiki](https://github.com/shikijs/shiki), inspired by [shiki-processor](https://github.com/innocenzi/shiki-processor).\n\n[Documentation](https://shiki.style/packages/transformers)\n\n## License\n\nMIT\n","packages/twoslash/README.md":"# @shikijs/twoslash\n\nA [shiki](https://github.com/shikijs/shiki) transformer for [TypeScript Twoslash](https://www.typescriptlang.org/dev/twoslash/).\n\n[Documentations](https://shiki.style/packages/twoslash)\n\n## License\n\nMIT\n","packages/types/README.md":"# @shikijs/types\n\nTypes for Shiki.\n\n## License\n\nMIT\n","packages/vitepress-twoslash/README.md":"# @shikijs/vitepress-twoslash\n\nEnable Twoslash support in VitePress.\n\n[Documentation](https://shiki.style/packages/vitepress#twoslash)\n\n## License\n\nMIT\n"},"files":{"docs/api.md":"# API References\n\n## `codeToHast`\n\nYou can also get the intermediate `hast` to do custom rendering without serializing them into HTML with `codeToHast`. You can also further integrate the AST with the [unified](https://github.com/unifiedjs) ecosystem.\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"aa0ea59b9742ed721640f4d1233696e3e09408080ce58a4fde6a5efd7f40382b\",\"data\":\"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=\"}\nimport { createHighlighter } from 'shiki'\n\nconst highlighter = await createHighlighter({\n themes: ['nord', 'min-light'],\n langs: ['javascript'],\n})\n// ---cut---\nconst root = highlighter.codeToHast(\n 'const a = 1',\n { lang: 'javascript', theme: 'nord' }\n)\n\nconsole.log(root)\n```\n\n\n\n```ts\n{\n type: 'root',\n children: [\n {\n type: 'element',\n tagName: 'pre',\n properties: {\n class: 'shiki vitesse-light',\n style: 'background-color:#ffffff;color:#393a34',\n tabindex: '0'\n },\n children: [\n {\n type: 'element',\n tagName: 'code',\n properties: {},\n children: [\n {\n type: 'element',\n tagName: 'span',\n properties: { class: 'line' },\n children: [\n {\n type: 'element',\n tagName: 'span',\n properties: { style: 'color:#AB5959' },\n children: [ { type: 'text', value: 'const' } ]\n },\n {\n type: 'element',\n tagName: 'span',\n properties: { style: 'color:#B07D48' },\n children: [ { type: 'text', value: ' a' } ]\n },\n {\n type: 'element',\n tagName: 'span',\n properties: { style: 'color:#999999' },\n children: [ { type: 'text', value: ' =' } ]\n },\n {\n type: 'element',\n tagName: 'span',\n properties: { style: 'color:#2F798A' },\n children: [ { type: 'text', value: ' 1' } ]\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}\n```\n","docs/packages/astro.md":"# Astro Integration\n\nYou don't need explicit integration in [Astro](https://astro.build/) as Astro already uses Shiki under the hood.\n\nLearn more about the configurations in the [Astro documentation](https://docs.astro.build/en/guides/syntax-highlighting/).\n","docs/packages/cli.md":"# @shikijs/cli\n\n()\n\n useEffect(() => {\n async function initializeHighlighter() {\n const h = await createHighlighter({\n themes: ['nord'],\n langs: ['javascript', 'typescript'],\n })\n setHighlighter(h)\n }\n initializeHighlighter()\n }, [])\n\n function animate() {\n setCode(`let hi = 'hello'`)\n }\n\n return (\n \n {highlighter && (\n <>\n \n {h => (\n <>\n \n \n )\n}\n```\n\n### Svelte\n\nImport `@shikijs/magic-move/svelte` and pass the highlighter instance to the `ShikiMagicMove` component.\n\n```svelte\n\n\n{#await highlighter then highlighter}\n ` as the outermost wrappers of code block html. If you use a custom Shiki [transformer](/guide/transformers), this behavior may be undesirable. For example, if the transformer produces\n\n```html\n\n \n \n …\n \n
\n\n```\n\nthe result after `markdown-it` processing will be\n\n```html\n\n \n \n \n \n …\n \n
\n \n \n
\n```\n\nWork around this by adding [olets/markdown-it-wrapperless-fence-rule](https://github.com/olets/markdown-it-wrapperless-fence-rule) to your `markdown-it` configuration, or by writing your own `markdown-it` fence rule (see [markdown-it#269](https://github.com/markdown-it/markdown-it/issues/269)).\n","docs/packages/monaco.md":"# Monaco Editor Integration\n\nShiki uses the same TextMate grammar and themes as VS Code, so it can be used to highlight Monaco Editor. Shiki provides an official integration for Monaco Editor. You can also use [modern-monaco](https://github.com/esm-dev/modern-monaco) that includes built-in Shiki integration.\n\n## @shikijs/monaco\n\n\n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHtml(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return \n}\n```\n\n### Custom Components\n\nYou can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.\n\n```tsx\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki'\n\nexport default function Page() {\n return (\n \n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHast(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n components: {\n // your custom `pre` element\n pre: props => \n },\n }) as JSX.Element\n}\n```\n\n## React Client Component\n\nFor client components, they are pre-rendered on server and hydrated/rendered on client.\nWe can start by creating a client `CodeBlock` component.\n\nCreate a `shared.ts` for highlighter:\n\n```ts\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki/bundle/web'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki/bundle/web'\n\nexport async function highlight(code: string, lang: BundledLanguage) {\n const out = await codeToHast(code, {\n lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n }) as JSX.Element\n}\n```\n\nIn your `codeblock.tsx`:\n\n```tsx\n'use client'\nimport { JSX, useLayoutEffect, useState } from 'react'\nimport { highlight } from './shared'\n\nexport function CodeBlock({ initial }: { initial?: JSX.Element }) {\n const [nodes, setNodes] = useState(initial)\n\n useLayoutEffect(() => {\n void highlight('console.log(\"Rendered on client\")', 'ts').then(setNodes)\n }, [])\n\n return nodes ?? Loading...
\n}\n```\n\nThe `initial` prop can be passed from a server component to pre-render the code block on server.\n\nIn your `page.tsx`:\n\n```tsx\nimport { CodeBlock } from './codeblock'\nimport { highlight } from './shared'\n\nexport default async function Page() {\n // `initial` is optional.\n return (\n \n \n )\n}\n```\n\n::: info\nThe above example uses the `shiki/bundle/web` bundle. You can change it to [Fine-grained Bundle](/guide/bundles#fine-grained-bundle) to fully control the bundled languages/themes.\n:::\n\n### Performance\n\nShiki lazy loads the requested languages and themes, the Next.js bundler can handle lazy imports automatically.\nImporting `shiki` or its web bundle is efficient enough for most Next.js applications, Fine-grained Bundle won't significantly impact the bundle size.\n\nIn addition, you can use the `createHighlighter` API to preload specific languages and themes.\nPlease refer to [Highlighter Usage](/guide/install#highlighter-usage) for further details.\n\n### Highlighter Instance\n\nIf you define a highlighter (without `await`) as a global variable, you can reference it directly from server and client components.\n\n```ts\nimport { createHighlighter } from 'shiki'\n\nconst highlighter = createHighlighter({\n themes: ['nord'],\n langs: ['javascript'],\n})\n\n// Inside an async server component, or client side `useEffect`\nconst html = (await highlighter).codeToHtml('const a = 1', {\n lang: 'javascript',\n theme: 'nord'\n})\n```\n","docs/packages/nuxt.md":"# Nuxt\n\n[Nuxt](https://nuxt.com) is a general-purpose meta-framework that gives you full control over your application. You can install Shiki along with integrations like ([markdown-it](/packages/markdown-it), [rehype](/packages/rehype)) or import manually as you needed.\n\nOn top of that, Nuxt also provide some module integrations for Shiki allowing you use it easier:\n\n- [`nuxt-shiki`](https://github.com/pi0/nuxt-shiki) - Shiki integration for client and server sides, with component usage.\n- [`@nuxt/content`](https://github.com/nuxt/content) - Nuxt Content has Shiki built-in for markdown files. [You can enable it with the `highlight` option](https://content.nuxt.com/docs/getting-started/configuration#highlight).\n - [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc) - The underlying module of `@nuxt/content` that provides Markdown Component (MDC) syntax as well as Shiki for syntax highlighting.\n\n## TwoSlash Integration\n\n- [`nuxt-content-twoslash`](https://github.com/antfu/nuxt-content-twoslash) - A Nuxt module that adds Twoslash support to Nuxt Content. Twoslash information are evaluated at build time.\n","docs/packages/rehype.md":"---\noutline: deep\n---\n\n# @shikijs/rehype\n\n you want to highlight\nconst textStream = getTextStreamFromSomewhere()\n\n// Pipe the text stream through the token stream\nconst tokensStream = textStream\n .pipeThrough(new CodeToTokenTransformStream({\n highlighter,\n lang: 'javascript',\n theme: 'nord',\n allowRecalls: true, // see explanation below\n }))\n```\n\n### `allowRecalls`\n\nDue to the fact that highlighting may change based on the context of the code, themed tokens can be re-evaluated as the stream progresses. Because streams are one-directional, `@shikijs/stream` emits a special **recall** token that tells the receiver to discard the last N tokens that changed.\n\nBy default, `CodeToTokenTransformStream` only emits **stable** tokens — no recalls. The trade-off is coarser granularity, usually one line at a time.\n\nFor stream consumers that can handle recalls (e.g. the bundled Vue, React, Solid, and Svelte components), set `allowRecalls: true` to get finer-grained tokens.\n\nTypically recalls should be handled like:\n\n```ts\nimport type { RecallToken } from '@shikijs/stream'\nimport type { ThemedToken } from 'shiki'\n\nconst receivedTokens: ThemedToken[] = []\n\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n if ('recall' in token) {\n // discard the last `token.recall` tokens\n receivedTokens.length -= token.recall\n }\n else {\n receivedTokens.push(token)\n }\n },\n}))\n```\n\n## Consume the Token Stream\n\n### Manually\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n console.log(token)\n },\n}))\n```\n\nOr in Node.js:\n\n```ts\nfor await (const token of tokensStream) {\n console.log(token)\n}\n```\n\n### Vue\n\n```vue\n\n\n\n ` tag is modified: ``\n\n::: details HTML Output\n\n```html\n\n \n \n \n function(){\n \n console.log('hewwo') \n \n \n console.log('hello') \n \n }\n \n \n
\n```\n\n:::\n\n---\n\n### `transformerNotationHighlight`\n\nUse `[!code highlight]` to highlight a line.\n\n````md\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [\\!code highlight]\nconsole.log('Not highlighted')\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [!code highlight]\nconsole.log('Not highlighted')\n```\n\n- `// [!code highlight]` outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also highlight multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [\\!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n````\n\nRenders:\n\n```ts\n// [!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n---\n\n### `transformerNotationWordHighlight`\n\nUse `[!code word:Hello]` to highlight the word `Hello` in any subsequent code.\n\n````md\n```ts\n// [\\!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\n// [!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\nYou can also specify the number of lines to highlight words on, e.g. `[!code word:Hello:1]` will only highlight occurrences of `Hello` on the next line.\n\n````md\n```ts\n// [\\!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders:\n\n```ts\n// [!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\n---\n\n### `transformerNotationFocus`\n\nUse `[!code focus]` to focus a line.\n\n````md\n```ts\nconsole.log('Not focused');\nconsole.log('Focused') // [\\!code focus]\nconsole.log('Not focused');\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not focused')\nconsole.log('Focused') // [!code focus]\nconsole.log('Not focused')\n```\n\n- Outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also focus multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n````\n\nRenders:\n\n```ts\n// [!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n\n---\n\n### `transformerNotationErrorLevel`\n\nUse `[!code error]`, `[!code warning]`, and `[!code info]` to mark a line with an error, warning, or info levels.\n\n````md\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [\\!code error]\nconsole.warn('Warning') // [\\!code warning]\nconsole.log('Info') // [\\!code info]\n```\n````\n\n- Outputs: `` for errors\n- Outputs: `` for warnings\n- Outputs: `` for info\n- The outer `` tag is modified: ``\n\nWith some additional CSS rules, you can make it look like this:\n\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [!code error]\nconsole.warn('Warning') // [!code warning]\nconsole.log('Info') // [!code info]\n```\n\n---\n\n### `transformerRenderWhitespace`\n\nRender whitespaces (tabs and spaces) as individual spans, with classes `tab` and `space`.\n\nOptions:\n\n- `position`: `'all' | 'boundary' | 'trailing' | 'leading'`. Default `'all'`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction block( ) {\n space( )\n tab( ) \n}
\n\n::: details Example CSS\n\n```css\npre.shiki .tab,\npre.shiki .space {\n position: relative;\n}\n\npre.shiki .tab::before {\n content: '⇥';\n position: absolute;\n opacity: 0.3;\n}\n\npre.shiki .space::before {\n content: '·';\n position: absolute;\n opacity: 0.3;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderIndentGuides`\n\nRender indentations as individual spans, with class `indent`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction func() {\n console.log(1);\n\n for (const i of []) {\n console.log(2);\n }\n}
\n\n::: details Example CSS\n\n```css\npre.shiki .indent {\n display: inline-block;\n position: relative;\n left: var(--indent-offset);\n}\n\npre.shiki .indent:empty {\n height: 1lh;\n vertical-align: bottom;\n}\n\npre.shiki .indent::before {\n content: '';\n position: absolute;\n opacity: 0.15;\n width: 1px;\n height: 100%;\n background-color: currentColor;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderLineNumber`\n\nRender line numbers as individual spans, with class `line-number`.\n\n```ts\nimport { transformerRenderLineNumber } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n transformers: [\n transformerRenderLineNumber(),\n ],\n})\n```\n\nOptions:\n\n- `start`: Start number. Default `1`.\n- `classLineNumber`: Class for line number. Default `'line-number'`.\n\nWith some additional CSS rules, you can make it look like this:\n\n```css\npre.shiki .line-number {\n user-select: none;\n opacity: 0.5;\n margin-right: 1em;\n}\n```\n\n---\n\n### `transformerMetaHighlight`\n\nHighlight lines based on the [meta string](/guide/transformers#meta) provided on the code snippet.\n\n````md\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n````\n\nRenders (with custom CSS rules):\n\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n\n- Outputs: `` for included lines.\n\n### `transformerMetaWordHighlight`\n\nHighlight words based on the meta string provided on the code snippet.\n\n````md\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg)\nconsole.log(msg) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\n---\n\n### `transformerCompactLineOptions`\n\nSupport for `shiki`'s `lineOptions` that is removed in `shiki`.\n\n---\n\n### `transformerRemoveLineBreak`\n\nRemove line breaks between ``. Useful when you set `display: block` to `.line` in CSS.\n\n---\n\n### `transformerRemoveNotationEscape`\n\nTransform `// [\\!code ...]` to `// [!code ...]`.\nAvoid rendering the escaped notation syntax as it is.\n\n---\n\n### `transformerStyleToClass`\n\nConvert Shiki's inline styles to unique classes.\n\nClass names are generated based on the hash value of the style object with the prefix/suffix you provide. You can put this transformer in multiple highlights passes and then get the CSS at the end to reuse the exact same styles. As Shiki doesn't handle CSS, it's on your integration to decide how to extract and apply/bundle the CSS.\n\nFor example:\n\n```ts\nimport { transformerStyleToClass } from '@shikijs/transformers'\nimport { codeToHtml } from 'shiki'\n\nconst toClass = transformerStyleToClass({ // [!code highlight:3]\n classPrefix: '__shiki_',\n})\n\nconst code = `console.log('hello')`\nconst html = await codeToHtml(code, {\n lang: 'ts',\n themes: {\n dark: 'vitesse-dark',\n light: 'vitesse-light',\n },\n defaultColor: false,\n transformers: [toClass], // [!code highlight]\n})\n\n// The transformer instance exposes some methods to get the CSS\nconst css = toClass.getCSS() // [!code highlight]\n\n// use `html` and `css` in your app\n```\n\nHTML output:\n\n```html\n\n console\n .\n log\n (\n '\n hello\n '\n )\n
\n```\n\nCSS output:\n\n```css\n.__shiki_14cn0u {\n --shiki-dark: #bd976a;\n --shiki-light: #b07d48;\n}\n.__shiki_ps5uht {\n --shiki-dark: #666666;\n --shiki-light: #999999;\n}\n.__shiki_1zrdwt {\n --shiki-dark: #80a665;\n --shiki-light: #59873a;\n}\n.__shiki_236mh3 {\n --shiki-dark: #c98a7d77;\n --shiki-light: #b5695977;\n}\n.__shiki_1g4r39 {\n --shiki-dark: #c98a7d;\n --shiki-light: #b56959;\n}\n.__shiki_9knfln {\n --shiki-dark: #dbd7caee;\n --shiki-light: #393a34;\n --shiki-dark-bg: #121212;\n --shiki-light-bg: #ffffff;\n}\n```\n\n### `transformerRemoveComments`\n\nRemove comments from the code. It works by checking the internal grammar token metadata to determine if the token is a comment.\n\nThis transformer requires `includeExplanation: true` to work.\n\n```ts\nimport { transformerRemoveComments } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n lang: 'ts',\n includeExplanation: true, // [!code highlight]\n transformers: [\n transformerRemoveComments(), // [!code highlight]\n ],\n})\n```\n\nOptions:\n\n- `removeEmptyLines`: Remove lines that become empty after removing comments. Default `true`.\n\nFor example:\n\n````md\n```js\n// This is a comment\nconst x = 1 // Inline comment\n/* Block comment */\nconst y = 2\n\n// Another comment\n```\n````\n\nWill renders:\n\n```js\nconst x = 1\nconst y = 2\n```\n","docs/packages/twoslash.md":"---\noutline: deep\n---\n\n# @shikijs/twoslash\n\n = {\n title: 'Delete inactive users'.toUpperCase(),\n// ^?\n}\n\ntodo.title = 'Hello'\n\nNumber.parseInt('123', 10)\n// ^|\n\n //\n //\n```\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c6f2791b81c2170bb12e4d54f17b345c35c290fb6b3e803987a0875ad1778705\",\"data\":\"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\"}\nimport { createHighlighterCore } from 'shiki/core'\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript'\n\nconst highlighter = await createHighlighterCore({\n engine: createJavaScriptRegexEngine()\n})\n\n// @log: Custom log message\nconst a = 1\n// @error: Custom error message\nconst b = 1\n// @warn: Custom warning message\nconst c = 1\n// @annotate: Custom annotation message\n```\n\n---\n\n### `rendererClassic`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/twoslash/src/renderer-classic.ts)\n\nThis renderer aligns with the output of legacy [`shiki-twoslash`](https://github.com/shikijs/twoslash).\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"be50298f5ea6976d501abea603d4b03abe8280f3bf0a7b10df97e47172449e7c\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvUjDCwZpAMKsucdiMbdEvACoB3CHBVx8AJVnyyAHTDsAtlgik00i2TLLV6yiCgQRCIggOvgwvLD8zIKsLjJy7qS8bOwA5rZgKbx67Gj4vLlhTqnsYGy8AAYAAibsANbsAFZwAPRoBkZc+OW8EIJoWH0AdD5waMzOSACcVKyyKblIAIwArFRjpCkwDEFxlkrGaiI+HGC4iAAMVCL448xiZFMAvhTo2GcExA9rdNsgLBxcPhCUTiST5UjMMBwfhOOxkfSGYz4RgQLCgqEAfm0OghUJhpDhpARHRMAEl4rQAPJoiRQrS8ADK+Dq7BxkOhsOstgcThcaFxHIJ8PaSJ8fgCeAAYnc0E4MAJhGJafkILwRDJmDQkozmfVwez8YSBE58iLOrwSjQUhD0XBhlRRuNtgAmABsMzmC0Qi2m1HGm1+/INnKJZpMxxKZ0uIGut3u5EQbuerxweEIJHI33oTGSgP1eJDxKRKJpkjgWN0AsNwsRnXJsCppbp2iZLLZBaFpBs9kcznzgsJRc6Yv8gRA0rEcoVIOVsrVGq1zB1LP71cS+NNtZMFrAVpttLtI3W2wA7AAWD0ZL0+tb+rZ4IMdwdh/AR05IZ1XG4Q+NIc7J6g3jTT5M2oH4mCwUhUTITA+HbAcaxJfBqVtQZdgSCshxMcx4gUXgAB9eGECJIygEcJSCRRBFGCA7FcXCyDgFVwhgER2FgXhCD0XgYDuPIShhXgTF6VgoF4AAjMJ0JkMiHWPKYAA5L3mV9ECUv0NnvHY3AUN8zgAZi/OMaATZ0AMwVMgnTL4wOzIJ/k4Hh6L2Tw4EOTRsRfHC9m7Hk+2kjwDm8KhxTHEIwgiKIYmchIkg4NISkybJcnyUIelIYpSlYCpql1RoWjaLcuh6PoBjQe0QEdCZvXOdTZivVSVlvTTfgC/YvCOGZIyQQyY2/GUHm9MyAF0rmgd4e15XhgBihRXMOChV0LF9eEeAQoLogByXKWSaVoX02mwbEfBDQyKxhgBsXhZrIbQ2vm9RNF4Zpml4AAeABaD6bEebgfDhMYkFAH5ZDUSQHwQR5HiAA=\"}\nimport { rendererClassic, transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n renderer: rendererClassic() // <--\n})\n```\n\nYou might need to reference `shiki-twoslash`'s CSS to make it look good. [Here](https://github.com/shikijs/shiki/blob/main/packages/twoslash/style-classic.css) we also copied the CSS from `shiki-twoslash` but it might need some cleanup.\n\n### `rendererFloatingVue`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/vitepress-twoslash/src/renderer-floating-vue.ts)\n\nThis renderer outputs Vue template syntax that using [Floating Vue](https://floating-vue.starpad.dev/) as the popup component (to render it outside the containers). This renderer is **NOT** directly usable but an internal renderer for the [VitePress integration](/packages/vitepress#twoslash). Listing it here for reference if you want to create your own renderer.\n\n## Options\n\n### Explicit Trigger\n\nWhen integrating with `@shikijs/markdown-it` or `rehype-shiki`, we may not want Twoslash to run on every code block. In this case, we can set `explicitTrigger` to `true` to only run on code blocks with `twoslash` presented in the codeframe.\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c33fc7b243f56e1595f93ca6e9e052fed95abb58a9edc5376b448c62984626f1\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvNKWZg4/CKQC2ZACoB3CHFZd8jCFnGS4AfkS81s+YpXqtOvQEkwsWgHkjE+dwsBlfHYAa3YrOQUlVVIAHTB2ZSwlNGlrCLtSTW1dOHxKECgIEQREEAAxZjElDAFhMW9pCF4RUhhmGl5mXgDg9hTw2yiBJWkHbPxedjAaAHNZY3kAOjy4NGZSBkQATipWGDBptFzEAEZt6jXpmA3qVIH7LL08jjBcRAAGKhF8NYqaci2AL4UdDYV4EYhkPI0ehMNicHh9GyRe6OHIGLwmcyWW7IjKjZyuOieeY8fyBEJhJHpWLxRLrRFpKKZVG5KgFIp4cqVUjVISieYNJotNowDpdcm9GT9XFDUgjB45CZTGCzNreOBLKgrNYbACsAHYdnsDkdTlRVqRLtcpVSmfick9Jq8AEyfb6yMSQ95AkE4PCEEjkc10a6MLCkQxkTB8SmMlFjYnqhZ0LAcETsNBWdjTS6kLEAIwgEF2cl4AB9eAAlFUAUVoWHLvGEsH4TqgeXZxRA1YAjoJ2C04LwAAZoe34YeC/Oi8PwPY0KBK6T4UUiaCi/OsQpBXiqVaC5hYVPVQ7sIc2uNB87TYrIZD5GD8ZiCVgMKhP1hwXAAXW/WotGwABzHEa+yHEgxy6uaFxXHgKZphmWY5pCOxOkgADMbo/J6/zOgCf4gGusB4LSSS8MADJ3HiCrjACAgRsovAAOQAAI5D0ABWcAAPRjjRTGxLEF5UcyYyMMAsS8Lw8HsOmmakNmuYWDIgiitx3G8AAPAAtNpsQAtweR7swSCgCGexwN4eBoAgAIAkAA=\"}\nimport { transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n explicitTrigger: true // <--\n})\n```\n\n````md\nIn markdown, you can use the following syntax to trigger Twoslash:\n\n```ts\n// this is a normal code block\n```\n\n```ts twoslash\n// this will run Twoslash\n```\n````\n\n## Integrations\n\nWhile you can set up Twoslash with Shiki on your own with the instructions above, you can also find high-level integrations with frameworks and tools here:\n\n- [VitePress](/packages/vitepress#twoslash) - A plugin to enable Twoslash support in VitePress.\n- [Nuxt](/packages/nuxt#twoslash-integration) - A module to enable Twoslash for Nuxt Content.\n- [Vocs](https://vocs.dev/docs/guides/twoslash) - Vocs has TwoSlash support built-in.\n- [Slidev](https://sli.dev/features/twoslash#twoslash-integration) - Slidev has TwoSlash support built-in.\n\n## Recipes\n\n### CDN Usage\n\nBy default [`twoslash`](https://github.com/twoslashes/twoslash/tree/main/packages/twoslash) runs on Node.js and relies on your local system to resolve TypeScript and types for the imports. Import it directly in non-Node.js environments would not work.\n\nLuckily, Twoslash implemented a virtual file system, which allow you to provide your own files for TypeScript to resolve in memory. However, loading these files in the browser is still a challenge. Thanks to the work on the [TypeScript WebSite](https://github.com/microsoft/TypeScript-Website), the TypeScript team has provided some utilities to fetch types on demand through CDN, they call it [Automatic Type Acquisition (ATA)](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata).\n\nWe make tiny wrappers around the building blocks and provide an easy-to-use API in [`twoslash-cdn`](https://twoslash.netlify.app/packages/cdn). For example:\n\n```js\n// FIXME: Replace with explicit versions in production\nimport { createTransformerFactory, rendererRich } from 'https://esm.sh/@shikijs/twoslash@latest/core'\nimport { codeToHtml } from 'https://esm.sh/shiki@latest'\nimport { createTwoslashFromCDN } from 'https://esm.sh/twoslash-cdn@latest'\nimport { createStorage } from 'https://esm.sh/unstorage@latest'\nimport indexedDbDriver from 'https://esm.sh/unstorage@latest/drivers/indexedb'\n\n// ============= Initialization =============\n\n// An example using unstorage with IndexedDB to cache the virtual file system\nconst storage = createStorage({\n driver: indexedDbDriver({ base: 'twoslash-cdn' }),\n})\n\nconst twoslash = createTwoslashFromCDN({\n storage,\n compilerOptions: {\n lib: ['esnext', 'dom'],\n },\n})\n\nconst transformerTwoslash = createTransformerFactory(twoslash.runSync)({\n renderer: rendererRich(),\n})\n\n// ============= Execution =============\n\nconst app = document.getElementById('app')\n\nconst source = `\nimport { ref } from 'vue'\n\nconsole.log(\"Hi! Shiki + Twoslash on CDN :)\")\n\nconst count = ref(0)\n// ^?\n`.trim()\n\n// Before rendering, we need to prepare the types, so that the rendering can happen synchronously\nawait twoslash.prepareTypes(source)\n\n// Then we can render the code\napp.innerHTML = await codeToHtml(source, {\n lang: 'ts',\n theme: 'vitesse-dark',\n transformers: [transformerTwoslash],\n})\n```\n","docs/packages/vitepress.md":"---\noutline: deep\n---\n\n# VitePress Integration\n\n[VitePress](https://vitepress.dev/) uses Shiki under the hood, so you don't need explicit integration.\n\nVitePress provides [a few options for customizing Shiki](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts#L66-L112). Learn more about them in the [VitePress documentation](https://vitepress.dev/reference/site-config#markdown).\n\n## Twoslash\n\nTo enable [TypeScript Twoslash](/packages/twoslash) (type hover on code snippets) in VitePress, we provide a VitePress plugin for easy setup. Pre-styled, with [Floating Vue](https://floating-vue.starpad.dev/) to display the type information out side of the code container.\n\n()\n\n useEffect(() => {\n async function initializeHighlighter() {\n const h = await createHighlighter({\n themes: ['nord'],\n langs: ['javascript', 'typescript'],\n })\n setHighlighter(h)\n }\n initializeHighlighter()\n }, [])\n\n function animate() {\n setCode(`let hi = 'hello'`)\n }\n\n return (\n \n {highlighter && (\n <>\n \n {h => (\n <>\n \n \n )\n}\n```\n\n### Svelte\n\nImport `@shikijs/magic-move/svelte` and pass the highlighter instance to the `ShikiMagicMove` component.\n\n```svelte\n\n\n{#await highlighter then highlighter}\n ` as the outermost wrappers of code block html. If you use a custom Shiki [transformer](/guide/transformers), this behavior may be undesirable. For example, if the transformer produces\n\n```html\n\n \n \n …\n \n
\n\n```\n\nthe result after `markdown-it` processing will be\n\n```html\n\n \n \n \n \n …\n \n
\n \n \n
\n```\n\nWork around this by adding [olets/markdown-it-wrapperless-fence-rule](https://github.com/olets/markdown-it-wrapperless-fence-rule) to your `markdown-it` configuration, or by writing your own `markdown-it` fence rule (see [markdown-it#269](https://github.com/markdown-it/markdown-it/issues/269)).\n","isInternal":false,"tokens":14060,"sizeBytes":22466},{"name":"monaco.md","path":"docs/packages/monaco.md","rawUrl":"https://raw.githubusercontent.com/shikijs/shiki/HEAD/docs/packages/monaco.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"# Monaco Editor Integration\n\nShiki uses the same TextMate grammar and themes as VS Code, so it can be used to highlight Monaco Editor. Shiki provides an official integration for Monaco Editor. You can also use [modern-monaco](https://github.com/esm-dev/modern-monaco) that includes built-in Shiki integration.\n\n## @shikijs/monaco\n\n\n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHtml(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return \n}\n```\n\n### Custom Components\n\nYou can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.\n\n```tsx\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki'\n\nexport default function Page() {\n return (\n \n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHast(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n components: {\n // your custom `pre` element\n pre: props => \n },\n }) as JSX.Element\n}\n```\n\n## React Client Component\n\nFor client components, they are pre-rendered on server and hydrated/rendered on client.\nWe can start by creating a client `CodeBlock` component.\n\nCreate a `shared.ts` for highlighter:\n\n```ts\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki/bundle/web'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki/bundle/web'\n\nexport async function highlight(code: string, lang: BundledLanguage) {\n const out = await codeToHast(code, {\n lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n }) as JSX.Element\n}\n```\n\nIn your `codeblock.tsx`:\n\n```tsx\n'use client'\nimport { JSX, useLayoutEffect, useState } from 'react'\nimport { highlight } from './shared'\n\nexport function CodeBlock({ initial }: { initial?: JSX.Element }) {\n const [nodes, setNodes] = useState(initial)\n\n useLayoutEffect(() => {\n void highlight('console.log(\"Rendered on client\")', 'ts').then(setNodes)\n }, [])\n\n return nodes ?? Loading...
\n}\n```\n\nThe `initial` prop can be passed from a server component to pre-render the code block on server.\n\nIn your `page.tsx`:\n\n```tsx\nimport { CodeBlock } from './codeblock'\nimport { highlight } from './shared'\n\nexport default async function Page() {\n // `initial` is optional.\n return (\n \n \n )\n}\n```\n\n::: info\nThe above example uses the `shiki/bundle/web` bundle. You can change it to [Fine-grained Bundle](/guide/bundles#fine-grained-bundle) to fully control the bundled languages/themes.\n:::\n\n### Performance\n\nShiki lazy loads the requested languages and themes, the Next.js bundler can handle lazy imports automatically.\nImporting `shiki` or its web bundle is efficient enough for most Next.js applications, Fine-grained Bundle won't significantly impact the bundle size.\n\nIn addition, you can use the `createHighlighter` API to preload specific languages and themes.\nPlease refer to [Highlighter Usage](/guide/install#highlighter-usage) for further details.\n\n### Highlighter Instance\n\nIf you define a highlighter (without `await`) as a global variable, you can reference it directly from server and client components.\n\n```ts\nimport { createHighlighter } from 'shiki'\n\nconst highlighter = createHighlighter({\n themes: ['nord'],\n langs: ['javascript'],\n})\n\n// Inside an async server component, or client side `useEffect`\nconst html = (await highlighter).codeToHtml('const a = 1', {\n lang: 'javascript',\n theme: 'nord'\n})\n```\n","isInternal":false,"tokens":1228,"sizeBytes":4897},{"name":"nuxt.md","path":"docs/packages/nuxt.md","rawUrl":"https://raw.githubusercontent.com/shikijs/shiki/HEAD/docs/packages/nuxt.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"# Nuxt\n\n[Nuxt](https://nuxt.com) is a general-purpose meta-framework that gives you full control over your application. You can install Shiki along with integrations like ([markdown-it](/packages/markdown-it), [rehype](/packages/rehype)) or import manually as you needed.\n\nOn top of that, Nuxt also provide some module integrations for Shiki allowing you use it easier:\n\n- [`nuxt-shiki`](https://github.com/pi0/nuxt-shiki) - Shiki integration for client and server sides, with component usage.\n- [`@nuxt/content`](https://github.com/nuxt/content) - Nuxt Content has Shiki built-in for markdown files. [You can enable it with the `highlight` option](https://content.nuxt.com/docs/getting-started/configuration#highlight).\n - [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc) - The underlying module of `@nuxt/content` that provides Markdown Component (MDC) syntax as well as Shiki for syntax highlighting.\n\n## TwoSlash Integration\n\n- [`nuxt-content-twoslash`](https://github.com/antfu/nuxt-content-twoslash) - A Nuxt module that adds Twoslash support to Nuxt Content. Twoslash information are evaluated at build time.\n","isInternal":false,"tokens":277,"sizeBytes":1121},{"name":"rehype.md","path":"docs/packages/rehype.md","rawUrl":"https://raw.githubusercontent.com/shikijs/shiki/HEAD/docs/packages/rehype.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\noutline: deep\n---\n\n# @shikijs/rehype\n\n you want to highlight\nconst textStream = getTextStreamFromSomewhere()\n\n// Pipe the text stream through the token stream\nconst tokensStream = textStream\n .pipeThrough(new CodeToTokenTransformStream({\n highlighter,\n lang: 'javascript',\n theme: 'nord',\n allowRecalls: true, // see explanation below\n }))\n```\n\n### `allowRecalls`\n\nDue to the fact that highlighting may change based on the context of the code, themed tokens can be re-evaluated as the stream progresses. Because streams are one-directional, `@shikijs/stream` emits a special **recall** token that tells the receiver to discard the last N tokens that changed.\n\nBy default, `CodeToTokenTransformStream` only emits **stable** tokens — no recalls. The trade-off is coarser granularity, usually one line at a time.\n\nFor stream consumers that can handle recalls (e.g. the bundled Vue, React, Solid, and Svelte components), set `allowRecalls: true` to get finer-grained tokens.\n\nTypically recalls should be handled like:\n\n```ts\nimport type { RecallToken } from '@shikijs/stream'\nimport type { ThemedToken } from 'shiki'\n\nconst receivedTokens: ThemedToken[] = []\n\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n if ('recall' in token) {\n // discard the last `token.recall` tokens\n receivedTokens.length -= token.recall\n }\n else {\n receivedTokens.push(token)\n }\n },\n}))\n```\n\n## Consume the Token Stream\n\n### Manually\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n console.log(token)\n },\n}))\n```\n\nOr in Node.js:\n\n```ts\nfor await (const token of tokensStream) {\n console.log(token)\n}\n```\n\n### Vue\n\n```vue\n\n\n\n ` tag is modified: ``\n\n::: details HTML Output\n\n```html\n\n \n \n \n function(){\n \n console.log('hewwo') \n \n \n console.log('hello') \n \n }\n \n \n
\n```\n\n:::\n\n---\n\n### `transformerNotationHighlight`\n\nUse `[!code highlight]` to highlight a line.\n\n````md\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [\\!code highlight]\nconsole.log('Not highlighted')\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [!code highlight]\nconsole.log('Not highlighted')\n```\n\n- `// [!code highlight]` outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also highlight multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [\\!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n````\n\nRenders:\n\n```ts\n// [!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n---\n\n### `transformerNotationWordHighlight`\n\nUse `[!code word:Hello]` to highlight the word `Hello` in any subsequent code.\n\n````md\n```ts\n// [\\!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\n// [!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\nYou can also specify the number of lines to highlight words on, e.g. `[!code word:Hello:1]` will only highlight occurrences of `Hello` on the next line.\n\n````md\n```ts\n// [\\!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders:\n\n```ts\n// [!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\n---\n\n### `transformerNotationFocus`\n\nUse `[!code focus]` to focus a line.\n\n````md\n```ts\nconsole.log('Not focused');\nconsole.log('Focused') // [\\!code focus]\nconsole.log('Not focused');\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not focused')\nconsole.log('Focused') // [!code focus]\nconsole.log('Not focused')\n```\n\n- Outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also focus multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n````\n\nRenders:\n\n```ts\n// [!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n\n---\n\n### `transformerNotationErrorLevel`\n\nUse `[!code error]`, `[!code warning]`, and `[!code info]` to mark a line with an error, warning, or info levels.\n\n````md\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [\\!code error]\nconsole.warn('Warning') // [\\!code warning]\nconsole.log('Info') // [\\!code info]\n```\n````\n\n- Outputs: `` for errors\n- Outputs: `` for warnings\n- Outputs: `` for info\n- The outer `` tag is modified: ``\n\nWith some additional CSS rules, you can make it look like this:\n\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [!code error]\nconsole.warn('Warning') // [!code warning]\nconsole.log('Info') // [!code info]\n```\n\n---\n\n### `transformerRenderWhitespace`\n\nRender whitespaces (tabs and spaces) as individual spans, with classes `tab` and `space`.\n\nOptions:\n\n- `position`: `'all' | 'boundary' | 'trailing' | 'leading'`. Default `'all'`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction block( ) {\n space( )\n tab( ) \n}
\n\n::: details Example CSS\n\n```css\npre.shiki .tab,\npre.shiki .space {\n position: relative;\n}\n\npre.shiki .tab::before {\n content: '⇥';\n position: absolute;\n opacity: 0.3;\n}\n\npre.shiki .space::before {\n content: '·';\n position: absolute;\n opacity: 0.3;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderIndentGuides`\n\nRender indentations as individual spans, with class `indent`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction func() {\n console.log(1);\n\n for (const i of []) {\n console.log(2);\n }\n}
\n\n::: details Example CSS\n\n```css\npre.shiki .indent {\n display: inline-block;\n position: relative;\n left: var(--indent-offset);\n}\n\npre.shiki .indent:empty {\n height: 1lh;\n vertical-align: bottom;\n}\n\npre.shiki .indent::before {\n content: '';\n position: absolute;\n opacity: 0.15;\n width: 1px;\n height: 100%;\n background-color: currentColor;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderLineNumber`\n\nRender line numbers as individual spans, with class `line-number`.\n\n```ts\nimport { transformerRenderLineNumber } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n transformers: [\n transformerRenderLineNumber(),\n ],\n})\n```\n\nOptions:\n\n- `start`: Start number. Default `1`.\n- `classLineNumber`: Class for line number. Default `'line-number'`.\n\nWith some additional CSS rules, you can make it look like this:\n\n```css\npre.shiki .line-number {\n user-select: none;\n opacity: 0.5;\n margin-right: 1em;\n}\n```\n\n---\n\n### `transformerMetaHighlight`\n\nHighlight lines based on the [meta string](/guide/transformers#meta) provided on the code snippet.\n\n````md\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n````\n\nRenders (with custom CSS rules):\n\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n\n- Outputs: `` for included lines.\n\n### `transformerMetaWordHighlight`\n\nHighlight words based on the meta string provided on the code snippet.\n\n````md\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg)\nconsole.log(msg) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\n---\n\n### `transformerCompactLineOptions`\n\nSupport for `shiki`'s `lineOptions` that is removed in `shiki`.\n\n---\n\n### `transformerRemoveLineBreak`\n\nRemove line breaks between ``. Useful when you set `display: block` to `.line` in CSS.\n\n---\n\n### `transformerRemoveNotationEscape`\n\nTransform `// [\\!code ...]` to `// [!code ...]`.\nAvoid rendering the escaped notation syntax as it is.\n\n---\n\n### `transformerStyleToClass`\n\nConvert Shiki's inline styles to unique classes.\n\nClass names are generated based on the hash value of the style object with the prefix/suffix you provide. You can put this transformer in multiple highlights passes and then get the CSS at the end to reuse the exact same styles. As Shiki doesn't handle CSS, it's on your integration to decide how to extract and apply/bundle the CSS.\n\nFor example:\n\n```ts\nimport { transformerStyleToClass } from '@shikijs/transformers'\nimport { codeToHtml } from 'shiki'\n\nconst toClass = transformerStyleToClass({ // [!code highlight:3]\n classPrefix: '__shiki_',\n})\n\nconst code = `console.log('hello')`\nconst html = await codeToHtml(code, {\n lang: 'ts',\n themes: {\n dark: 'vitesse-dark',\n light: 'vitesse-light',\n },\n defaultColor: false,\n transformers: [toClass], // [!code highlight]\n})\n\n// The transformer instance exposes some methods to get the CSS\nconst css = toClass.getCSS() // [!code highlight]\n\n// use `html` and `css` in your app\n```\n\nHTML output:\n\n```html\n\n console\n .\n log\n (\n '\n hello\n '\n )\n
\n```\n\nCSS output:\n\n```css\n.__shiki_14cn0u {\n --shiki-dark: #bd976a;\n --shiki-light: #b07d48;\n}\n.__shiki_ps5uht {\n --shiki-dark: #666666;\n --shiki-light: #999999;\n}\n.__shiki_1zrdwt {\n --shiki-dark: #80a665;\n --shiki-light: #59873a;\n}\n.__shiki_236mh3 {\n --shiki-dark: #c98a7d77;\n --shiki-light: #b5695977;\n}\n.__shiki_1g4r39 {\n --shiki-dark: #c98a7d;\n --shiki-light: #b56959;\n}\n.__shiki_9knfln {\n --shiki-dark: #dbd7caee;\n --shiki-light: #393a34;\n --shiki-dark-bg: #121212;\n --shiki-light-bg: #ffffff;\n}\n```\n\n### `transformerRemoveComments`\n\nRemove comments from the code. It works by checking the internal grammar token metadata to determine if the token is a comment.\n\nThis transformer requires `includeExplanation: true` to work.\n\n```ts\nimport { transformerRemoveComments } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n lang: 'ts',\n includeExplanation: true, // [!code highlight]\n transformers: [\n transformerRemoveComments(), // [!code highlight]\n ],\n})\n```\n\nOptions:\n\n- `removeEmptyLines`: Remove lines that become empty after removing comments. Default `true`.\n\nFor example:\n\n````md\n```js\n// This is a comment\nconst x = 1 // Inline comment\n/* Block comment */\nconst y = 2\n\n// Another comment\n```\n````\n\nWill renders:\n\n```js\nconst x = 1\nconst y = 2\n```\n","frontmatter":{"outline":"deep"},"isInternal":false,"tokens":5921,"sizeBytes":17997},{"name":"twoslash.md","path":"docs/packages/twoslash.md","rawUrl":"https://raw.githubusercontent.com/shikijs/shiki/HEAD/docs/packages/twoslash.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\noutline: deep\n---\n\n# @shikijs/twoslash\n\n = {\n title: 'Delete inactive users'.toUpperCase(),\n// ^?\n}\n\ntodo.title = 'Hello'\n\nNumber.parseInt('123', 10)\n// ^|\n\n //\n //\n```\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c6f2791b81c2170bb12e4d54f17b345c35c290fb6b3e803987a0875ad1778705\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvEaRjMaACXYBzfB1U1SAYQizGELOMlxEvJavX5NO2QHlDEsHAA8/NnBgA+bqYAKpCABbdg9nczUVKzIbLwAdMHZArF00aVl5GHDLa11cKigIEQREEC10ml5mXgBlfHYAa3ZpXN46i0jNXnYnNGZRGApeAHd2NHxeSF5WPuVBZmV4Xl1eMZhAxYAjYShWGCgAOniAdS5AyrAoXjkRcemwWfmYc8vV9d5AwThUjafWCGZYJdAn05qxWBh9pRqPNishkCAPHkCGg0FhEAB6dFwOqNfZfDC7dGzdiwdFbC67OAAYn43RgAFplKRmHSoPTyTtcABdLlUL7MUgMRAATiou3uYyQACYAIxUXqkBZCkAyOSKSLZaK5KEcMC4RAABioNwFzDEZCQwoAvhR0Nh9QRiBb5XRlSwOFw+EJREYpKqMgApZhEZjVGTsQwAJRgC1oAFF7nT9A5jAB+UxBkNh0gRtDR2MJ5R0+y+nimfN0Qt0+KJZKCtJqmCZ0PhqMxyuJvVQgpFPAAVQ8K3wT0C0DIUmb2dzvHzcdoWCunaeaAgXSSu3WYFSq14tgSyjDfT1pEOYHiAEE4Lv94JSIJgbw4IIsHW0Fe4EEnvw1bfFmN5NIfQAOTfE8ayCNMNCXJ83TKBM8jsCQvCTq2qSyLG8CDB+6zxFg8iaE4lSyBMECpE+L4pHs+y8HGpABKQV4jGCvA/EOARDFIQzDlIeEMbBvAACqugAshkvBMswgTAgxwyjPg8TCORr57LweEouOcCDH0lxcTAUg7hJUkCl0oisIIsBXmpBFXv+qSfE83Qhhwlx7iot73lUcAYFuzC0Ke1QwKkAAG/C6EWRCwUFKyrkFaB3jAUUrl0yiQMRqyDmQ9FXtpj6NAufQYLwinPsplzLI5bAkqp+EaZCfIKkKABsRogOKyiSogUoAOzygKSp4P6NAoTmbYFkuOp0kgcoqvgprmuQIo2naOB4IQJDkC69ADcYqRtBEGhkKYWQdFqshQvygpTVKAAcYp6e1+BTdNCr9SUe2ahtrWTYgADMxqzcy81II1S3UPaq1Op9NBbSU7qcDwDYZMdB3aLkyalkdGonajdgpk4rjuF4Pi8P4QQhDAYRYyjMSeDWSQpIj6rtNT2r5IUxSlOUTxVLUDRNCILTvdjJn8v0gwjGMJFTDMcwLFeyyvJs2y7AcxynM8VxmrcMuPBrivvJ8oFTP8gLvCCbDgnV0LKLC8KIlCViohiWI4uweKYISxKkhylI0nSjLMqy7LK9yvIIg1U0ACy3a190dbKvWKoFA1c8jUQ40iur6n9M1zZo0og7aYMrW9kNQtDbpYAEOCChgfBpzkuOlgTrAeJ4+z3XSpjnkMLK9BsuzOBW8ZLp43bs3gWiG0EM4xnOC6d3qVsXUKMpdZHd0So9iCNYnr0gIvmffRvueA/nnWg5gJeOut5eukwlWeozTbBi2I15u2I9Fnq6OOHA6bIVflOUaHZv4wBLH/Ymw8qx6jpq+Z+w1czQPGmzXsJQBzLmHO8McpAJxANQrPZQ89FxgOimuLAG49Lbiwa5A8IgjxkFPBeK8tD3IPiUikd8n4BA/lkDZWaqR6FgBAixMCHxIIqRgvceC4gkKIMMLwdCdBMKPk/LhGquDsrEUgGREqlEDg0ToroRi7BmKsTGOxTi3Fqp8WkUJegokKiGWkiYsYCknB6MFCpKyGktIXGGNYgyzIjKkBMiIMyFlqrqU0UOAC9kTJOSqqwu87DvK9D8vEAKwVQqKkQpFMhsV4qJVXCoVKmD4BgSMTJHKcA8rnEKsVCiXiyqhIqs5KJ1ll4R0QDKa6UpN4PWlD1aESdlSDRflmVCyCwETS7IgE+Joz4Wh6QaS+4MSi9GUFCMAkkHR/C2fVAUQpZS71jlvJALUK6T2nmcfZ7x4BwEeLM/UwzFlmnPqsouV8HRrWdNQe+JQBY9EqKYGU51ulSkhQMjqz0+rJxKMwZ5SBXkA3ecswuy0HSbO2bsvAmVdDgqOdKG60Lt6XIBaUG5Vwqn3LgI8hYSLEAxzeUDQ0azr6/KhhSoFXwWKgsJZdTqP0T5tRhXveFIANiMuZai1lGLi5YvmDi9YeBe64IFccyOLVRVks2sqKeXwZ5qoSNI9YdKnlim+qKU+aKFqfMxRDW+ertrApEPyw5gqpSR1OTqqa4qxmMutSy8+8rvl4GxVQHZKqEVgB0RkDV0oACs/SzmDMNM6koBqVxnCPKRBCkhaX0qPnMmU01g3LNWWHAWsA8C1gZsAZ+DdTpPCtAIAIZwgLYj5uiAWsggJwPrQg/B79pl0l4K2/g7beCdtduiQ+6IABWr84CoX7WeUQO1WhU3TrwAAvJUXuoxG3bsbjARgwB4i8BIV3IdkyR2fxgWe7g8QrTPvXTy1IVR90yniB+lie7eA/o3a6gDQGoTrF6EgUAro9JwEcOGhAVorRAA==\"}\nimport { createHighlighterCore } from 'shiki/core'\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript'\n\nconst highlighter = await createHighlighterCore({\n engine: createJavaScriptRegexEngine()\n})\n\n// @log: Custom log message\nconst a = 1\n// @error: Custom error message\nconst b = 1\n// @warn: Custom warning message\nconst c = 1\n// @annotate: Custom annotation message\n```\n\n---\n\n### `rendererClassic`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/twoslash/src/renderer-classic.ts)\n\nThis renderer aligns with the output of legacy [`shiki-twoslash`](https://github.com/shikijs/twoslash).\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"be50298f5ea6976d501abea603d4b03abe8280f3bf0a7b10df97e47172449e7c\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvUjDCwZpAMKsucdiMbdEvACoB3CHBVx8AJVnyyAHTDsAtlgik00i2TLLV6yiCgQRCIggOvgwvLD8zIKsLjJy7qS8bOwA5rZgKbx67Gj4vLlhTqnsYGy8AAYAAibsANbsAFZwAPRoBkZc+OW8EIJoWH0AdD5waMzOSACcVKyyKblIAIwArFRjpCkwDEFxlkrGaiI+HGC4iAAMVCL448xiZFMAvhTo2GcExA9rdNsgLBxcPhCUTiST5UjMMBwfhOOxkfSGYz4RgQLCgqEAfm0OghUJhpDhpARHRMAEl4rQAPJoiRQrS8ADK+Dq7BxkOhsOstgcThcaFxHIJ8PaSJ8fgCeAAYnc0E4MAJhGJafkILwRDJmDQkozmfVwez8YSBE58iLOrwSjQUhD0XBhlRRuNtgAmABsMzmC0Qi2m1HGm1+/INnKJZpMxxKZ0uIGut3u5EQbuerxweEIJHI33oTGSgP1eJDxKRKJpkjgWN0AsNwsRnXJsCppbp2iZLLZBaFpBs9kcznzgsJRc6Yv8gRA0rEcoVIOVsrVGq1zB1LP71cS+NNtZMFrAVpttLtI3W2wA7AAWD0ZL0+tb+rZ4IMdwdh/AR05IZ1XG4Q+NIc7J6g3jTT5M2oH4mCwUhUTITA+HbAcaxJfBqVtQZdgSCshxMcx4gUXgAB9eGECJIygEcJSCRRBFGCA7FcXCyDgFVwhgER2FgXhCD0XgYDuPIShhXgTF6VgoF4AAjMJ0JkMiHWPKYAA5L3mV9ECUv0NnvHY3AUN8zgAZi/OMaATZ0AMwVMgnTL4wOzIJ/k4Hh6L2Tw4EOTRsRfHC9m7Hk+2kjwDm8KhxTHEIwgiKIYmchIkg4NISkybJcnyUIelIYpSlYCpql1RoWjaLcuh6PoBjQe0QEdCZvXOdTZivVSVlvTTfgC/YvCOGZIyQQyY2/GUHm9MyAF0rmgd4e15XhgBihRXMOChV0LF9eEeAQoLogByXKWSaVoX02mwbEfBDQyKxhgBsXhZrIbQ2vm9RNF4Zpml4AAeABaD6bEebgfDhMYkFAH5ZDUSQHwQR5HiAA=\"}\nimport { rendererClassic, transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n renderer: rendererClassic() // <--\n})\n```\n\nYou might need to reference `shiki-twoslash`'s CSS to make it look good. [Here](https://github.com/shikijs/shiki/blob/main/packages/twoslash/style-classic.css) we also copied the CSS from `shiki-twoslash` but it might need some cleanup.\n\n### `rendererFloatingVue`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/vitepress-twoslash/src/renderer-floating-vue.ts)\n\nThis renderer outputs Vue template syntax that using [Floating Vue](https://floating-vue.starpad.dev/) as the popup component (to render it outside the containers). This renderer is **NOT** directly usable but an internal renderer for the [VitePress integration](/packages/vitepress#twoslash). Listing it here for reference if you want to create your own renderer.\n\n## Options\n\n### Explicit Trigger\n\nWhen integrating with `@shikijs/markdown-it` or `rehype-shiki`, we may not want Twoslash to run on every code block. In this case, we can set `explicitTrigger` to `true` to only run on code blocks with `twoslash` presented in the codeframe.\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c33fc7b243f56e1595f93ca6e9e052fed95abb58a9edc5376b448c62984626f1\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvNKWZg4/CKQC2ZACoB3CHFZd8jCFnGS4AfkS81s+YpXqtOvQEkwsWgHkjE+dwsBlfHYAa3YrOQUlVVIAHTB2ZSwlNGlrCLtSTW1dOHxKECgIEQREEAAxZjElDAFhMW9pCF4RUhhmGl5mXgDg9hTw2yiBJWkHbPxedjAaAHNZY3kAOjy4NGZSBkQATipWGDBptFzEAEZt6jXpmA3qVIH7LL08jjBcRAAGKhF8NYqaci2AL4UdDYV4EYhkPI0ehMNicHh9GyRe6OHIGLwmcyWW7IjKjZyuOieeY8fyBEJhJHpWLxRLrRFpKKZVG5KgFIp4cqVUjVISieYNJotNowDpdcm9GT9XFDUgjB45CZTGCzNreOBLKgrNYbACsAHYdnsDkdTlRVqRLtcpVSmfick9Jq8AEyfb6yMSQ95AkE4PCEEjkc10a6MLCkQxkTB8SmMlFjYnqhZ0LAcETsNBWdjTS6kLEAIwgEF2cl4AB9eAAlFUAUVoWHLvGEsH4TqgeXZxRA1YAjoJ2C04LwAAZoe34YeC/Oi8PwPY0KBK6T4UUiaCi/OsQpBXiqVaC5hYVPVQ7sIc2uNB87TYrIZD5GD8ZiCVgMKhP1hwXAAXW/WotGwABzHEa+yHEgxy6uaFxXHgKZphmWY5pCOxOkgADMbo/J6/zOgCf4gGusB4LSSS8MADJ3HiCrjACAgRsovAAOQAAI5D0ABWcAAPRjjRTGxLEF5UcyYyMMAsS8Lw8HsOmmakNmuYWDIgiitx3G8AAPAAtNpsQAtweR7swSCgCGexwN4eBoAgAIAkAA=\"}\nimport { transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n explicitTrigger: true // <--\n})\n```\n\n````md\nIn markdown, you can use the following syntax to trigger Twoslash:\n\n```ts\n// this is a normal code block\n```\n\n```ts twoslash\n// this will run Twoslash\n```\n````\n\n## Integrations\n\nWhile you can set up Twoslash with Shiki on your own with the instructions above, you can also find high-level integrations with frameworks and tools here:\n\n- [VitePress](/packages/vitepress#twoslash) - A plugin to enable Twoslash support in VitePress.\n- [Nuxt](/packages/nuxt#twoslash-integration) - A module to enable Twoslash for Nuxt Content.\n- [Vocs](https://vocs.dev/docs/guides/twoslash) - Vocs has TwoSlash support built-in.\n- [Slidev](https://sli.dev/features/twoslash#twoslash-integration) - Slidev has TwoSlash support built-in.\n\n## Recipes\n\n### CDN Usage\n\nBy default [`twoslash`](https://github.com/twoslashes/twoslash/tree/main/packages/twoslash) runs on Node.js and relies on your local system to resolve TypeScript and types for the imports. Import it directly in non-Node.js environments would not work.\n\nLuckily, Twoslash implemented a virtual file system, which allow you to provide your own files for TypeScript to resolve in memory. However, loading these files in the browser is still a challenge. Thanks to the work on the [TypeScript WebSite](https://github.com/microsoft/TypeScript-Website), the TypeScript team has provided some utilities to fetch types on demand through CDN, they call it [Automatic Type Acquisition (ATA)](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata).\n\nWe make tiny wrappers around the building blocks and provide an easy-to-use API in [`twoslash-cdn`](https://twoslash.netlify.app/packages/cdn). For example:\n\n```js\n// FIXME: Replace with explicit versions in production\nimport { createTransformerFactory, rendererRich } from 'https://esm.sh/@shikijs/twoslash@latest/core'\nimport { codeToHtml } from 'https://esm.sh/shiki@latest'\nimport { createTwoslashFromCDN } from 'https://esm.sh/twoslash-cdn@latest'\nimport { createStorage } from 'https://esm.sh/unstorage@latest'\nimport indexedDbDriver from 'https://esm.sh/unstorage@latest/drivers/indexedb'\n\n// ============= Initialization =============\n\n// An example using unstorage with IndexedDB to cache the virtual file system\nconst storage = createStorage({\n driver: indexedDbDriver({ base: 'twoslash-cdn' }),\n})\n\nconst twoslash = createTwoslashFromCDN({\n storage,\n compilerOptions: {\n lib: ['esnext', 'dom'],\n },\n})\n\nconst transformerTwoslash = createTransformerFactory(twoslash.runSync)({\n renderer: rendererRich(),\n})\n\n// ============= Execution =============\n\nconst app = document.getElementById('app')\n\nconst source = `\nimport { ref } from 'vue'\n\nconsole.log(\"Hi! Shiki + Twoslash on CDN :)\")\n\nconst count = ref(0)\n// ^?\n`.trim()\n\n// Before rendering, we need to prepare the types, so that the rendering can happen synchronously\nawait twoslash.prepareTypes(source)\n\n// Then we can render the code\napp.innerHTML = await codeToHtml(source, {\n lang: 'ts',\n theme: 'vitesse-dark',\n transformers: [transformerTwoslash],\n})\n```\n","frontmatter":{"outline":"deep"},"isInternal":false,"tokens":8755,"sizeBytes":17260},{"name":"vitepress.md","path":"docs/packages/vitepress.md","rawUrl":"https://raw.githubusercontent.com/shikijs/shiki/HEAD/docs/packages/vitepress.md","title":"Packages Skill","category":"anthropic-skill","format":"markdown","content":"---\noutline: deep\n---\n\n# VitePress Integration\n\n[VitePress](https://vitepress.dev/) uses Shiki under the hood, so you don't need explicit integration.\n\nVitePress provides [a few options for customizing Shiki](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts#L66-L112). Learn more about them in the [VitePress documentation](https://vitepress.dev/reference/site-config#markdown).\n\n## Twoslash\n\nTo enable [TypeScript Twoslash](/packages/twoslash) (type hover on code snippets) in VitePress, we provide a VitePress plugin for easy setup. Pre-styled, with [Floating Vue](https://floating-vue.starpad.dev/) to display the type information out side of the code container.\n\n\n\n# Astro Integration\n\nYou don't need explicit integration in [Astro](https://astro.build/) as Astro already uses Shiki under the hood.\n\nLearn more about the configurations in the [Astro documentation](https://docs.astro.build/en/guides/syntax-highlighting/).\n\n\n# @shikijs/cli\n\n()\n\n useEffect(() => {\n async function initializeHighlighter() {\n const h = await createHighlighter({\n themes: ['nord'],\n langs: ['javascript', 'typescript'],\n })\n setHighlighter(h)\n }\n initializeHighlighter()\n }, [])\n\n function animate() {\n setCode(`let hi = 'hello'`)\n }\n\n return (\n \n {highlighter && (\n <>\n \n {h => (\n <>\n \n \n )\n}\n```\n\n### Svelte\n\nImport `@shikijs/magic-move/svelte` and pass the highlighter instance to the `ShikiMagicMove` component.\n\n```svelte\n\n\n{#await highlighter then highlighter}\n ` as the outermost wrappers of code block html. If you use a custom Shiki [transformer](/guide/transformers), this behavior may be undesirable. For example, if the transformer produces\n\n```html\n\n \n \n …\n \n
\n\n```\n\nthe result after `markdown-it` processing will be\n\n```html\n\n \n \n \n \n …\n \n
\n \n \n
\n```\n\nWork around this by adding [olets/markdown-it-wrapperless-fence-rule](https://github.com/olets/markdown-it-wrapperless-fence-rule) to your `markdown-it` configuration, or by writing your own `markdown-it` fence rule (see [markdown-it#269](https://github.com/markdown-it/markdown-it/issues/269)).\n\n\n# Monaco Editor Integration\n\nShiki uses the same TextMate grammar and themes as VS Code, so it can be used to highlight Monaco Editor. Shiki provides an official integration for Monaco Editor. You can also use [modern-monaco](https://github.com/esm-dev/modern-monaco) that includes built-in Shiki integration.\n\n## @shikijs/monaco\n\n\n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHtml(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return \n}\n```\n\n### Custom Components\n\nYou can also call `codeToHast` to get the HTML abstract syntax tree, and render it using [`hast-util-to-jsx-runtime`](https://github.com/syntax-tree/hast-util-to-jsx-runtime). With this method, you can render your own `pre` and `code` components.\n\n```tsx\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki'\n\nexport default function Page() {\n return (\n \n \n {[\n 'console.log(\"Hello\")',\n 'console.log(\"World\")',\n ].join('\\n')}\n \n \n )\n}\n\ninterface Props {\n children: string\n lang: BundledLanguage\n}\n\nasync function CodeBlock(props: Props) {\n const out = await codeToHast(props.children, {\n lang: props.lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n components: {\n // your custom `pre` element\n pre: props => \n },\n }) as JSX.Element\n}\n```\n\n## React Client Component\n\nFor client components, they are pre-rendered on server and hydrated/rendered on client.\nWe can start by creating a client `CodeBlock` component.\n\nCreate a `shared.ts` for highlighter:\n\n```ts\nimport type { JSX } from 'react'\nimport type { BundledLanguage } from 'shiki/bundle/web'\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime'\nimport { Fragment } from 'react'\nimport { jsx, jsxs } from 'react/jsx-runtime'\nimport { codeToHast } from 'shiki/bundle/web'\n\nexport async function highlight(code: string, lang: BundledLanguage) {\n const out = await codeToHast(code, {\n lang,\n theme: 'github-dark'\n })\n\n return toJsxRuntime(out, {\n Fragment,\n jsx,\n jsxs,\n }) as JSX.Element\n}\n```\n\nIn your `codeblock.tsx`:\n\n```tsx\n'use client'\nimport { JSX, useLayoutEffect, useState } from 'react'\nimport { highlight } from './shared'\n\nexport function CodeBlock({ initial }: { initial?: JSX.Element }) {\n const [nodes, setNodes] = useState(initial)\n\n useLayoutEffect(() => {\n void highlight('console.log(\"Rendered on client\")', 'ts').then(setNodes)\n }, [])\n\n return nodes ?? Loading...
\n}\n```\n\nThe `initial` prop can be passed from a server component to pre-render the code block on server.\n\nIn your `page.tsx`:\n\n```tsx\nimport { CodeBlock } from './codeblock'\nimport { highlight } from './shared'\n\nexport default async function Page() {\n // `initial` is optional.\n return (\n \n \n )\n}\n```\n\n::: info\nThe above example uses the `shiki/bundle/web` bundle. You can change it to [Fine-grained Bundle](/guide/bundles#fine-grained-bundle) to fully control the bundled languages/themes.\n:::\n\n### Performance\n\nShiki lazy loads the requested languages and themes, the Next.js bundler can handle lazy imports automatically.\nImporting `shiki` or its web bundle is efficient enough for most Next.js applications, Fine-grained Bundle won't significantly impact the bundle size.\n\nIn addition, you can use the `createHighlighter` API to preload specific languages and themes.\nPlease refer to [Highlighter Usage](/guide/install#highlighter-usage) for further details.\n\n### Highlighter Instance\n\nIf you define a highlighter (without `await`) as a global variable, you can reference it directly from server and client components.\n\n```ts\nimport { createHighlighter } from 'shiki'\n\nconst highlighter = createHighlighter({\n themes: ['nord'],\n langs: ['javascript'],\n})\n\n// Inside an async server component, or client side `useEffect`\nconst html = (await highlighter).codeToHtml('const a = 1', {\n lang: 'javascript',\n theme: 'nord'\n})\n```\n\n\n# Nuxt\n\n[Nuxt](https://nuxt.com) is a general-purpose meta-framework that gives you full control over your application. You can install Shiki along with integrations like ([markdown-it](/packages/markdown-it), [rehype](/packages/rehype)) or import manually as you needed.\n\nOn top of that, Nuxt also provide some module integrations for Shiki allowing you use it easier:\n\n- [`nuxt-shiki`](https://github.com/pi0/nuxt-shiki) - Shiki integration for client and server sides, with component usage.\n- [`@nuxt/content`](https://github.com/nuxt/content) - Nuxt Content has Shiki built-in for markdown files. [You can enable it with the `highlight` option](https://content.nuxt.com/docs/getting-started/configuration#highlight).\n - [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc) - The underlying module of `@nuxt/content` that provides Markdown Component (MDC) syntax as well as Shiki for syntax highlighting.\n\n## TwoSlash Integration\n\n- [`nuxt-content-twoslash`](https://github.com/antfu/nuxt-content-twoslash) - A Nuxt module that adds Twoslash support to Nuxt Content. Twoslash information are evaluated at build time.\n\n\n---\noutline: deep\n---\n\n# @shikijs/rehype\n\n you want to highlight\nconst textStream = getTextStreamFromSomewhere()\n\n// Pipe the text stream through the token stream\nconst tokensStream = textStream\n .pipeThrough(new CodeToTokenTransformStream({\n highlighter,\n lang: 'javascript',\n theme: 'nord',\n allowRecalls: true, // see explanation below\n }))\n```\n\n### `allowRecalls`\n\nDue to the fact that highlighting may change based on the context of the code, themed tokens can be re-evaluated as the stream progresses. Because streams are one-directional, `@shikijs/stream` emits a special **recall** token that tells the receiver to discard the last N tokens that changed.\n\nBy default, `CodeToTokenTransformStream` only emits **stable** tokens — no recalls. The trade-off is coarser granularity, usually one line at a time.\n\nFor stream consumers that can handle recalls (e.g. the bundled Vue, React, Solid, and Svelte components), set `allowRecalls: true` to get finer-grained tokens.\n\nTypically recalls should be handled like:\n\n```ts\nimport type { RecallToken } from '@shikijs/stream'\nimport type { ThemedToken } from 'shiki'\n\nconst receivedTokens: ThemedToken[] = []\n\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n if ('recall' in token) {\n // discard the last `token.recall` tokens\n receivedTokens.length -= token.recall\n }\n else {\n receivedTokens.push(token)\n }\n },\n}))\n```\n\n## Consume the Token Stream\n\n### Manually\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n async write(token) {\n console.log(token)\n },\n}))\n```\n\nOr in Node.js:\n\n```ts\nfor await (const token of tokensStream) {\n console.log(token)\n}\n```\n\n### Vue\n\n```vue\n\n\n\n ` tag is modified: ``\n\n::: details HTML Output\n\n```html\n\n \n \n \n function(){\n \n console.log('hewwo') \n \n \n console.log('hello') \n \n }\n \n \n
\n```\n\n:::\n\n---\n\n### `transformerNotationHighlight`\n\nUse `[!code highlight]` to highlight a line.\n\n````md\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [\\!code highlight]\nconsole.log('Not highlighted')\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not highlighted')\nconsole.log('Highlighted') // [!code highlight]\nconsole.log('Not highlighted')\n```\n\n- `// [!code highlight]` outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also highlight multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [\\!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n````\n\nRenders:\n\n```ts\n// [!code highlight:3]\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n```ts\nconsole.log('Not highlighted')\n// [!code highlight:1]\nconsole.log('Highlighted')\nconsole.log('Not highlighted')\n```\n\n---\n\n### `transformerNotationWordHighlight`\n\nUse `[!code word:Hello]` to highlight the word `Hello` in any subsequent code.\n\n````md\n```ts\n// [\\!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\n// [!code word:Hello]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\nYou can also specify the number of lines to highlight words on, e.g. `[!code word:Hello:1]` will only highlight occurrences of `Hello` on the next line.\n\n````md\n```ts\n// [\\!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n````\n\nRenders:\n\n```ts\n// [!code word:Hello:1]\nconst message = 'Hello World'\nconsole.log(message) // prints Hello World\n```\n\n---\n\n### `transformerNotationFocus`\n\nUse `[!code focus]` to focus a line.\n\n````md\n```ts\nconsole.log('Not focused');\nconsole.log('Focused') // [\\!code focus]\nconsole.log('Not focused');\n```\n````\n\nRenders (with custom CSS rules):\n\n```ts\nconsole.log('Not focused')\nconsole.log('Focused') // [!code focus]\nconsole.log('Not focused')\n```\n\n- Outputs: ``\n- The outer `` tag is modified: ``\n\nYou can also focus multiple lines with a single comment:\n\n````md\n```ts\n// [\\!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n````\n\nRenders:\n\n```ts\n// [!code focus:3]\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Focused')\nconsole.log('Not focused')\n```\n\n---\n\n### `transformerNotationErrorLevel`\n\nUse `[!code error]`, `[!code warning]`, and `[!code info]` to mark a line with an error, warning, or info levels.\n\n````md\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [\\!code error]\nconsole.warn('Warning') // [\\!code warning]\nconsole.log('Info') // [\\!code info]\n```\n````\n\n- Outputs: `` for errors\n- Outputs: `` for warnings\n- Outputs: `` for info\n- The outer `` tag is modified: ``\n\nWith some additional CSS rules, you can make it look like this:\n\n```ts\nconsole.log('No errors or warnings')\nconsole.error('Error') // [!code error]\nconsole.warn('Warning') // [!code warning]\nconsole.log('Info') // [!code info]\n```\n\n---\n\n### `transformerRenderWhitespace`\n\nRender whitespaces (tabs and spaces) as individual spans, with classes `tab` and `space`.\n\nOptions:\n\n- `position`: `'all' | 'boundary' | 'trailing' | 'leading'`. Default `'all'`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction block( ) {\n space( )\n tab( ) \n}
\n\n::: details Example CSS\n\n```css\npre.shiki .tab,\npre.shiki .space {\n position: relative;\n}\n\npre.shiki .tab::before {\n content: '⇥';\n position: absolute;\n opacity: 0.3;\n}\n\npre.shiki .space::before {\n content: '·';\n position: absolute;\n opacity: 0.3;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderIndentGuides`\n\nRender indentations as individual spans, with class `indent`.\n\nWith some additional CSS rules, you can make it look like this:\n\njsfunction func() {\n console.log(1);\n\n for (const i of []) {\n console.log(2);\n }\n}
\n\n::: details Example CSS\n\n```css\npre.shiki .indent {\n display: inline-block;\n position: relative;\n left: var(--indent-offset);\n}\n\npre.shiki .indent:empty {\n height: 1lh;\n vertical-align: bottom;\n}\n\npre.shiki .indent::before {\n content: '';\n position: absolute;\n opacity: 0.15;\n width: 1px;\n height: 100%;\n background-color: currentColor;\n}\n```\n\n:::\n\n---\n\n### `transformerRenderLineNumber`\n\nRender line numbers as individual spans, with class `line-number`.\n\n```ts\nimport { transformerRenderLineNumber } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n transformers: [\n transformerRenderLineNumber(),\n ],\n})\n```\n\nOptions:\n\n- `start`: Start number. Default `1`.\n- `classLineNumber`: Class for line number. Default `'line-number'`.\n\nWith some additional CSS rules, you can make it look like this:\n\n```css\npre.shiki .line-number {\n user-select: none;\n opacity: 0.5;\n margin-right: 1em;\n}\n```\n\n---\n\n### `transformerMetaHighlight`\n\nHighlight lines based on the [meta string](/guide/transformers#meta) provided on the code snippet.\n\n````md\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n````\n\nRenders (with custom CSS rules):\n\n```js {1,3-4}\nconsole.log('1')\nconsole.log('2')\nconsole.log('3')\nconsole.log('4')\n```\n\n- Outputs: `` for included lines.\n\n### `transformerMetaWordHighlight`\n\nHighlight words based on the meta string provided on the code snippet.\n\n````md\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg)\nconsole.log(msg) // prints Hello World\n```\n````\n\nRenders (with custom CSS rules):\n\n```js /Hello/\nconst msg = 'Hello World'\nconsole.log(msg) // prints Hello World\n```\n\nOutputs: `Hello` for matched words.\n\n---\n\n### `transformerCompactLineOptions`\n\nSupport for `shiki`'s `lineOptions` that is removed in `shiki`.\n\n---\n\n### `transformerRemoveLineBreak`\n\nRemove line breaks between ``. Useful when you set `display: block` to `.line` in CSS.\n\n---\n\n### `transformerRemoveNotationEscape`\n\nTransform `// [\\!code ...]` to `// [!code ...]`.\nAvoid rendering the escaped notation syntax as it is.\n\n---\n\n### `transformerStyleToClass`\n\nConvert Shiki's inline styles to unique classes.\n\nClass names are generated based on the hash value of the style object with the prefix/suffix you provide. You can put this transformer in multiple highlights passes and then get the CSS at the end to reuse the exact same styles. As Shiki doesn't handle CSS, it's on your integration to decide how to extract and apply/bundle the CSS.\n\nFor example:\n\n```ts\nimport { transformerStyleToClass } from '@shikijs/transformers'\nimport { codeToHtml } from 'shiki'\n\nconst toClass = transformerStyleToClass({ // [!code highlight:3]\n classPrefix: '__shiki_',\n})\n\nconst code = `console.log('hello')`\nconst html = await codeToHtml(code, {\n lang: 'ts',\n themes: {\n dark: 'vitesse-dark',\n light: 'vitesse-light',\n },\n defaultColor: false,\n transformers: [toClass], // [!code highlight]\n})\n\n// The transformer instance exposes some methods to get the CSS\nconst css = toClass.getCSS() // [!code highlight]\n\n// use `html` and `css` in your app\n```\n\nHTML output:\n\n```html\n\n console\n .\n log\n (\n '\n hello\n '\n )\n
\n```\n\nCSS output:\n\n```css\n.__shiki_14cn0u {\n --shiki-dark: #bd976a;\n --shiki-light: #b07d48;\n}\n.__shiki_ps5uht {\n --shiki-dark: #666666;\n --shiki-light: #999999;\n}\n.__shiki_1zrdwt {\n --shiki-dark: #80a665;\n --shiki-light: #59873a;\n}\n.__shiki_236mh3 {\n --shiki-dark: #c98a7d77;\n --shiki-light: #b5695977;\n}\n.__shiki_1g4r39 {\n --shiki-dark: #c98a7d;\n --shiki-light: #b56959;\n}\n.__shiki_9knfln {\n --shiki-dark: #dbd7caee;\n --shiki-light: #393a34;\n --shiki-dark-bg: #121212;\n --shiki-light-bg: #ffffff;\n}\n```\n\n### `transformerRemoveComments`\n\nRemove comments from the code. It works by checking the internal grammar token metadata to determine if the token is a comment.\n\nThis transformer requires `includeExplanation: true` to work.\n\n```ts\nimport { transformerRemoveComments } from '@shikijs/transformers'\n\nconst html = await codeToHtml(code, {\n lang: 'ts',\n includeExplanation: true, // [!code highlight]\n transformers: [\n transformerRemoveComments(), // [!code highlight]\n ],\n})\n```\n\nOptions:\n\n- `removeEmptyLines`: Remove lines that become empty after removing comments. Default `true`.\n\nFor example:\n\n````md\n```js\n// This is a comment\nconst x = 1 // Inline comment\n/* Block comment */\nconst y = 2\n\n// Another comment\n```\n````\n\nWill renders:\n\n```js\nconst x = 1\nconst y = 2\n```\n\n\n---\noutline: deep\n---\n\n# @shikijs/twoslash\n\n = {\n title: 'Delete inactive users'.toUpperCase(),\n// ^?\n}\n\ntodo.title = 'Hello'\n\nNumber.parseInt('123', 10)\n// ^|\n\n //\n //\n```\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c6f2791b81c2170bb12e4d54f17b345c35c290fb6b3e803987a0875ad1778705\",\"data\":\"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\"}\nimport { createHighlighterCore } from 'shiki/core'\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript'\n\nconst highlighter = await createHighlighterCore({\n engine: createJavaScriptRegexEngine()\n})\n\n// @log: Custom log message\nconst a = 1\n// @error: Custom error message\nconst b = 1\n// @warn: Custom warning message\nconst c = 1\n// @annotate: Custom annotation message\n```\n\n---\n\n### `rendererClassic`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/twoslash/src/renderer-classic.ts)\n\nThis renderer aligns with the output of legacy [`shiki-twoslash`](https://github.com/shikijs/twoslash).\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"be50298f5ea6976d501abea603d4b03abe8280f3bf0a7b10df97e47172449e7c\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvUjDCwZpAMKsucdiMbdEvACoB3CHBVx8AJVnyyAHTDsAtlgik00i2TLLV6yiCgQRCIggOvgwvLD8zIKsLjJy7qS8bOwA5rZgKbx67Gj4vLlhTqnsYGy8AAYAAibsANbsAFZwAPRoBkZc+OW8EIJoWH0AdD5waMzOSACcVKyyKblIAIwArFRjpCkwDEFxlkrGaiI+HGC4iAAMVCL448xiZFMAvhTo2GcExA9rdNsgLBxcPhCUTiST5UjMMBwfhOOxkfSGYz4RgQLCgqEAfm0OghUJhpDhpARHRMAEl4rQAPJoiRQrS8ADK+Dq7BxkOhsOstgcThcaFxHIJ8PaSJ8fgCeAAYnc0E4MAJhGJafkILwRDJmDQkozmfVwez8YSBE58iLOrwSjQUhD0XBhlRRuNtgAmABsMzmC0Qi2m1HGm1+/INnKJZpMxxKZ0uIGut3u5EQbuerxweEIJHI33oTGSgP1eJDxKRKJpkjgWN0AsNwsRnXJsCppbp2iZLLZBaFpBs9kcznzgsJRc6Yv8gRA0rEcoVIOVsrVGq1zB1LP71cS+NNtZMFrAVpttLtI3W2wA7AAWD0ZL0+tb+rZ4IMdwdh/AR05IZ1XG4Q+NIc7J6g3jTT5M2oH4mCwUhUTITA+HbAcaxJfBqVtQZdgSCshxMcx4gUXgAB9eGECJIygEcJSCRRBFGCA7FcXCyDgFVwhgER2FgXhCD0XgYDuPIShhXgTF6VgoF4AAjMJ0JkMiHWPKYAA5L3mV9ECUv0NnvHY3AUN8zgAZi/OMaATZ0AMwVMgnTL4wOzIJ/k4Hh6L2Tw4EOTRsRfHC9m7Hk+2kjwDm8KhxTHEIwgiKIYmchIkg4NISkybJcnyUIelIYpSlYCpql1RoWjaLcuh6PoBjQe0QEdCZvXOdTZivVSVlvTTfgC/YvCOGZIyQQyY2/GUHm9MyAF0rmgd4e15XhgBihRXMOChV0LF9eEeAQoLogByXKWSaVoX02mwbEfBDQyKxhgBsXhZrIbQ2vm9RNF4Zpml4AAeABaD6bEebgfDhMYkFAH5ZDUSQHwQR5HiAA=\"}\nimport { rendererClassic, transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n renderer: rendererClassic() // <--\n})\n```\n\nYou might need to reference `shiki-twoslash`'s CSS to make it look good. [Here](https://github.com/shikijs/shiki/blob/main/packages/twoslash/style-classic.css) we also copied the CSS from `shiki-twoslash` but it might need some cleanup.\n\n### `rendererFloatingVue`\n\n[Source code](https://github.com/shikijs/shiki/blob/main/packages/vitepress-twoslash/src/renderer-floating-vue.ts)\n\nThis renderer outputs Vue template syntax that using [Floating Vue](https://floating-vue.starpad.dev/) as the popup component (to render it outside the containers). This renderer is **NOT** directly usable but an internal renderer for the [VitePress integration](/packages/vitepress#twoslash). Listing it here for reference if you want to create your own renderer.\n\n## Options\n\n### Explicit Trigger\n\nWhen integrating with `@shikijs/markdown-it` or `rehype-shiki`, we may not want Twoslash to run on every code block. In this case, we can set `explicitTrigger` to `true` to only run on code blocks with `twoslash` presented in the codeframe.\n\n```ts twoslash\n// @twoslash-cache: {\"v\":1,\"hash\":\"c33fc7b243f56e1595f93ca6e9e052fed95abb58a9edc5376b448c62984626f1\",\"data\":\"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvNKWZg4/CKQC2ZACoB3CHFZd8jCFnGS4AfkS81s+YpXqtOvQEkwsWgHkjE+dwsBlfHYAa3YrOQUlVVIAHTB2ZSwlNGlrCLtSTW1dOHxKECgIEQREEAAxZjElDAFhMW9pCF4RUhhmGl5mXgDg9hTw2yiBJWkHbPxedjAaAHNZY3kAOjy4NGZSBkQATipWGDBptFzEAEZt6jXpmA3qVIH7LL08jjBcRAAGKhF8NYqaci2AL4UdDYV4EYhkPI0ehMNicHh9GyRe6OHIGLwmcyWW7IjKjZyuOieeY8fyBEJhJHpWLxRLrRFpKKZVG5KgFIp4cqVUjVISieYNJotNowDpdcm9GT9XFDUgjB45CZTGCzNreOBLKgrNYbACsAHYdnsDkdTlRVqRLtcpVSmfick9Jq8AEyfb6yMSQ95AkE4PCEEjkc10a6MLCkQxkTB8SmMlFjYnqhZ0LAcETsNBWdjTS6kLEAIwgEF2cl4AB9eAAlFUAUVoWHLvGEsH4TqgeXZxRA1YAjoJ2C04LwAAZoe34YeC/Oi8PwPY0KBK6T4UUiaCi/OsQpBXiqVaC5hYVPVQ7sIc2uNB87TYrIZD5GD8ZiCVgMKhP1hwXAAXW/WotGwABzHEa+yHEgxy6uaFxXHgKZphmWY5pCOxOkgADMbo/J6/zOgCf4gGusB4LSSS8MADJ3HiCrjACAgRsovAAOQAAI5D0ABWcAAPRjjRTGxLEF5UcyYyMMAsS8Lw8HsOmmakNmuYWDIgiitx3G8AAPAAtNpsQAtweR7swSCgCGexwN4eBoAgAIAkAA=\"}\nimport { transformerTwoslash } from '@shikijs/twoslash'\n\ntransformerTwoslash({\n explicitTrigger: true // <--\n})\n```\n\n````md\nIn markdown, you can use the following syntax to trigger Twoslash:\n\n```ts\n// this is a normal code block\n```\n\n```ts twoslash\n// this will run Twoslash\n```\n````\n\n## Integrations\n\nWhile you can set up Twoslash with Shiki on your own with the instructions above, you can also find high-level integrations with frameworks and tools here:\n\n- [VitePress](/packages/vitepress#twoslash) - A plugin to enable Twoslash support in VitePress.\n- [Nuxt](/packages/nuxt#twoslash-integration) - A module to enable Twoslash for Nuxt Content.\n- [Vocs](https://vocs.dev/docs/guides/twoslash) - Vocs has TwoSlash support built-in.\n- [Slidev](https://sli.dev/features/twoslash#twoslash-integration) - Slidev has TwoSlash support built-in.\n\n## Recipes\n\n### CDN Usage\n\nBy default [`twoslash`](https://github.com/twoslashes/twoslash/tree/main/packages/twoslash) runs on Node.js and relies on your local system to resolve TypeScript and types for the imports. Import it directly in non-Node.js environments would not work.\n\nLuckily, Twoslash implemented a virtual file system, which allow you to provide your own files for TypeScript to resolve in memory. However, loading these files in the browser is still a challenge. Thanks to the work on the [TypeScript WebSite](https://github.com/microsoft/TypeScript-Website), the TypeScript team has provided some utilities to fetch types on demand through CDN, they call it [Automatic Type Acquisition (ATA)](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ata).\n\nWe make tiny wrappers around the building blocks and provide an easy-to-use API in [`twoslash-cdn`](https://twoslash.netlify.app/packages/cdn). For example:\n\n```js\n// FIXME: Replace with explicit versions in production\nimport { createTransformerFactory, rendererRich } from 'https://esm.sh/@shikijs/twoslash@latest/core'\nimport { codeToHtml } from 'https://esm.sh/shiki@latest'\nimport { createTwoslashFromCDN } from 'https://esm.sh/twoslash-cdn@latest'\nimport { createStorage } from 'https://esm.sh/unstorage@latest'\nimport indexedDbDriver from 'https://esm.sh/unstorage@latest/drivers/indexedb'\n\n// ============= Initialization =============\n\n// An example using unstorage with IndexedDB to cache the virtual file system\nconst storage = createStorage({\n driver: indexedDbDriver({ base: 'twoslash-cdn' }),\n})\n\nconst twoslash = createTwoslashFromCDN({\n storage,\n compilerOptions: {\n lib: ['esnext', 'dom'],\n },\n})\n\nconst transformerTwoslash = createTransformerFactory(twoslash.runSync)({\n renderer: rendererRich(),\n})\n\n// ============= Execution =============\n\nconst app = document.getElementById('app')\n\nconst source = `\nimport { ref } from 'vue'\n\nconsole.log(\"Hi! Shiki + Twoslash on CDN :)\")\n\nconst count = ref(0)\n// ^?\n`.trim()\n\n// Before rendering, we need to prepare the types, so that the rendering can happen synchronously\nawait twoslash.prepareTypes(source)\n\n// Then we can render the code\napp.innerHTML = await codeToHtml(source, {\n lang: 'ts',\n theme: 'vitesse-dark',\n transformers: [transformerTwoslash],\n})\n```\n\n\n---\noutline: deep\n---\n\n# VitePress Integration\n\n[VitePress](https://vitepress.dev/) uses Shiki under the hood, so you don't need explicit integration.\n\nVitePress provides [a few options for customizing Shiki](https://github.com/vuejs/vitepress/blob/main/src/node/markdown/markdown.ts#L66-L112). Learn more about them in the [VitePress documentation](https://vitepress.dev/reference/site-config#markdown).\n\n## Twoslash\n\nTo enable [TypeScript Twoslash](/packages/twoslash) (type hover on code snippets) in VitePress, we provide a VitePress plugin for easy setup. Pre-styled, with [Floating Vue](https://floating-vue.starpad.dev/) to display the type information out side of the code container.\n\n
"}