feat(plugin-shiki): add built-in twoslash support

.vscode/settings.json

@@ -78,6 +78,7 @@
     "trackpad",
     "tsbuildinfo",
     "twikoo",
+    "twoslash",
     "umami",
     "unmount",
     "vuejs",

docs/.vuepress/config.ts

@@ -1,4 +1,5 @@
 import process from 'node:process'
+import { transformerTwoslash } from '@shikijs/twoslash'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { webpackBundler } from '@vuepress/bundler-webpack'
 import { getModulePath } from '@vuepress/helper'
@@ -26,7 +27,7 @@
 
 const __dirname = import.meta.dirname || getDirname(import.meta.url)
 
 const IS_PROD = process.env.NODE_ENV === 'production'
 
 export default defineUserConfig({
   // set site base to default value
@@ -155,39 +156,21 @@
         NpmBadge: path.resolve(__dirname, './components/NpmBadge.vue'),
       },
     }),
-    // only enable shiki plugin in production mode
-    IS_PROD
-      ? shikiPlugin({
-          langs: [
-            'bash',
-            'diff',
-            'json',
-            'md',
-            'scss',
-            'ts',
-            'vue',
-            'less',
-            'java',
-            'py',
-            'vb',
-            'bat',
-            'cs',
-            'cpp',
-          ],
-          themes: {
-            light: 'one-light',
-            dark: 'one-dark-pro',
-          },
-          lineNumbers: 10,
-          notationDiff: true,
-          notationErrorLevel: true,
-          notationFocus: true,
-          notationHighlight: true,
-          notationWordHighlight: true,
-          whitespace: true,
-          collapsedLines: false,
-        })
-      : [],
+    shikiPlugin({
+      themes: {
+        light: 'one-light',
+        dark: 'one-dark-pro',
+      },
+      lineNumbers: 10,
+      notationDiff: true,
+      notationErrorLevel: true,
+      notationFocus: true,
+      notationHighlight: true,
+      notationWordHighlight: true,
+      whitespace: true,
+      collapsedLines: false,
+      twoslash: true,
+    }),
     cachePlugin(),
   ],
 

docs/.vuepress/theme.ts

@@ -67,21 +67,6 @@ export default defaultTheme({
       alert: true,
     },
     // use shiki plugin in production mode instead
-    prismjs: IS_PROD
-      ? false
-      : {
-          themes: {
-            light: 'one-light',
-            dark: 'one-dark',
-          },
-          lineNumbers: 10,
-          notationDiff: true,
-          notationErrorLevel: true,
-          notationFocus: true,
-          notationHighlight: true,
-          notationWordHighlight: true,
-          whitespace: true,
-          collapsedLines: false,
-        },
+    prismjs: false,
   },
 })

docs/package.json

