Add shikiji twoslash (#2612)

* chore: upgrade deps

作者：  Jellli <dt@live.it>

* feat: add twoslash transformer

* feat: update plugins to fit rehype-pretty-code's updates

* fix: prevent the crash from not receiving the style prop

* feat: handle when classname is a array

* feat: fix darkmode support

* feat: update snapshot

* docs: add twoslash support document

* update

* prettier

* prettier

* more

* more

* more

* more

* aa

* Update .changeset/rich-apricots-bake.md

---------

Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>

Author: 3 people

.changeset/rich-apricots-bake.md

@@ -0,0 +1,9 @@
+---
+'nextra-theme-blog': minor
+'nextra-theme-docs': minor
+'nextra': minor
+---
+
+add shikiji twoslash
+
+Demo feature: https://nextra-v2-na3obnhub-shuding1.vercel.app/docs/guide/twoslash-support

docs/pages/docs/guide/twoslash-support.mdx

@@ -0,0 +1,64 @@
+# Twoslash Support
+
+Twoslash provides an inline type hove inside the code block.
+
+## Basic usage
+
+You can enable twoslash to your code blocks by adding a `twoslash` metadata:
+
+````md copy=false filename="Markdown"
+```ts twoslash
+// @errors: 2540
+interface Todo {
+  title: string
+}
+
+const todo: Readonly<Todo> = {
+  title: 'Delete inactive users'.toUpperCase()
+  //  ^?
+}
+
+todo.title = 'Hello'
+
+Number.parseInt('123', 10)
+//      ^|
+```
+````
+
+Renders:
+
+```ts twoslash
+// @errors: 2540
+interface Todo {
+  title: string
+}
+
+const todo: Readonly<Todo> = {
+  title: 'Delete inactive users'.toUpperCase()
+  //  ^?
+}
+
+todo.title = 'Hello'
+
+Number.parseInt('123', 10)
+//      ^|
+```
+
+## Custom log message
+
+You can add log message to your code by adding:
+
+- `@log: <message>` Custom log message
+- `@error: <message>` Custom error message
+- `@warn: <message>` Custom warn message
+- `@annotate: <message>` Custom annotate message
+
+```ts twoslash
+// @log: Custom log message
+const a = 1
+// @error: Custom error message
+const b = 1
+// @warn: Custom warning message
+const c = 1
+// @annotate: Custom annotation message
+```

packages/nextra/package.json

@@ -142,6 +142,7 @@
     "remark-reading-time": "^2.0.1",
     "remark-smartypants": "^2.1.0",
     "shikiji": "^0.10.2",
+    "shikiji-twoslash": "^0.10.2",
     "slash": "^5.1.0",
     "title": "^3.5.3",
     "unist-util-remove": "^4.0.0",

packages/nextra/src/server/compile.ts

@@ -13,6 +13,7 @@ import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 import remarkReadingTime from 'remark-reading-time'
 import remarkSmartypants from 'remark-smartypants'
+import { rendererRich, transformerTwoslash } from 'shikiji-twoslash'
 import type { Pluggable, Plugin } from 'unified'
 import type {
   FrontMatter,
@@ -276,6 +277,16 @@ export async function compileMdx(
                 rehypePrettyCode,
                 {
                   ...DEFAULT_REHYPE_PRETTY_CODE_OPTIONS,
+                  // TODO: For some reason I get Error: Cannot find module 'path' in remote content,
+                  // disable twoslash temporarily
+                  transformers: isRemoteContent
+                    ? []
+                    : [
+                        transformerTwoslash({
+                          renderer: rendererRich(),
+                          explicitTrigger: true
+                        })
+                      ],
                   ...rehypePrettyCodeOptions
                 }
               ] as any,

packages/nextra/src/server/rehype-plugins/rehype.ts

@@ -1,5 +1,6 @@
 import type { Element } from 'hast'
 import type { Options as RehypePrettyCodeOptions } from 'rehype-pretty-code'
+import { bundledLanguages, getHighlighter } from 'shikiji'
 import type { Plugin } from 'unified'
 import { visit } from 'unist-util-visit'
 
@@ -22,11 +23,18 @@ export const DEFAULT_REHYPE_PRETTY_CODE_OPTIONS: RehypePrettyCodeOptions = {
     }
     delete node.properties['data-line']
   },
-  filterMetaString: meta => meta.replace(CODE_BLOCK_FILENAME_REGEX, ''),
   theme: {
     light: 'github-light',
     dark: 'github-dark'
-  }
+  },
+  getHighlighter(opts) {
+    return getHighlighter({
+      ...opts,
+      // Without `getHighlighter` option ```mdx lang is not highlighted...
+      langs: Object.keys(bundledLanguages)
+    })
+  },
+  filterMetaString: meta => meta.replace(CODE_BLOCK_FILENAME_REGEX, '')
 }
 
 export const rehypeParseCodeMeta: Plugin<
@@ -63,7 +71,8 @@ export const rehypeAttachCodeMeta: Plugin<[], any> = () => ast => {
     const isRehypePrettyCode =
       'data-rehype-pretty-code-figure' in node.properties
     if (!isRehypePrettyCode) return
-    // remove <div data-rehype-pretty-code-fragment /> element that wraps <pre /> element
+
+    // remove <figure data-rehype-pretty-code-figure /> element that wraps <pre /> element
     // because we'll wrap with our own <div />
     const preEl: PreElement = Object.assign(node, node.children[0])
     delete preEl.properties['data-theme']
@@ -93,7 +102,7 @@ export const rehypeAttachCodeMeta: Plugin<[], any> = () => ast => {
           ...Object.entries(node.properties).map(([name, value]) => ({
             type: 'mdxJsxAttribute',
             name,
-            value
+            value: Array.isArray(value) ? value.join(' ') : value
           }))
         )
       }