doc(plugin-twoslash): Add documentation for plugin-twoslash

Author: Karibash

website/docs/en/plugin/official-plugins/_meta.json

@@ -10,5 +10,6 @@
   "preview",
   "playground",
   "rss",
-  "algolia"
+  "algolia",
+  "twoslash"
 ]

website/docs/en/plugin/official-plugins/twoslash.mdx

@@ -0,0 +1,60 @@
+# @rspress/plugin-twoslash <SourceCode href="https://github.com/web-infra-dev/rspress/tree/main/packages/plugin-twoslash" />
+
+import { SourceCode, PackageManagerTabs } from '@rspress/core/theme';
+
+Integration of [Twoslash](https://github.com/twoslashes/twoslash)'s Rspress Plugin for Automatically Generating Rich Code Blocks with Type Information.
+
+## Installation
+
+<PackageManagerTabs command="add @rspress/plugin-twoslash -D" />
+
+## Usage
+
+### 1. Register the plugin
+
+```ts title="rspress.config.ts"
+import { defineConfig } from '@rspress/core';
+import { pluginTwoslash } from '@rspress/plugin-twoslash';
+
+export default defineConfig({
+  plugins: [pluginTwoslash()],
+});
+```
+
+### 2. Write code blocks with twoslash
+
+Use the special comments within TypeScript code blocks enables Twoslash features.
+
+For more detailed usage, please refer to the [Twoslash documentation](https://twoslash.netlify.app/guide/).
+
+#### Extract type
+
+```ts
+const hi = 'Hello';
+const msg = `${hi}, world`;
+//    ^?
+```
+
+#### Completions
+
+```ts
+// @noErrors
+console.e;
+//       ^|
+```
+
+#### Highlighting
+
+```ts
+function add(a: number, b: number) {
+  //     ^^^
+  return a + b;
+}
+```
+
+#### Error
+
+```ts
+// @noErrorValidation
+const str: string = 1;
+```

website/docs/zh/plugin/official-plugins/_meta.json

@@ -10,5 +10,6 @@
   "preview",
   "playground",
   "rss",
-  "algolia"
+  "algolia",
+  "twoslash"
 ]

website/docs/zh/plugin/official-plugins/twoslash.mdx

@@ -0,0 +1,60 @@
+# @rspress/plugin-twoslash <SourceCode href="https://github.com/web-infra-dev/rspress/tree/main/packages/plugin-twoslash" />
+
+import { SourceCode, PackageManagerTabs } from '@rspress/core/theme';
+
+集成 [Twoslash](https://github.com/twoslashes/twoslash) 的 Rspress 插件，用于自动生成带有类型信息的丰富代码块。
+
+## 安装
+
+<PackageManagerTabs command="add @rspress/plugin-twoslash -D" />
+
+## 使用
+
+### 1. 注册插件
+
+```ts title="rspress.config.ts"
+import { defineConfig } from '@rspress/core';
+import { pluginTwoslash } from '@rspress/plugin-twoslash';
+
+export default defineConfig({
+  plugins: [pluginTwoslash()],
+});
+```
+
+### 2. 使用 Twoslash 编写代码块
+
+在 TypeScript 代码块中使用特殊注释来启用 Twoslash 功能。
+
+更详细的用法，请参考 [Twoslash 文档](https://twoslash.netlify.app/guide/)。
+
+#### 提取类型
+
+```ts
+const hi = 'Hello';
+const msg = `${hi}, world`;
+//    ^?
+```
+
+#### 自动补全
+
+```ts
+// @noErrors
+console.e;
+//       ^|
+```
+
+#### 高亮显示
+
+```ts
+function add(a: number, b: number) {
+  //     ^^^
+  return a + b;
+}
+```
+
+#### 错误提示
+
+```ts
+// @noErrorValidation
+const str: string = 1;
+```