docs: enable twoslash in more docs page

docs/.vitepress/render-floating-vue.ts

@@ -7,13 +7,27 @@ const rich = rendererRich({
   classExtra: 'vp-copy-ignore',
 })
 
-function createFloatingVueWarpper(this: ShikijiTransformerContext, text: string, node: Element | Text, presisted = false): Element {
+function createFloatingVueWarpper(this: ShikijiTransformerContext, text: string, docs: string | undefined, node: Element | Text, presisted = false): Element {
   const themedContent = (this.codeToHast(text, {
     ...this.options,
     transformers: [],
     transforms: undefined,
   }).children[0] as Element).children
 
+  if (docs) {
+    themedContent.push({
+      type: 'element',
+      tagName: 'div',
+      properties: { class: 'twoslash-popup-jsdoc' },
+      children: [
+        {
+          type: 'text',
+          value: docs,
+        },
+      ],
+    })
+  }
+
   return {
     type: 'element',
     tagName: 'v-menu',
@@ -51,11 +65,11 @@ function createFloatingVueWarpper(this: ShikijiTransformerContext, text: string,
 export const rendererFloatingVue: TwoSlashRenderers = {
   ...rich,
   nodeStaticInfo(info, node) {
-    return createFloatingVueWarpper.call(this, info.text, node)
+    return createFloatingVueWarpper.call(this, info.text, info.docs, node)
   },
   nodeQuery(query, node) {
     if (!query.text)
       return {}
-    return createFloatingVueWarpper.call(this, query.text, node, true)
+    return createFloatingVueWarpper.call(this, query.text, query.docs, node, true)
   },
 }

docs/.vitepress/theme/custom.css

@@ -42,3 +42,11 @@
   transition: color 0.5s;
   white-space: pre-wrap;
 }
+
+.floating-vue-twoslash .twoslash-popup-jsdoc {
+  border-top: 1px solid var(--vp-c-border);
+  color: var(--vp-c-text-1);
+  padding: 6px 12px 6px 12px;
+  font-family: var(--vp-font-family-base);
+  font-size: 0.9em;
+}

docs/guide/dual-themes.md

@@ -8,15 +8,15 @@ Shikiji supports outputing light/dark dual themes. Different from [markdown-it-s
 
 Change the `theme` option in `codeToHtml` to `options` with `light` and `dark` keys to generate two themes.
 
-```js
+```ts twoslash
 import { getHighlighter } from 'shikiji'
 
-const shiki = await getHighlighter({
+const highlighter = await getHighlighter({
   themes: ['nord', 'min-light'],
   langs: ['javascript'],
 })
 
-const code = shiki.codeToHtml('console.log("hello")', {
+const code = highlighter.codeToHtml('console.log("hello")', {
   lang: 'javascript',
   themes: {
     light: 'min-light',
@@ -85,7 +85,7 @@ html.dark .shiki span {
 It's also possible to support more than two themes. In the `themes` object, you can have an arbitrary number of themes, and specify the default theme with `defaultColor` option.
 
 ```js
-const code = shiki.codeToHtml('console.log("hello")', {
+const code = highlighter.codeToHtml('console.log("hello")', {
   lang: 'javascript',
   themes: {
     light: 'github-light',
@@ -115,7 +115,7 @@ Then update your CSS snippet to control when each theme takes effect. Here is an
 If you want to take full control of the colors or avoid using `!important` to override, you can optionally disable the default color by setting `defaultColor` to `false`.
 
 ```js
-const code = shiki.codeToHtml('console.log("hello")', {
+const code = highlighter.codeToHtml('console.log("hello")', {
   lang: 'javascript',
   themes: {
     light: 'vitesse-light',
@@ -142,12 +142,12 @@ You can register custom language aliases with `langAlias` option. For example:
 ```js
 import { getHighlighter } from 'shikiji'
 
-const shiki = await getHighlighter({
+const highlighter = await getHighlighter({
   langs: ['javascript'],
   langAlias: {
     mylang: 'javascript',
   },
 })
 
-const code = shiki.codeToHtml('const a = 1', { lang: 'mylang' })
+const code = highlighter.codeToHtml('const a = 1', { lang: 'mylang' })
 ```

docs/guide/install.md

@@ -73,15 +73,18 @@ await highlighter.loadLanguage('javascript') // load the language
 
 If you want to load all themes and languages (not recommended), you can iterate all keys from `bundledLanguages` and `bundledThemes`.
 
-```ts
+```ts twoslash theme:poimandres
 import { bundledLanguages, bundledThemes, getHighlighter } from 'shikiji'
 
 const highlighter = await getHighlighter({
   themes: Object.keys(bundledThemes),
   langs: Object.keys(bundledLanguages),
 })
 
-highlighter.codeToHtml('const a = 1', { lang: 'javascript' })
+highlighter.codeToHtml('const a = 1', {
+  lang: 'javascript',
+  theme: 'poimandres'
+})
 ```
 
 Or if your usage can be async, you can try the [shorthands](/guide/shorthands) which will load the theme/language on demand.
@@ -90,7 +93,8 @@ Or if your usage can be async, you can try the [shorthands](/guide/shorthands) w
 
 When importing `shikiji`, all the themes and languages are bundled as async chunks. Normally it won't be a concern to you as they are not being loaded if you don't use them. In some cases, if you want to control what to bundle, you can use the core and compose your own bundle.
 
-```js theme:material-theme-ocean
+```ts twoslash theme:material-theme-ocean
+// @noErrors
 // `shikiji/core` entry does not include any themes or languages or the wasm binary.
 import { getHighlighterCore } from 'shikiji/core'
 
@@ -100,7 +104,7 @@ import { getWasmInlined } from 'shikiji/wasm'
 // directly import the theme and language modules, only the ones you imported will be bundled.
 import nord from 'shikiji/themes/nord.mjs'
 
-const shiki = await getHighlighterCore({
+const highlighter = await getHighlighterCore({
   themes: [
     // instead of strings, you need to pass the imported module
     nord,
@@ -118,9 +122,9 @@ const shiki = await getHighlighterCore({
 })
 
 // optionally, load themes and languages after creation
-await shiki.loadTheme(import('shikiji/themes/vitesse-light.mjs'))
+await highlighter.loadTheme(import('shikiji/themes/vitesse-light.mjs'))
 
-const code = shiki.codeToHtml('const a = 1', {
+const code = highlighter.codeToHtml('const a = 1', {
   lang: 'javascript',
   theme: 'material-theme-ocean'
 })
@@ -136,33 +140,39 @@ We also provide some pre-composed bundles for you to use easily, learn more abou
 
 For example, the following ESM code:
 
-```js
+```ts twoslash
 // ESM
 import { getHighlighter } from 'shikiji'
 
 async function main() {
-  const shiki = await getHighlighter({
+  const highlighter = await getHighlighter({
     themes: ['vitesse-dark'],
     langs: ['javascript'],
   })
 
-  const code = shiki.codeToHtml('const a = 1', { lang: 'javascript' })
+  const code = highlighter.codeToHtml('const a = 1', {
+    theme: 'vitesse-dark',
+    lang: 'javascript',
+  })
 }
 ```
 
 Can be written in CJS as:
 
-```js
+```ts twoslash
 // CJS
 async function main() {
   const { getHighlighter } = await import('shikiji')
 
-  const shiki = await getHighlighter({
+  const highlighter = await getHighlighter({
     themes: ['vitesse-dark'],
     langs: ['javascript'],
   })
 
-  const code = shiki.codeToHtml('const a = 1', { lang: 'javascript' })
+  const code = highlighter.codeToHtml('const a = 1', {
+    theme: 'vitesse-dark',
+    lang: 'javascript'
+  })
 }
 ```
 
@@ -199,7 +209,8 @@ Cloudflare Workers [does not support initializing WebAssembly from binary data](
 
 Meanwhile, it's also recommended to use the [Fine-grained Bundle](#fine-grained-bundle) approach to reduce the bundle size.
 
-```ts theme:nord
+```ts twoslash theme:nord
+// @noErrors
 import { getHighlighterCore, loadWasm } from 'shikiji/core'
 import nord from 'shikiji/themes/nord.mjs'
 import js from 'shikiji/langs/javascript.mjs'
@@ -217,7 +228,10 @@ export default {
       langs: [js],
     })
 
-    return new Response(highlighter.codeToHtml('console.log(\'shiki\');', { lang: 'js' }))
+    return new Response(highlighter.codeToHtml('console.log(\'shiki\');', {
+      theme: 'nord',
+      lang: 'js'
+    }))
   },
 }
 ```

docs/guide/load-lang.md

@@ -4,7 +4,8 @@ Check [All Builtin Languages](/languages) as well.
 
 You can load custom languages by passing a TextMate grammar object into the langs array.
 
-```ts
+```ts twoslash
+// @noErrors
 import { getHighlighter } from 'shikiji'
 
 const myLang = JSON.parse(fs.readFileSync('my-lang.json', 'utf8'))
@@ -20,7 +21,8 @@ const html = highlighter.codeToHtml(code, {
 
 You can also load languages after the highlighter has been created.
 
-```ts
+```ts twoslash
+// @noErrors
 import { getHighlighter } from 'shikiji'
 
 const myLang = JSON.parse(fs.readFileSync('my-lang.json', 'utf8'))

docs/guide/load-theme.md

@@ -4,7 +4,7 @@ Check [All Builtin Themes](/themes) as well.
 
 You can load custom themes by passing a `Theme` object into the themes array.
 
-```ts
+```ts twoslash
 import { getHighlighter } from 'shikiji'
 
 const myTheme = {
@@ -24,6 +24,7 @@ const highlighter = await getHighlighter({
   themes: [myTheme]
 })
 
+const code = `console.log('hello')`
 const html = highlighter.codeToHtml(code, {
   lang: 'javascript',
   theme: 'my-theme'
@@ -32,7 +33,8 @@ const html = highlighter.codeToHtml(code, {
 
 You can also load themes after the highlighter has been created.
 
-```ts
+```ts twoslash
+// @noErrors
 import { getHighlighter } from 'shikiji'
 
 // Load the theme object from a file, a network request, or anywhere
@@ -42,6 +44,7 @@ const highlighter = await getHighlighter()
 
 await highlighter.loadTheme(myTheme) // <--
 
+const code = `console.log('hello')`
 const html = highlighter.codeToHtml(code, {
   lang: 'javascript',
   theme: 'my-theme'

docs/guide/shorthands.md

@@ -2,11 +2,17 @@
 
 In addition to the `getHighlighter` function, `shikiji` also provides some shorthand functions for simpler usage.
 
-```js
+```ts twoslash
 import { codeToHtml, codeToThemedTokens } from 'shikiji'
 
-const code = await codeToHtml('const a = 1', { lang: 'javascript', theme: 'nord' })
-const tokens = await codeToThemedTokens('<div class="foo">bar</div>', { lang: 'html', theme: 'min-dark' })
+const code = await codeToHtml('const a = 1', {
+  lang: 'javascript',
+  theme: 'nord'
+})
+const tokens = await codeToThemedTokens('<div class="foo">bar</div>', {
+  lang: 'html',
+  theme: 'min-dark'
+})
 ```
 
 Currently supports:
@@ -15,6 +21,6 @@ Currently supports:
 - `codeToHtml`
 - `codeToHast`
 
-Internally they maintain a singleton highlighter instance and load the theme/language on demand. Different from `shiki.codeToHtml`, the `codeToHtml` shorthand function returns a Promise and `lang` and `theme` options are required.
+Internally they maintain a singleton highlighter instance and load the theme/language on demand. Different from `highlighter.codeToHtml`, the `codeToHtml` shorthand function returns a Promise and `lang` and `theme` options are required.
 
 > **Note:** These are only available in the [bundled usage](/guide/install#bundled-usage), a.k.a the main `shikiji` entry. If you are using the [fine-grained bundle](/guide/install#fine-grained-bundle), you can create your own shorthands using [`createSingletonShorthands`](https://github.com/antfu/shikiji/blob/main/packages/shikiji/src/core/bundle-factory.ts) or port it your own.

docs/guide/transformers.md

@@ -35,7 +35,7 @@ We also provide some common transformers for you to use, check [`shikiji-transfo
 You can also got the intermediate `hast` to do your custom rendering without serialize them into HTML with `codeToHast`. You can also further integrate the ast the [unified](https://github.com/unifiedjs) ecosystem.
 
 ```js
-const root = shiki.codeToHast(
+const root = highlighter.codeToHast(
   'const a = 1',
   { lang: 'javascript', theme: 'nord' }
 )

docs/packages/transformers.md

@@ -10,7 +10,7 @@ Collective of common transformers for Shikiji, inspired by [shiki-processor](htt
 npm i -D shikiji-transformers
 ```
 
-```ts
+```ts twoslash
 import {
   codeToHtml,
 } from 'shikiji'
@@ -19,8 +19,10 @@ import {
   // ...
 } from 'shikiji-transformers'
 
-const html = codeToHtml(code, {
+const code = `console.log('hello')`
+const html = await codeToHtml(code, {
   lang: 'ts',
+  theme: 'nord',
   transformers: [
     transformerNotationDiff(),
     // ...

docs/packages/twoslash.md

@@ -89,7 +89,7 @@ Number.parseInt('123', 10)
 ```ts twoslash
 import { getHighlighterCore } from 'shikiji/core'
 
-const shiki = await getHighlighterCore({})
+const highlighter = await getHighlighterCore({})
 // @log: Custom log message
 const a = 1
 // @error: Custom error message

eslint.config.ts

@@ -7,6 +7,12 @@ export default antfu(
       markdown: true,
       css: true,
     },
+    markdown: {
+      overrides: {
+        'unicorn/prefer-node-protocol': 'off',
+        'import/first': 'off',
+      },
+    },
     ignores: [
       'packages/shikiji/src/assets/*.ts',
       '**/fixtures/**',