diff --git a/docs/.vuepress/notes/zh/theme-guide.ts b/docs/.vuepress/notes/zh/theme-guide.ts
index 0f35a093..00d95870 100644
--- a/docs/.vuepress/notes/zh/theme-guide.ts
+++ b/docs/.vuepress/notes/zh/theme-guide.ts
@@ -60,6 +60,7 @@ export const themeGuide = defineNoteConfig({
           items: [
             'intro',
             'features',
+            'copy-code',
             'code-tabs',
             'import',
             'twoslash',
@@ -118,7 +119,6 @@ export const themeGuide = defineNoteConfig({
       prefix: 'features',
       items: [
         'icon',
-        'copy-code',
         'search',
         'comments',
         'bulletin',
diff --git a/docs/notes/theme/config/intro.md b/docs/notes/theme/config/intro.md
index 0de81d49..2ce59c03 100644
--- a/docs/notes/theme/config/intro.md
+++ b/docs/notes/theme/config/intro.md
@@ -36,7 +36,7 @@ VuePress 站点的基本配置文件是 `.vuepress/config.js` ，但也同样支
 
 基础配置文件示例：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { viteBundler } from '@vuepress/bundler-vite'
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -64,7 +64,7 @@ export default defineUserConfig({
 
 一般我们使用 `.vuepress/config.js` 或者 `.vuepress/config.ts` 来配置主题。
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -122,7 +122,10 @@ export default defineUserConfig({
     - **plume.config.ts**
 :::
 
-```ts title="plume.config.ts"
+```ts title="plume.config.ts" twoslash
+// @filename: ./navbar.ts
+export default []
+// ---cut---
 import { defineThemeConfig } from 'vuepress-theme-plume'
 import navbar from './navbar'
 
@@ -149,7 +152,7 @@ export default defineThemeConfig({
 如果你不希望按照 VuePress 默认的配置文件路径管理你的主题配置文件，
 你也可以在 VuePress 配置文件中指定自己的主题配置文件路径。
 
-```ts
+```ts title=".vuepress/config.ts" twoslash
 import path from 'node:path'
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
diff --git a/docs/notes/theme/config/locales.md b/docs/notes/theme/config/locales.md
index 756f1e12..e1903438 100644
--- a/docs/notes/theme/config/locales.md
+++ b/docs/notes/theme/config/locales.md
@@ -30,7 +30,7 @@ permalink: /config/locales/
 
 @tab .vuepress/config.ts
 
-```ts
+```ts twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -48,7 +48,7 @@ export default defineUserConfig({
 
 @tab .vuepress/plume.config.ts
 
-```ts
+```ts twoslash
 import { defineThemeConfig } from 'vuepress-theme-plume'
 
 export default defineThemeConfig({
diff --git a/docs/notes/theme/config/markdown.md b/docs/notes/theme/config/markdown.md
index 82446eec..93be6a43 100644
--- a/docs/notes/theme/config/markdown.md
+++ b/docs/notes/theme/config/markdown.md
@@ -11,7 +11,7 @@ badge:
 
 Markdown 配置用于控制 Markdown 的行为。此配置聚合了主题为 markdown 增强的各种功能的配置。
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -33,10 +33,13 @@ export default defineUserConfig({
 
 **默认配置：**
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
 export default defineUserConfig({
   theme: plumeTheme({
-    // [!code focus:9]
+    // [!code focus:11]
     markdown: {
       hint: true,
       alert: true,
@@ -44,9 +47,9 @@ export default defineUserConfig({
       plot: true,
       icons: true,
       math: { type: 'katex' },
-      include: true,
-      codeTabs: true,
-      tabs: true,
+      include: {
+        // ...option
+      },
     },
   }),
 })
diff --git a/docs/notes/theme/config/navbar.md b/docs/notes/theme/config/navbar.md
index 837f8925..80ed738c 100644
--- a/docs/notes/theme/config/navbar.md
+++ b/docs/notes/theme/config/navbar.md
@@ -15,7 +15,11 @@ permalink: /config/navigation/
 
 默认配置如下：
 
-```ts
+::: code-tabs#configs
+
+@tab .vuepress/config.ts
+
+```ts twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -31,6 +35,23 @@ export default defineUserConfig({
 })
 ```
 
+@tab .vuepress/plume.config.ts
+
+```ts twoslash
+import { defineThemeConfig } from 'vuepress-theme-plume'
+
+export default defineThemeConfig({
+  navbar: [
+    { text: '首页', link: '/' },
+    { text: '博客', link: '/blog/' },
+    { text: '标签', link: '/blog/tags/' },
+    { text: '归档', link: '/blog/archives/' }
+  ]
+})
+```
+
+:::
+
 当开启了 多语言配置，则会生成对应语言的导航栏的默认配置：
 
 ```ts
@@ -186,13 +207,13 @@ export default defineUserConfig({
 
 ## 配置帮助函数
 
-主题提供了 `defineNavbar(config)` 函数，为主题使用者提供导航栏配置的类型帮助。
+主题提供了 `defineNavbarConfig(config)` 函数，为主题使用者提供导航栏配置的类型帮助。
 便于将 `navbar` 配置分离到独立的配置文件中。
 
-```ts title="navbar.ts"
-import { defineNavbar } from 'vuepress-theme-plume'
+```ts title="navbar.ts" twoslash
+import { defineNavbarConfig } from 'vuepress-theme-plume'
 
-export default defineNavbar([
+export default defineNavbarConfig([
   { text: '首页', link: '/' },
   { text: '博客', link: '/blog/' },
   // ... more
diff --git a/docs/notes/theme/config/notes.md b/docs/notes/theme/config/notes.md
index 50a56345..ac5df591 100644
--- a/docs/notes/theme/config/notes.md
+++ b/docs/notes/theme/config/notes.md
@@ -14,7 +14,11 @@ permalink: /config/notes/
 
 默认配置如下：
 
-```ts
+::: code-tabs#configs
+
+@tab .vuepress/config.ts
+
+```ts twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -25,6 +29,18 @@ export default defineUserConfig({
 })
 ```
 
+@tab .vuepress/plume.config.ts
+
+```ts twoslash
+import { defineThemeConfig } from 'vuepress-theme-plume'
+
+export default defineThemeConfig({
+  notes: { link: '/', dir: 'notes', notes: [] }, // [!code highlight]
+})
+```
+
+:::
+
 如果启用了 多语言配置， 你 也可以在 `locales` 字段中 分别配置 `notes`
 
 ```ts
diff --git a/docs/notes/theme/config/plugins/README.md b/docs/notes/theme/config/plugins/README.md
index 92f04147..529c5386 100644
--- a/docs/notes/theme/config/plugins/README.md
+++ b/docs/notes/theme/config/plugins/README.md
@@ -10,7 +10,7 @@ permalink: /config/plugins/
 
 所有主题内部使用的插件， 均在 `plugins` 字段中进行配置。
 
-``` js title=".vuepress/config.ts"
+``` js title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
diff --git a/docs/notes/theme/config/plugins/reading-time.md b/docs/notes/theme/config/plugins/reading-time.md
index 3fee1029..46959bc7 100644
--- a/docs/notes/theme/config/plugins/reading-time.md
+++ b/docs/notes/theme/config/plugins/reading-time.md
@@ -12,7 +12,7 @@ permalink: /config/plugins/reading-time/
 
 默认配置：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
diff --git a/docs/notes/theme/config/plugins/search.md b/docs/notes/theme/config/plugins/search.md
index d2f00371..579ec846 100644
--- a/docs/notes/theme/config/plugins/search.md
+++ b/docs/notes/theme/config/plugins/search.md
@@ -16,7 +16,7 @@ permalink: /config/plugins/search/
 
 默认配置：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -81,7 +81,7 @@ interface SearchBoxLocale {
 
 ### 启用
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
diff --git a/docs/notes/theme/config/plugins/shiki.md b/docs/notes/theme/config/plugins/shiki.md
index 840632b9..0596a2e2 100644
--- a/docs/notes/theme/config/plugins/shiki.md
+++ b/docs/notes/theme/config/plugins/shiki.md
@@ -30,7 +30,7 @@ Shiki 支持多种编程语言。
 
 默认配置：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
diff --git a/docs/notes/theme/config/plugins/watermark.md b/docs/notes/theme/config/plugins/watermark.md
index 5b676463..1188b6f2 100644
--- a/docs/notes/theme/config/plugins/watermark.md
+++ b/docs/notes/theme/config/plugins/watermark.md
@@ -12,7 +12,7 @@ permalink: /config/watermark/
 
 ## 使用
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -22,7 +22,6 @@ export default defineUserConfig({
     watermark: {
       // enabled: false,  // boolean 类型控制是否全局启用
       enabled: page => true, // function 类型 过滤哪些页面启用水印
-      delay: 500, // 添加水印的延时。以毫秒为单位。
 
       /**
        * 是否全屏水印，默认为 `true`，
@@ -76,18 +75,6 @@ export default defineUserConfig({
 
   默认插入到 body 中，可以指定插入到页面的某个元素中。
 
-### delay
-
-- 类型： `number`
-
-- 默认值： `500`
-
-- 详情：添加水印的延时。以毫秒为单位。
-
-  延迟时间取决于页面过渡动画时间，可以根据实际情况调整。
-
-  如果水印的父元素在切换页面时被重新渲染，那么延迟时间应该比页面过渡时间长一些。
-
 ## Frontmatter
 
 ### watermark
diff --git a/docs/notes/theme/config/sidebar.md b/docs/notes/theme/config/sidebar.md
index 64ac1873..a4af622c 100644
--- a/docs/notes/theme/config/sidebar.md
+++ b/docs/notes/theme/config/sidebar.md
@@ -21,11 +21,15 @@ permalink: /config/sidebar/
 
 你可以在 `notes` 目录下创建多个 `note` ，在每一个 `note` 中单独配置 `sidebar`:
 
-```ts title=".vuepress/config.ts"
+::: code-tabs#configs
+
+@tab .vuepress/config.ts
+
+```ts twoslash
 import { defineUserConfig } from 'vuepress'
 import { defineNoteConfig, plumeTheme } from 'vuepress-theme-plume'
 
-// [!code ++:9]
+// [!code ++:8]
 const noteA = defineNoteConfig({
   dir: 'note A',
   link: '/note-a/',
@@ -46,6 +50,32 @@ export default defineUserConfig({
 })
 ```
 
+@tab .vuepress/plume.config.ts
+
+```ts twoslash
+import { defineNoteConfig, defineThemeConfig } from 'vuepress-theme-plume'
+
+// [!code ++:8]
+const noteA = defineNoteConfig({
+  dir: 'note A',
+  link: '/note-a/',
+  sidebar: [
+    { text: 'one item', link: 'one' },
+    { text: 'two item', link: 'two' },
+  ]
+})
+
+export default defineThemeConfig({
+  notes: {
+    link: '/',
+    dir: 'notes',
+    notes: [noteA], // [!code ++]
+  },
+})
+```
+
+:::
+
 主题提供了 `defineNoteConfig` 来帮助你配置 note , 你可以参考 [这里](./notes.md)来查看如何配置。
 
 ## 通用 Sidebar 配置
@@ -53,7 +83,11 @@ export default defineUserConfig({
 如果你不想使用 `notes` 的方式来管理系列文章，但又期望通过侧边栏来导航到不同的文章，
 可以通过 [sidebar](../config/theme.md#sidebar) 通用配置来实现。
 
-```ts title=".vuepress/config.ts"
+::: code-tabs#configs
+
+@tab .vuepress/config.ts
+
+```ts twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -70,4 +104,22 @@ export default defineUserConfig({
 })
 ```
 
+@tab .vuepress/plume.config.ts
+
+```ts twoslash
+import { defineThemeConfig } from 'vuepress-theme-plume'
+
+export default defineThemeConfig({
+  notes: false,
+  sidebar: {
+    '/config/': [
+      { text: '侧边栏配置', link: 'sidebar-1' },
+      { text: '侧边栏配置', link: 'sidebar-2' },
+    ]
+  }
+})
+```
+
+:::
+
 完整侧边栏使用说明，请查看 [此文档](../guide/quick-start/document.md) 。
diff --git a/docs/notes/theme/config/theme.md b/docs/notes/theme/config/theme.md
index ab692a7a..26e46d7b 100644
--- a/docs/notes/theme/config/theme.md
+++ b/docs/notes/theme/config/theme.md
@@ -24,7 +24,7 @@ permalink: /config/theme/
 
 @tab .vuepress/config.ts
 
-```ts
+```ts twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -37,7 +37,7 @@ export default defineUserConfig({
 
 @tab .vuepress/plume.config.ts
 
-```ts
+```ts twoslash
 import { defineThemeConfig } from 'vuepress-theme-plume'
 
 export default defineThemeConfig({
diff --git a/docs/notes/theme/guide/chart/echarts.md b/docs/notes/theme/guide/chart/echarts.md
index 5f69fa25..cde65228 100644
--- a/docs/notes/theme/guide/chart/echarts.md
+++ b/docs/notes/theme/guide/chart/echarts.md
@@ -88,7 +88,7 @@ const option = {
 你可以在 [客户端配置文件](https://vuejs.press/zh/guide/configuration.html##使用脚本) 中导入并使用 `defineEchartsConfig` 来自定义 Echarts:
 
 ```ts
-import { defineEchartsConfig } from 'vuepress-theme-plume/client'
+import { defineEchartsConfig } from 'vuepress-plugin-md-enhance/client'
 import { defineClientConfig } from 'vuepress/client'
 
 defineEchartsConfig({
diff --git a/docs/notes/theme/guide/chart/mermaid.md b/docs/notes/theme/guide/chart/mermaid.md
index c432357e..cf601856 100644
--- a/docs/notes/theme/guide/chart/mermaid.md
+++ b/docs/notes/theme/guide/chart/mermaid.md
@@ -90,7 +90,7 @@ export default defineUserConfig({
 中导入并使用 `defineMermaidConfig` 来自定义 Mermaid 配置:
 
 ```ts
-import { defineMermaidConfig } from 'vuepress-theme-plume/client'
+import { defineMermaidConfig } from 'vuepress-plugin-md-enhance/client'
 import { defineClientConfig } from 'vuepress/client'
 
 defineMermaidConfig({
diff --git a/docs/notes/theme/guide/code/copy-code.md b/docs/notes/theme/guide/code/copy-code.md
new file mode 100644
index 00000000..5fcc4d7e
--- /dev/null
+++ b/docs/notes/theme/guide/code/copy-code.md
@@ -0,0 +1,102 @@
+---
+title: 代码复制
+icon: ph:code
+createTime: 2024/03/04 09:59:29
+permalink: /guide/code/copy-code/
+---
+
+## 概述
+
+该功能由 [@vuepress/plugin-copy-code](https://ecosystem.vuejs.press/zh/plugins/features/copy-code.html) 提供支持。
+
+主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。
+
+默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。
+
+当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。
+
+## 配置
+
+在 `.vuepress/config.ts` 配置文件中，修改 代码复制的行为：
+
+```ts title=".vuepress/config.ts"
+export default defineUserConfig({
+  theme: plumeTheme({
+    // copyCode: false  // 禁用代码复制
+    copyCode: {
+      // ...更多配置
+    }
+  })
+})
+```
+
+### showInMobile
+
+- **类型：** `boolean`
+- **默认值：** `false`
+
+是否在移动端显示复制按钮。
+
+### ignoreSelector
+
+- **类型：** `string | string[]`
+- **默认值：** `[]`
+
+代码块中的元素选择器，用于在复制时忽略相关元素。
+
+例如: `['.token.comment']` 将忽略代码块中类名为 `.token.comment` 的节点 （这会在 prismjs 中忽略注释）。
+
+### inlineSelector
+
+- **类型：** `string | string[] | boolean`
+- **默认值：** `false`
+
+是否在双击时复制行内代码内容。
+
+`boolean`: 是否在双击时复制行内代码内容。
+
+`string[] | string`: 选择器，表示需要复制的行内代码内容。
+
+### transform <Badge type="tip" text="仅限组合式 API" />
+
+- **类型：** `(preElement: HTMLPreElement) => void`
+- **默认值：** `null`
+
+一个转换器，用于在复制之前对 `<pre>` 中代码块内容进行修改。该选项仅在使用 `useCopyCode()` 时有效。
+
+## 组合式 API
+
+该功能的组合式 API 可以在 `.vuepress/client.ts` 中配置：
+
+```ts title=".vuepress/client.ts"
+import { defineClientConfig } from '@vuepress/client'
+import { useCopyCode } from '@vuepress/plugin-copy-code/client'
+
+export default defineClientConfig({
+  setup() {
+    useCopyCode({
+      // ...
+    })
+  },
+})
+```
+
+### 示例
+
+代码复制时，添加 copyright 信息
+
+```ts title=".vuepress/client.ts"
+import { defineClientConfig } from '@vuepress/client'
+import { useCopyCode } from '@vuepress/plugin-copy-code/client'
+
+export default defineClientConfig({
+  setup() {
+    useCopyCode({
+      transform: (preElement) => {
+        // 插入版权信息
+        pre.innerHTML += `\n Copied by vuepress-theme-plume`
+      },
+    })
+  },
+})
+```
diff --git a/docs/notes/theme/guide/features/copy-code.md b/docs/notes/theme/guide/features/copy-code.md
deleted file mode 100644
index ffe4d884..00000000
--- a/docs/notes/theme/guide/features/copy-code.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: 代码复制
-icon: ph:code
-createTime: 2024/03/04 09:59:29
-permalink: /guide/features/copy-code/
----
-
-## 使用
-
-主题默认启用了代码复制功能。支持 一键复制 在 文章中 展示的代码。
-
-默认情况下， 主题会为每一个 代码块 添加一个复制按钮。该按钮仅在桌面端显示。
-
-当鼠标悬停在 代码块 上时，在右上角会出现一个复制按钮。
-
-## 效果
-
-### 代码块
-
-```js
-const a = 1
-
-export default a
-```
-
-### 代码组
-
-::: code-tabs
-@tab foo.js
-
-```js
-const a = 1
-
-export default a
-```
-
-@tab bar.js
-
-```js
-const b = 1
-
-export default b
-```
-
-:::
diff --git a/docs/notes/theme/guide/quick-start/blog.md b/docs/notes/theme/guide/quick-start/blog.md
index 5bedf428..44819dd7 100644
--- a/docs/notes/theme/guide/quick-start/blog.md
+++ b/docs/notes/theme/guide/quick-start/blog.md
@@ -22,7 +22,10 @@ tags:
 
 主题默认启用 博客功能，通常您无需进行额外的配置。
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
 export default defineUserConfig({
   theme: plumeTheme({
     // 禁用博客功能
@@ -66,7 +69,10 @@ export default defineUserConfig({
 
 你可以通过 `profile` 属性来设置博主头像等相关信息。
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
 export default defineUserConfig({
   theme: plumeTheme({
     profile: {
@@ -277,7 +283,10 @@ coverStyle:
 虽然主题支持为每个文章的封面图使用不同的配置，出于整体布局风格的考虑，以及简化配置的目的，
 主题还支持为封面图预设配置：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
 export default defineUserConfig({
   theme: plumeTheme({
 
@@ -438,7 +447,7 @@ config:
 
 （还可以重新修改 分类页/标签页/归档页的链接地址）
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
diff --git a/docs/notes/theme/guide/quick-start/document.md b/docs/notes/theme/guide/quick-start/document.md
index c5dedc0f..abc48c70 100644
--- a/docs/notes/theme/guide/quick-start/document.md
+++ b/docs/notes/theme/guide/quick-start/document.md
@@ -38,7 +38,7 @@ tags:
 
 接下来，在配置文件中配置 `notes`：
 
-```js title=".vuepress/config.ts"
+```js title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 
@@ -91,7 +91,7 @@ export default defineUserConfig({
 
 @tab .vuepress/notes.ts
 
-```ts
+```ts twoslash
 import { defineNoteConfig, defineNotesConfig } from 'vuepress-theme-plume'
 
 /**
@@ -121,7 +121,11 @@ export default defineNotesConfig({
 
 @tab .vuepress/config.ts
 
-```ts
+```ts twoslash
+// @filename: ./notes.ts
+export default {}
+
+// ---cut---
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
 import notes from './notes' // [!code ++]
@@ -314,10 +318,7 @@ interface SidebarItem {
 
 当 传入类型为 `string` 时，表示 markdown 文件的路径：
 
-::: code-tabs
-@tab .vuepress/notes.ts
-
-```ts
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -334,14 +335,12 @@ const typescript = defineNoteConfig({
 // ... other code
 ```
 
-:::
-
 你也可以省略 `.md` 文件后缀，简写为 `/guide/intro` 。主题会解析 对应的文件，获取 **标题** 和 **页面链接地址**
 并将其转换为 `{ text: string, link: string }` 的数据形式。
 
 当传入类型为 `SidebarItem` 时:
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -359,7 +358,7 @@ const typescript = defineNoteConfig({
 
 也可以进行多层嵌套：
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts"  twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -393,7 +392,7 @@ const typescript = defineNoteConfig({
 
 需要注意的是，`items` 中的链接 仅有 相对路径的链接才会与 `prefix` 拼接，而绝对路径则不进行处理。
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -423,7 +422,7 @@ const typescript = defineNoteConfig({
 则会与 上一层的 `prefix` 拼接，再与 当前层级 `items` 内的 `link` 拼接，如果 `prefix` 是绝对路径，则不与
 上一层级 `prefix` 拼接。
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -465,7 +464,7 @@ const typescript = defineNoteConfig({
 为侧边栏添加 图标 有助于 侧边栏更好的呈现。得益于 [iconify](https://iconify.design/) 这个强大的开源图标库，
 你可以使用超过 `200k` 的图标，仅需要添加 `icon` 配置即可。
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -486,7 +485,7 @@ const typescript = defineNoteConfig({
 
 也可以使用本地图标，或者本地图片：
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
@@ -535,7 +534,7 @@ icon: ep:guide
 在组内对 项 进行分隔 是一个相对小众的需求，它在组的项比较多，但又不适合拆分为多个组，或者组内拆分多组的情况下，
 可能会比较适用，它提供了一个平级的，使用辅助文本颜色显示一个分隔项名 的方式，对项进行简单的分隔。
 
-```ts title=".vuepress/notes.ts"
+```ts title=".vuepress/notes.ts" twoslash
 import { defineNoteConfig } from 'vuepress-theme-plume'
 
 const typescript = defineNoteConfig({
diff --git a/docs/notes/theme/guide/quick-start/locales.md b/docs/notes/theme/guide/quick-start/locales.md
index 529ef8a0..2d66c2c0 100644
--- a/docs/notes/theme/guide/quick-start/locales.md
+++ b/docs/notes/theme/guide/quick-start/locales.md
@@ -42,7 +42,7 @@ tags:
 
 在 `.vuepress/config.ts` 中，声明默认的语言：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
@@ -65,7 +65,7 @@ export default defineUserConfig({
 
 在 `.vuepress/config.ts` 中配置：
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 
 export default defineUserConfig({
@@ -98,9 +98,9 @@ export default defineUserConfig({
 
 `locales` 支持 所有主题配置项。
 
-```ts title=".vuepress/config.ts"
-import { plumeTheme } from '@vuepress-plume/vuepress-theme-plume'
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
 
 export default defineUserConfig({
   lang: 'zh-CN',
diff --git a/docs/notes/theme/guide/quick-start/project-structure.md b/docs/notes/theme/guide/quick-start/project-structure.md
index 23e6aed0..3cd8c39e 100644
--- a/docs/notes/theme/guide/quick-start/project-structure.md
+++ b/docs/notes/theme/guide/quick-start/project-structure.md
@@ -94,7 +94,7 @@ export default defineClientConfig({
 
 为 VuePress 配置文件，你需要在这里进行一些必要的配置，比如 主题、插件、构建工具等。
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { viteBundler } from '@vuepress/bundler-vite'
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'
@@ -117,7 +117,17 @@ export default defineUserConfig({
 ::: code-tabs
 @tab .vuepress/plume.config.ts
 
-```ts
+```ts twoslash
+// @filename: ./navbar.ts
+export default []
+
+// @filename: ./notes.ts
+export default {
+  dir: '/notes/',
+  link: '/',
+  notes: [],
+}
+// ---cut---
 import { defineThemeConfig } from 'vuepress-theme-plume'
 import navbar from './navbar'
 import notes from './notes'
@@ -135,7 +145,7 @@ export default defineThemeConfig({
 
 @tab .vuepress/navbar.ts
 
-```ts
+```ts twoslash
 import { defineNavbarConfig } from 'vuepress-theme-plume'
 
 export default defineNavbarConfig([
@@ -145,11 +155,13 @@ export default defineNavbarConfig([
 
 @tab .vuepress/notes.ts
 
-```ts
+```ts twoslash
 import { defineNotesConfig } from 'vuepress-theme-plume'
 
 export default defineNotesConfig({
-  // ...
+  dir: '/notes/',
+  link: '/',
+  notes: [],
 })
 ```
 
diff --git a/docs/notes/theme/guide/quick-start/usage.md b/docs/notes/theme/guide/quick-start/usage.md
index 2049567c..14be08be 100644
--- a/docs/notes/theme/guide/quick-start/usage.md
+++ b/docs/notes/theme/guide/quick-start/usage.md
@@ -159,7 +159,7 @@ cd open-source # 进入 D: 分区下的 open-source 目录
 
 - ### 在 `docs/.vuepress/config.{js,ts}` 中配置主题
 
-  ``` ts title="docs/.vuepress/config.ts"
+  ``` ts title="docs/.vuepress/config.ts" twoslash
   import { viteBundler } from '@vuepress/bundler-vite'
   import { defineUserConfig } from 'vuepress'
   import { plumeTheme } from 'vuepress-theme-plume'
diff --git a/docs/notes/theme/guide/quick-start/write.md b/docs/notes/theme/guide/quick-start/write.md
index bde7ca6e..a4493aa6 100644
--- a/docs/notes/theme/guide/quick-start/write.md
+++ b/docs/notes/theme/guide/quick-start/write.md
@@ -86,7 +86,7 @@ __永久链接__ 指的是，文章发布后的 访问地址，这个地址一
 你可能不想主题做额外的自动生成，希望由自己完全掌控。这完全没问题，主题支持通过配置来控制 自动生成 frontmatter 的行为。
 通过 [主题配置 > autoFrontmatter](../../config/theme.md#autofrontmatter) 即可轻松做到。
 
-```ts title=".vuepress/config.ts"
+```ts title=".vuepress/config.ts" twoslash
 import { defineUserConfig } from 'vuepress'
 import { plumeTheme } from 'vuepress-theme-plume'