refactor(plugin-shiki)!: migrate to native @shikijs/rehype

e2e/fixtures/plugin-shiki/doc/index.md → e2e/fixtures/plugin-shiki/doc/index.mdx

@@ -1,6 +1,8 @@
 # @rspress/plugin-shiki
 
-<!-- createTransformerDiff -->
+## transformers
+
+{/* transformerDiff */}
 
 ```ts
 export function foo() {
@@ -9,23 +11,23 @@ export function foo() {
 }
 ```
 
-<!-- createTransformerLineNumber -->
+{/* transformerLineNumber */}
 
 ```ts
 export function foo() {
   console.log('Line number'); // [!code hl]
 }
 ```
 
-<!-- createTransformerErrorLevel -->
+{/* transformerErrorLevel */}
 
 ```ts
 export function foo() {
   console.log('Error level'); // [!code error]
 }
 ```
 
-<!-- createTransformerFocus -->
+{/* transformerFocus */}
 
 ```ts
 export function foo() {

e2e/fixtures/plugin-shiki/rspress.config.ts

@@ -1,8 +1,5 @@
 import path from 'node:path';
-import {
-  createTransformerLineNumber,
-  pluginShiki,
-} from '@rspress/plugin-shiki';
+import { pluginShiki, transformerLineNumber } from '@rspress/plugin-shiki';
 import {
   transformerNotationDiff,
   transformerNotationErrorLevel,
@@ -16,11 +13,11 @@ export default defineConfig({
   plugins: [
     pluginShiki({
       transformers: [
+        transformerLineNumber(),
         transformerNotationDiff(),
         transformerNotationErrorLevel(),
         transformerNotationHighlight(),
         transformerNotationFocus(),
-        createTransformerLineNumber(),
       ],
     }),
   ],

e2e/tests/plugin-shiki.test.ts

@@ -28,21 +28,22 @@ test.describe('plugin shiki test', async () => {
     await page.goto(`http://localhost:${appPort}`, {
       waitUntil: 'networkidle',
     });
-    const shikiDoms = await page.$$('.shiki');
+    const shikiDoms = await page.$$('.rspress-code-content');
     expect(shikiDoms.length).toBe(4);
 
     const firstShikiDom = shikiDoms[0];
-    expect(await firstShikiDom.$eval('pre', node => node.style.overflowX)).toBe(
-      'auto',
-    );
 
     expect(
-      await firstShikiDom.$eval('code', node => node.style.whiteSpace),
+      await firstShikiDom.$eval('code', node =>
+        node.computedStyleMap().get('white-space')?.toString(),
+      ),
     ).toBe('pre');
 
     await firstShikiDom.$eval('button', btn => btn.click());
     expect(
-      await firstShikiDom.$eval('code', node => node.style.whiteSpace),
+      await firstShikiDom.$eval('code', node =>
+        node.computedStyleMap().get('white-space')?.toString(),
+      ),
     ).toBe('pre-wrap');
   });
 });

packages/document/docs/en/guide/advanced/custom-theme.mdx