@@ -9,6 +9,7 @@
     "docs:serve": "http-server -a localhost .vuepress/dist"
   },
   "dependencies": {
+    "@shikijs/twoslash": "^2.1.0",
     "@vuepress/bundler-vite": "2.0.0-rc.19",
     "@vuepress/bundler-webpack": "2.0.0-rc.19",
     "@vuepress/helper": "workspace:*",

docs/plugins/markdown/shiki.md

@@ -671,6 +671,44 @@ body > div {
 - Also see：
   - [Shiki > Render Whitespace](https://shiki.style/packages/transformers#transformerrenderwhitespace)
 
+### twoslash
+
+- Type: `boolean`
+
+- Default: `false`
+
+- Details: Whether enable [twoslash](https://github.com/twoslashes/twoslash).
+
+  ::: tip
+
+  For size reasons, the plugin does not include the `@shiki/twoslash` package by default. If you want to use it, you need to install it manually.
+
+  :::
+
+- Also see:
+
+  - [Shiki > Twosplash](https://shiki.style/packages/twoslash)
+
+- Example:
+
+  **Input:**
+
+  ````md
+  ```ts twoslash
+  const a = 1
+  const b = 2
+  console.log(a + b)
+  ```
+  ````
+
+  **Output:**
+
+  ```ts twoslash
+  const a = 1
+  const b = 2
+  console.log(a + b)
+  ```
+
 ## Advanced Options
 
 ### defaultLang

plugins/markdown/plugin-shiki/package.json

@@ -47,8 +47,14 @@
     "synckit": "^0.9.2"
   },
   "peerDependencies": {
+    "@shikijs/twoslash": "^2.1.0",
     "vuepress": "2.0.0-rc.19"
   },
+  "peerDependenciesMeta": {
+    "@shikijs/twoslash": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

plugins/markdown/plugin-shiki/src/client/styles/twoslash.scss

@@ -0,0 +1,9 @@
+div[data-highlighter='shiki'] {
+  pre.twoslash {
+    --twoslash-popup-bg: var(--code-c-bg, var(--shiki-light-bg));
+
+    [data-theme='dark'] & {
+      --twoslash-popup-bg: var(--code-c-bg, var(--shiki-dark-bg));
+    }
+  }
+}

plugins/markdown/plugin-shiki/src/node/options.ts

@@ -11,4 +11,13 @@ import type { ShikiHighlightOptions } from './types.js'
 export type ShikiPluginOptions = MarkdownItLineNumbersOptions &
   MarkdownItPreWrapperOptions &
   Pick<MarkdownItCollapsedLinesOptions, 'collapsedLines'> &
-  ShikiHighlightOptions
+  ShikiHighlightOptions & {
+    /**
+     * Enable twoslash
+     *
+     * @description You should install `@shikijs/twoslash` manually.
+     *
+     * @default false
+     */
+    twoslash?: boolean
+  }

plugins/markdown/plugin-shiki/src/node/prepareClientConfigFile.ts

@@ -15,6 +15,7 @@ export const prepareClientConfigFile = (
     notationHighlight,
     notationWordHighlight,
     whitespace,
+    twoslash,
   }: ShikiPluginOptions,
 ): Promise<string> => {
   const imports: string[] = [
@@ -80,6 +81,13 @@ export const prepareClientConfigFile = (
     setups.push('setupCollapsedLines()')
   }
 
+  if (twoslash) {
+    imports.push(
+      `import "${getModulePath('@shikijs/twoslash/style-rich.css', import.meta)}"`,
+      `import "${getModulePath(`${PLUGIN_NAME}/styles/twoslash.css`, import.meta)}"`,
+    )
+  }
+
   let code = imports.join('\n')
 
   if (setups.length) {

plugins/markdown/plugin-shiki/src/node/transformers/getTransformers.ts

@@ -7,19 +7,34 @@ import {
   transformerNotationWordHighlight,
   transformerRenderWhitespace,
 } from '@shikijs/transformers'
+import type { TransformerTwoslashIndexOptions } from '@shikijs/twoslash'
 import type { WhitespacePosition } from '@vuepress/highlighter-helper'
 import { resolveWhitespacePosition } from '@vuepress/highlighter-helper'
 import type { ShikiTransformer } from 'shiki'
+import { colors } from 'vuepress/utils'
 import type { ShikiHighlightOptions } from '../types.js'
+import { logger } from '../utils.js'
 import {
   addClassTransformer,
   cleanupTransformer,
   emptyLineTransformer,
   removeEscapeTransformer,
 } from './vuepressTransformers.js'
 
+let transformerTwoslash:
+  | ((options?: TransformerTwoslashIndexOptions) => ShikiTransformer)
+  | null
+
+try {
+  ;({ transformerTwoslash } = await import('@shikijs/twoslash'))
+} catch {
+  transformerTwoslash = null
+}
+
 export const getTransformers = (
-  options: ShikiHighlightOptions,
+  options: ShikiHighlightOptions & {
+    twoslash?: boolean
+  },
 ): ShikiTransformer[] => {
   const transformers: ShikiTransformer[] = []
 
@@ -66,6 +81,20 @@ export const getTransformers = (
     transformers.push(transformerMetaWordHighlight())
   }
 
+  if (options.twoslash) {
+    if (transformerTwoslash)
+      transformers.push(
+        transformerTwoslash({
+          explicitTrigger: true,
+        }),
+      )
+    else {
+      logger.error(
+        `${colors.cyan('twoslash')} is enabled, but ${colors.magenta('@shikijs/twoslash')} is not installed, please install it manually`,
+      )
+    }
+  }
+
   transformers.push(
     addClassTransformer,
     cleanupTransformer,