docs: support shikiji

custom/highlighters.md

@@ -4,26 +4,46 @@ Slidev comes with two syntax highlighter for you to choose from:
 
 - [Prism](https://prismjs.com/)
 - [Shiki](https://github.com/shikijs/shiki)
+- [Shikiji](https://github.com/antfu/shikiji)
 
 **Prism** is one of the most popular syntax highlighters. The highlighting is done by adding token classes to the code and it's colored using CSS. You can browse through their [official themes](https://github.com/PrismJS/prism-themes), or create/customize one yourself very easily using [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars).
 
 **Shiki**, on the other hand, is a TextMate grammar-powered syntax highlighter. It generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with [a bunch of built-in themes](https://github.com/shikijs/shiki/blob/master/docs/themes.md). The downside of Shiki is that it also requires TextMate themes (compatible with VS Code theme) to do the highlighting, which can be a bit harder to customize.
 
+**Shikiji** is a ESM rewrite of Shiki bringing many improvements and new features. You could have [AST-based transformers](https://github.com/antfu/shikiji#hast-transformers) to customize how the code is rendered. And the [TwoSlash](#twoslash) support is also built-in.
+
 Slidev themes usually support both Prism and Shiki, but depending on the theme you are using, it might only support one of them.
 
 When you have the choice, the tradeoff is basically:
 
 - **Prism** for easier customization
 - **Shiki** for more accurate highlighting
+- **Shikiji** on top of Shiki, it also enables [TwoSlash](#twoslash) support and custom transformers addons. 
 
-By default, Slidev uses Prism. You can change it by modifying your frontmatter:
+Slidev uses Prism by default for compatibility. We recommend using Shikiji for more accurate and feature-rich highlighting, you can switch to it by adding the following to your `slides.md`:
 
 ```yaml
 ---
-highlighter: shiki
+highlighter: shikiji
 ---
 ```
 
+## TwoSlash Integration
+
+This feature is only available when you set `highlighter` to `shikiji`.
+
+[TwoSlash](https://www.typescriptlang.org/dev/twoslash/) is a powerful tool for rendering TypeScript code blocks with type informations on hover or inlined. It's quite useful for preapring slides for JavaScript/TypeScript related topics.
+
+To use it, you can add `twoslash` to the code block's language identifier:
+
+~~~md
+```ts twoslash
+console.log('hello')
+```
+~~~
+
+And example of TwoSlash enabled code snippet [can be found here](https://antfu.me/posts/shikiji-twoslash).
+
 ## Configure Prism
 
 To configure your Prism, you can just import the theme css or use [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) to configure themes for both light and dark mode. Refer to its docs for more details.
@@ -66,3 +86,30 @@ export default defineShikiSetup(async({ loadTheme }) => {
   }
 })
 ```
+
+## Configure Shikiji
+
+<Environment type="node" />
+
+Create `./setup/shikiji.ts` file with the following content:
+
+```ts
+/* ./setup/shikiji.ts */
+import { defineShikijiSetup } from '@slidev/types'
+
+export default defineShikijiSetup(() => {
+  return {
+    themes: {
+      dark: 'vitesse-dark',
+      light: 'vitesse-light',
+    },
+    transformers: [
+      ...
+    ]
+  }
+})
+```
+
+Refer to [Shikiji's docs](https://github.com/antfu/shikji) for all available options.
+
+> It make it easier for the community to adapt, when no `shikiji.ts` it presented, we will look for `shiki.ts` and try to convert it to Shikiji options.

custom/index.md

@@ -37,7 +37,7 @@ export:
   dark: false
   withClicks: false
   withToc: false
-# syntax highlighter, can be 'prism' or 'shiki'
+# syntax highlighter, can be 'prism', 'shiki' or `shikiji`
 highlighter: 'prism'
 # show line numbers in code blocks
 lineNumbers: false

guide/syntax.md

@@ -99,7 +99,7 @@ console.log('Hello, World!')
 //```
 ~~~
 
-We support [Prism](https://prismjs.com) and [Shiki](https://github.com/shikijs/shiki) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details.
+We support [Prism](https://prismjs.com), [Shiki](https://github.com/shikijs/shiki) and [Shikiji](https://github.com/antfu/shikiji) as syntax highlighters. Refer to [the highlighters section](/custom/highlighters) for more details.
 
 ### Line Highlighting
 

themes/write-a-theme.md

@@ -118,7 +118,7 @@ Slidev toggles a `dark` class on the page's `html` element for switching color s
 
 ### Highlighter
 
-Syntax highlighting colors are also provided in the theme. We support both [Prism](https://prismjs.com/) and [Shiki](https://github.com/shikijs/shiki). For more information please refer to [the syntax highlighting docs](/custom/highlighters).
+Syntax highlighting colors are also provided in the theme. We support both [Prism](https://prismjs.com/), [Shiki](https://github.com/shikijs/shiki) and [Shikiji](https://github.com/antfu/shikiji). For more information please refer to [the syntax highlighting docs](/custom/highlighters).
 
 You can support either one of them, or both. Refer to the default theme for configurations examples [`./styles/code.css`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/styles/code.css) / [`./setup/shiki.ts`](https://github.com/slidevjs/slidev/blob/main/packages/create-theme/template/setup/shiki.ts).