@@ -14,7 +14,7 @@ If you want to develop a custom theme from scratch, you can go to [Redevelop a c
 
 By default, you need to create a `theme` directory under the project root directory, and then create an `index.ts` or `index.tsx` file under the `theme` directory, which is used to export the theme content.
 
-```bash
+```txt
 └── theme
     └── index.tsx
 ```
@@ -133,7 +133,7 @@ Of course, you may need to use page data during the development process, you can
 
 If you want to modify the icons used in the default theme component individually, just put the icons with the same name in the theme/assets directory.
 
-```bash
+```txt
 └── theme
     └── assets
         └── logo.svg
@@ -149,14 +149,14 @@ If you're developing a custom theme from scratch, you need to understand the bas
 
 By default, you need to create a `theme` directory under the project root directory, and then create an `index.ts` or `index.tsx` file under the `theme` directory, which is used to export the theme content.
 
-```bash
+```txt
 ├── theme
 │   └── index.tsx
 ```
 
 In the `theme/index.tsx` file, you need to export a Layout component, which is the entry component of your theme:
 
-```ts
+```tsx
 // theme/index.tsx
 function Layout() {
   return <div>Custom Theme Layout</div>;
@@ -173,7 +173,7 @@ export * from 'rspress/theme';
 
 Layout component will be used to render the layout of the entire document site, you can introduce your custom components in this component, for example:
 
-```ts
+```tsx
 // theme/index.tsx
 import { Navbar } from './Navbar';
 
@@ -248,7 +248,7 @@ function Layout() {
 
 [react-router-dom](https://reactrouter.com/) is used inside Rspress to implement routing, so you can directly use the Hook of `react-router-dom`, for example:
 
-```ts
+```tsx
 import { useLocation } from 'rspress/runtime';
 
 function Layout() {

packages/document/docs/en/guide/basic/auto-nav-sidebar.mdx

@@ -10,7 +10,7 @@ Automated navbar/sidebar will only work if there are no `nav` and `sidebar` conf
 
 First, `_meta.json` can be divided into two categories: navbar level and sidebar level. The difference between the two is that the navigation-level `_meta.json` lives in the document root, while the sidebar-level `_meta.json` lives in a subdirectory of the document root. for example:
 
-```js
+```txt
 docs
 ├── _meta.json // navigation bar level
 └── guides
@@ -23,7 +23,7 @@ docs
 
 If your document supports i18n, then `_meta.json` at the navigation bar level will be placed in the corresponding language directory, for example:
 
-```js
+```txt
 docs
 ├── en
 │   ├── _meta.json // navigation bar level
@@ -178,7 +178,7 @@ When `dashed` is set to `true`, it indicates that the divider line is dashed. Ot
 
 If you want to display a document when clicking on the sidebar directory, you can create an `md(x)` file with the same name at the same level as the current directory, for example:
 
-```bash
+```txt
 docs
 ├── advanced.mdx
 └── advanced
@@ -290,7 +290,7 @@ Here is a complete example using the three types above:
 
 In some directories, you don't need to configure `_meta.json` and let Rspress automatically generate the sidebar. This requires ensuring that the directory contains only documents, not subdirectories, and you have no requirements for the order of documents. For example, there is now the following document structure:
 
-```bash
+```txt
 docs
 ├── _meta.json
 └── guides
@@ -317,7 +317,7 @@ In the guides directory you can configure `_meta.json` as follows:
 
 In `basic` directory, you may not configure `_meta.json`, and then Rspress will automatically generate a sidebar for you, the default is sorted alphabetically according to the file name. If you want to customize the order, you can prefix the file name with a number, such as:
 
-```bash
+```txt
 basic
   ├── 1-introduction.mdx
   ├── 2-install.mdx

packages/document/docs/en/guide/basic/conventional-route.mdx

@@ -10,7 +10,7 @@ For example, if there is a file named `foo.md` in the `docs` directory, the rout
 
 Rspress automatically scans the root directory and all subdirectories, and maps file paths to route paths. For example, if you have the following file structure:
 
-```bash
+```txt
 docs
 ├── foo
 │   └── bar.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 We recommend that you place documentation files in the `docs` directory to make your project more clear. For non-documentation content, such as custom components, util functions, etc., they can be maintained outside the `docs` directory. For example:
 
-```bash
+```txt
 docs
 └── foo.mdx
 src

packages/document/docs/en/guide/basic/ssg.mdx

@@ -4,7 +4,7 @@
 
 In the production build, Rspress will automatically generate a static site for you, that is, generate the HTML content of each page. After the build is completed, the HTML will appear in the default product directory, such as:
 
-```bash
+```txt
 doc_build
 ├── static # Static resources
 │   ├── main.js

packages/document/docs/en/guide/basic/static-assets.mdx

@@ -119,7 +119,7 @@ On the other hand, you can also import static assets using absolute paths. In th
 
 For example, if the root directory is `docs` and the directory structure is as follows
 
-```bash
+```txt
 docs
 ├── public
 │   └── demo.png

packages/document/docs/en/guide/default-theme/i18n.mdx

@@ -13,7 +13,7 @@ To achieve document internationalization in Rspress, you need to do the followin
 
 Create a new `i18n.json` in the current workspace, the directory structure is as follows:
 
-```bash {15}
+```txt
 .
 ├── docs
 ├── i18n.json
@@ -120,7 +120,7 @@ This is important because **for routes in the default language, Rspress will rem
 
 After the above configuration, we can start to create documents in different language versions. It is very simple. We only need to create the following structure in the document root directory:
 
-```bash
+```txt
 docs
 ├── en
 │   ├── api

packages/document/docs/en/guide/default-theme/multi-version.mdx

@@ -23,7 +23,7 @@ Here, `default` is the default version, and `versions` is the version list.
 
 According to the version list you configured, add multi-version documents under the `docs` directory, for example:
 
-```bash
+```txt
 docs
 ├── v1
 │   ├── README.md

packages/document/docs/en/guide/default-theme/overview-page.mdx

@@ -14,7 +14,7 @@ Generating the preview page requires the following two steps:
 
 For example, create the following directories and files
 
-```bash
+```txt
 ├── docs
 │   ├── index.md
 │   ├── api
@@ -83,7 +83,7 @@ If you want to generate a sub-preview page under `theme`, there are two ways:
 
 1. Create a new file `theme.md` with the same name in the parent directory of `theme` and configure the frontmatter of `overview: true`.
 
-```bash
+```txt
 ├── docs
 │ ├── index.md
 │ ├── api
@@ -97,7 +97,7 @@ If you want to generate a sub-preview page under `theme`, there are two ways:
 
 2. Create a new `index.md` in the `theme` directory and configure the frontmatter of `overview: true`.
 
-```bash
+```txt
 ├── docs
 │ ├── index.md
 │ ├── api

packages/document/docs/en/guide/start/getting-started.mdx

@@ -54,7 +54,7 @@ export default defineConfig({
 
 And then create `tsconfig.json`, add the following config:
 
-```ts
+```json
 {
   "compilerOptions": {
     "target": "ES2020",

packages/document/docs/en/guide/start/introduction.mdx

@@ -142,7 +142,7 @@ export default defineConfig({
 });
 ```
 
-```
+```txt
 // Directory structure
 docs
 ├── v1
@@ -166,18 +166,12 @@ Rspress supports two ways to customize themes:
 
 1. Extend from the default theme. In each component of the default theme, many slots are provided for you to add custom layout content, for example:
 
-```ts
+```tsx
 // theme/index.tsx
 import Theme from 'rspress/theme';
 import { NoSSR } from 'rspress/runtime';
 
-const Layout = () => (
-  <Theme.Layout
-    beforeNavTitle={
-      <p>Custom Block</p>
-    }
-  />
-);
+const Layout = () => <Theme.Layout beforeNavTitle={<p>Custom Block</p>} />;
 
 export default {
   ...Theme,

packages/document/docs/en/plugin/official-plugins/shiki.mdx

@@ -36,27 +36,12 @@ export default defineConfig({
 This plugin supports passing in an object configuration. The properties of this object configuration are as follows:
 
 ```ts
-import type {
-  BuiltinLanguage,
-  BuiltinTheme,
-  ShikiTransformer,
-  SpecialLanguage,
-} from 'shiki';
-
-export interface PluginShikiOptions {
-  /**
-   * Code highlighting theme, @see https://shiki.style/themes
-   */
-  theme: BuiltinTheme | 'css-variables';
-  /**
-   * Code highlighting language, @see https://shiki.style/languages
-   */
-  langs: Array<BuiltinLanguage | SpecialLanguage>;
-  /**
-   * Custom shiki transformer, @see https://shiki.style/guide/transformers
-   */
-  transformers: ShikiTransformer[];
-}
+import type { RehypeShikiOptions } from '@shikijs/rehype';
+
+/**
+ * @see https://github.com/shikijs/shiki/blob/main/packages/rehype/src/types.ts
+ */
+export type PluginShikiOptions = RehypeShikiOptions;
 ```
 
 The code highlighting theme uses `css-variables`. You can also choose your favorite theme, refer to the [Shiki theme list documentation](https://github.com/shikijs/shiki/blob/main/docs/themes.md) for details.
@@ -71,13 +56,13 @@ Transformer is a concept in this plugin, its function is to transform specific s
 
 A few Transformers are built into this plugin, including:
 
-- `createTransformerLineNumber`: Implement the display of the line number of the code block.
+- `transformerLineNumber`: Implement the display of the line number of the code block.
 
 You can enable these Transformers by configuring the `transformers` attribute, such as:
 
 ```ts title="rspress.config.ts"
 import { defineConfig } from 'rspress/config';
-import { pluginShiki, createTransformerDiff } from '@rspress/plugin-shiki';
+import { pluginShiki, transformerLineNumber } from '@rspress/plugin-shiki';
 import {
   transformerNotationDiff,
   transformerNotationErrorLevel,
@@ -90,7 +75,7 @@ export default defineConfig({
     pluginShiki({
       transformers: [
         // Add as needed
-        createTransformerLineNumber(),
+        transformerLineNumber(),
         // transformerNotationDiff(),
         // transformerNotationErrorLevel(),
         // transformerNotationHighlight(),

packages/document/docs/en/plugin/official-plugins/typedoc.mdx

@@ -67,7 +67,7 @@ export function multi(
 
 When you start/build the project, the plugin will automatically generate an `api` directory in your document root directory. The directory structure is as follows:
 
-```bash
+```txt
 api
 ├── README.md
 ├── documentation.json