tiptap-extension-shiki 1.0.1 → 1.0.3

package/README.md

@@ -10,6 +10,8 @@ npm install shiki tiptap-extension-shiki
 
 ### Usage
 
+[DEMO](https://codesandbox.io/p/sandbox/tiptap-extension-shiki-demo-lgl8lw)
+
 ```typescript
 new Editor({
   content: "",

package/README_CN.md

@@ -10,6 +10,7 @@ npm install shiki tiptap-extension-shiki
 
 ### 使用方法
 
+[DEMO](https://codesandbox.io/p/sandbox/tiptap-extension-shiki-demo-lgl8lw)
 ```typescript
 new Editor({
   content: "",

package/dist/ShikiLightPlugin.d.ts

@@ -11,9 +11,10 @@ import type { BundledLanguage, BundledTheme, HighlighterGeneric, SpecialLanguage
  * @param defaultLanguage - 默认编程语言
  * @returns ProseMirror插件实例
  */
-export declare function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, }: {
+export declare function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, showLineNumbers, }: {
     name: string;
     highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
     defaultTheme: ThemeRegistrationAny | StringLiteralUnion<string>;
     defaultLanguage: StringLiteralUnion<SpecialLanguage>;
+    showLineNumbers?: boolean;
 }): Plugin<any>;

package/dist/index.cjs.css

@@ -1 +1 @@
-.tiptap-shiki--container{border-radius:.4rem;font-size:.875em;pre{max-height:400px;overflow:auto;padding:20px}}.tiptap-shiki--toolbar{align-items:center;display:flex;padding:10px}
+.tiptap-shiki--container{border-radius:.4rem;font-size:.875em}.tiptap-shiki--container pre{max-height:400px;overflow:auto;padding:1.25rem}.tiptap-shiki--container.show-line-numbers pre{padding-left:0}.tiptap-shiki--line-number{box-sizing:border-box;display:inline-block;padding-right:2em;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5em}.tiptap-shiki--toolbar{align-items:center;display:flex;padding:.75rem}

package/dist/index.cjs.js

@@ -18,15 +18,13 @@ var view = require('@tiptap/pm/view');
  * @param defaultLanguage - 默认编程语言
  * @returns 装饰器集合，用于渲染语法高亮
  */
-function getDecorations({ doc, name, highlighter, defaultTheme, defaultLanguage, }) {
-    console.log("doc", doc);
+function getDecorations({ doc, name, highlighter, defaultTheme, defaultLanguage, showLineNumbers, }) {
     // 查找文档中所有指定类型的节点（shiki代码块）
     const decorations = core.findChildren(doc, (node) => {
-        console.log("node node ", node);
         return node.type.name === name;
     }).reduce((acc, block) => {
         // 为每个代码块生成装饰
-        const nodeDecorations = getSingleNodeDecorations(block.node, block.pos, highlighter, defaultTheme, defaultLanguage);
+        const nodeDecorations = getSingleNodeDecorations(block.node, block.pos, highlighter, defaultTheme, defaultLanguage, showLineNumbers);
         return acc.concat(nodeDecorations);
     }, []);
     // 创建装饰器集合
@@ -43,7 +41,7 @@ function getDecorations({ doc, name, highlighter, defaultTheme, defaultLanguage,
  * @param defaultLanguage - 默认语言
  * @returns 该节点的所有装饰器数组
  */
-function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage) {
+function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage, showLineNumbers) {
     const decorations = [];
     // 获取代码块的语言和主题属性，如果没有则使用默认值
     const language = node.attrs.language || defaultLanguage;
@@ -56,7 +54,45 @@ function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultL
         theme: theme,
     });
     // 遍历每一行的token，为有颜色的token创建装饰
-    lines.forEach((line) => {
+    lines.forEach((line, index) => {
+        if (showLineNumbers) {
+            // === 新增：在每一行开头添加行号 Widget ===
+            decorations.push(view.Decoration.widget(startPos, () => {
+                // const lineNumber = index + 1;
+                const lineNumberElement = document.createElement("span");
+                lineNumberElement.className = "tiptap-shiki--line-number";
+                lineNumberElement.textContent = (index + 1).toString();
+                return lineNumberElement;
+            }, {
+                // 设置为负数（如 -1）表示该 Widget 倾向于“依附”在左侧。
+                // 当位置处于 0 长度的行首时，光标会落在 Widget 的右侧（即可以输入的位置）。
+                side: -1,
+                // 这能防止光标进入 Widget 内部，并阻止某些事件冒泡
+                stopEvent: () => true,
+                // 忽略选区
+                // 告诉 ProseMirror 在处理点击和选区时跳过这个元素
+                ignoreSelection: true,
+            }));
+        }
+        // const lineNumber = index + 1;
+        // decorations.push(
+        //   Decoration.widget(
+        //     startPos,
+        //     () => {
+        //       const dom = document.createElement("span");
+        //       dom.className = "shiki-line-number";
+        //       dom.innerText = `${lineNumber}`;
+        //       dom.style.userSelect = "none";
+        //       // 关键：设置不可选中，防止干扰复制粘贴
+        //       dom.setAttribute("unselectable", "on");
+        //       return dom;
+        //     },
+        //     {
+        //       side: -1, // 确保它在当前位置的最左侧
+        //       ignoreSelection: true,
+        //     }
+        //   )
+        // );
         line.forEach((token) => {
             const endPos = startPos + token.content.length;
             // 如果token有颜色信息，创建内联装饰器设置文本颜色
@@ -84,7 +120,7 @@ function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultL
  * @param defaultLanguage - 默认编程语言
  * @returns ProseMirror插件实例
  */
-function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, }) {
+function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, showLineNumbers, }) {
     const shikiLightPlugin = new state.Plugin({
         key: new state.PluginKey("shiki"),
         // 插件状态管理
@@ -100,6 +136,7 @@ function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, })
                     highlighter,
                     defaultTheme,
                     defaultLanguage,
+                    showLineNumbers,
                 });
             },
             /**
@@ -132,7 +169,7 @@ function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, })
                             newDecorationSet = newDecorationSet.remove(oldDecos);
                             if (node.type.name === name) {
                                 // 重新计算该节点的语法高亮装饰
-                                const newSpecs = getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage);
+                                const newSpecs = getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage, showLineNumbers);
                                 newDecorationSet = newDecorationSet.add(newState.doc, newSpecs);
                             }
                         });
@@ -259,6 +296,8 @@ const TiptapShiki = CodeBlock.extend({
      * @returns HTML 数组或元素
      */
     renderHTML({ node, HTMLAttributes }) {
+        var _a;
+        const extraRenderHTMLAttributes = (_a = this.options) === null || _a === void 0 ? void 0 : _a.extraRenderHTMLAttributes;
         // 如果启用了高亮 HTML 生成并且有高亮器实例
         if (this.options.getHighlighHTML && this.options.highlighter) {
             // 获取代码内容、编程语言和主题
@@ -273,8 +312,32 @@ const TiptapShiki = CodeBlock.extend({
             // 解析生成的 HTML 字符串并返回第一个元素
             const container = document.createElement("div");
             container.innerHTML = highlightedCode;
-            if (container.firstElementChild)
-                return container.firstElementChild;
+            if (container.firstElementChild) {
+                const rsDOM = container.firstElementChild;
+                Object.keys(HTMLAttributes).forEach((key) => {
+                    rsDOM.setAttribute(key, HTMLAttributes[key]);
+                });
+                if (extraRenderHTMLAttributes) {
+                    // 处理 classList
+                    if (extraRenderHTMLAttributes.classList)
+                        rsDOM.classList.add(...extraRenderHTMLAttributes.classList);
+                    // 处理 styles
+                    if (extraRenderHTMLAttributes.styles) {
+                        for (const key in extraRenderHTMLAttributes.styles) {
+                            if (extraRenderHTMLAttributes.styles.hasOwnProperty(key))
+                                rsDOM.style[key] = extraRenderHTMLAttributes.styles[key];
+                        }
+                    }
+                    // 处理 attrs
+                    if (extraRenderHTMLAttributes.attrs) {
+                        for (const key in extraRenderHTMLAttributes.attrs) {
+                            if (extraRenderHTMLAttributes.attrs.hasOwnProperty(key))
+                                rsDOM.setAttribute(key, extraRenderHTMLAttributes.attrs[key]);
+                        }
+                    }
+                }
+                return rsDOM;
+            }
         }
         // 返回标准的 pre/code 标签结构
         return ["pre", HTMLAttributes, ["code", 0]];
@@ -292,13 +355,20 @@ const TiptapShiki = CodeBlock.extend({
         if (!this.options.highlighter)
             throw new Error("highlighter is required");
         return (props) => {
+            var _a;
             // 获取视图相关参数
             const { view, getPos, node } = props;
             // 获取当前主题配置
             const theme = this.options.highlighter.getTheme(node.attrs.theme || this.options.defaultTheme);
             // 创建主容器 DOM 元素
             const dom = document.createElement("div");
-            dom.classList.add("tiptap-shiki--container", "not-prose", "shiki", "dracula");
+            dom.classList.add("tiptap-shiki--container", "shiki");
+            if (this.options.showLineNumbers) {
+                dom.classList.add("show-line-numbers");
+            }
+            if ((_a = this.options.extraRenderHTMLAttributes) === null || _a === void 0 ? void 0 : _a.classList) {
+                dom.classList.add(...this.options.extraRenderHTMLAttributes.classList);
+            }
             // 应用主题颜色
             dom.style.backgroundColor = theme.bg;
             dom.style.color = theme.fg;
@@ -402,6 +472,7 @@ const TiptapShiki = CodeBlock.extend({
                 highlighter: this.options.highlighter,
                 defaultLanguage: this.options.defaultLanguage,
                 defaultTheme: this.options.defaultTheme,
+                showLineNumbers: this.options.showLineNumbers,
             }),
         ];
     },

package/dist/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.css

@@ -1 +1 @@
-.tiptap-shiki--container{border-radius:.4rem;font-size:.875em;pre{max-height:400px;overflow:auto;padding:20px}}.tiptap-shiki--toolbar{align-items:center;display:flex;padding:10px}
+.tiptap-shiki--container{border-radius:.4rem;font-size:.875em}.tiptap-shiki--container pre{max-height:400px;overflow:auto;padding:1.25rem}.tiptap-shiki--container.show-line-numbers pre{padding-left:0}.tiptap-shiki--line-number{box-sizing:border-box;display:inline-block;padding-right:2em;text-align:right;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:5em}.tiptap-shiki--toolbar{align-items:center;display:flex;padding:.75rem}

package/dist/index.d.ts

@@ -25,6 +25,12 @@ declare const TiptapShiki: import("@tiptap/core").Node<{
     defaultLanguage: StringLiteralUnion<SpecialLanguage>;
     highlighter?: HighlighterGeneric<BundledLanguage, BundledTheme>;
     getHighlighHTML?: boolean;
+    extraRenderHTMLAttributes?: {
+        classList?: string[];
+        styles?: Record<string, string>;
+        attrs?: Record<string, string>;
+    };
+    showLineNumbers?: boolean;
     renderToolbar?: (props: {
         toolbarDOM: HTMLElement;
         language: StringLiteralUnion<SpecialLanguage>;

package/dist/index.js

@@ -14,15 +14,13 @@ import { DecorationSet, Decoration } from '@tiptap/pm/view';
  * @param defaultLanguage - 默认编程语言
  * @returns 装饰器集合，用于渲染语法高亮
  */
-function getDecorations({ doc, name, highlighter, defaultTheme, defaultLanguage, }) {
-    console.log("doc", doc);
+function getDecorations({ doc, name, highlighter, defaultTheme, defaultLanguage, showLineNumbers, }) {
     // 查找文档中所有指定类型的节点（shiki代码块）
     const decorations = findChildren(doc, (node) => {
-        console.log("node node ", node);
         return node.type.name === name;
     }).reduce((acc, block) => {
         // 为每个代码块生成装饰
-        const nodeDecorations = getSingleNodeDecorations(block.node, block.pos, highlighter, defaultTheme, defaultLanguage);
+        const nodeDecorations = getSingleNodeDecorations(block.node, block.pos, highlighter, defaultTheme, defaultLanguage, showLineNumbers);
         return acc.concat(nodeDecorations);
     }, []);
     // 创建装饰器集合
@@ -39,7 +37,7 @@ function getDecorations({ doc, name, highlighter, defaultTheme, defaultLanguage,
  * @param defaultLanguage - 默认语言
  * @returns 该节点的所有装饰器数组
  */
-function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage) {
+function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage, showLineNumbers) {
     const decorations = [];
     // 获取代码块的语言和主题属性，如果没有则使用默认值
     const language = node.attrs.language || defaultLanguage;
@@ -52,7 +50,45 @@ function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultL
         theme: theme,
     });
     // 遍历每一行的token，为有颜色的token创建装饰
-    lines.forEach((line) => {
+    lines.forEach((line, index) => {
+        if (showLineNumbers) {
+            // === 新增：在每一行开头添加行号 Widget ===
+            decorations.push(Decoration.widget(startPos, () => {
+                // const lineNumber = index + 1;
+                const lineNumberElement = document.createElement("span");
+                lineNumberElement.className = "tiptap-shiki--line-number";
+                lineNumberElement.textContent = (index + 1).toString();
+                return lineNumberElement;
+            }, {
+                // 设置为负数（如 -1）表示该 Widget 倾向于“依附”在左侧。
+                // 当位置处于 0 长度的行首时，光标会落在 Widget 的右侧（即可以输入的位置）。
+                side: -1,
+                // 这能防止光标进入 Widget 内部，并阻止某些事件冒泡
+                stopEvent: () => true,
+                // 忽略选区
+                // 告诉 ProseMirror 在处理点击和选区时跳过这个元素
+                ignoreSelection: true,
+            }));
+        }
+        // const lineNumber = index + 1;
+        // decorations.push(
+        //   Decoration.widget(
+        //     startPos,
+        //     () => {
+        //       const dom = document.createElement("span");
+        //       dom.className = "shiki-line-number";
+        //       dom.innerText = `${lineNumber}`;
+        //       dom.style.userSelect = "none";
+        //       // 关键：设置不可选中，防止干扰复制粘贴
+        //       dom.setAttribute("unselectable", "on");
+        //       return dom;
+        //     },
+        //     {
+        //       side: -1, // 确保它在当前位置的最左侧
+        //       ignoreSelection: true,
+        //     }
+        //   )
+        // );
         line.forEach((token) => {
             const endPos = startPos + token.content.length;
             // 如果token有颜色信息，创建内联装饰器设置文本颜色
@@ -80,7 +116,7 @@ function getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultL
  * @param defaultLanguage - 默认编程语言
  * @returns ProseMirror插件实例
  */
-function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, }) {
+function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, showLineNumbers, }) {
     const shikiLightPlugin = new Plugin({
         key: new PluginKey("shiki"),
         // 插件状态管理
@@ -96,6 +132,7 @@ function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, })
                     highlighter,
                     defaultTheme,
                     defaultLanguage,
+                    showLineNumbers,
                 });
             },
             /**
@@ -128,7 +165,7 @@ function ShikiLightPlugin({ name, highlighter, defaultTheme, defaultLanguage, })
                             newDecorationSet = newDecorationSet.remove(oldDecos);
                             if (node.type.name === name) {
                                 // 重新计算该节点的语法高亮装饰
-                                const newSpecs = getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage);
+                                const newSpecs = getSingleNodeDecorations(node, pos, highlighter, defaultTheme, defaultLanguage, showLineNumbers);
                                 newDecorationSet = newDecorationSet.add(newState.doc, newSpecs);
                             }
                         });
@@ -255,6 +292,8 @@ const TiptapShiki = CodeBlock.extend({
      * @returns HTML 数组或元素
      */
     renderHTML({ node, HTMLAttributes }) {
+        var _a;
+        const extraRenderHTMLAttributes = (_a = this.options) === null || _a === void 0 ? void 0 : _a.extraRenderHTMLAttributes;
         // 如果启用了高亮 HTML 生成并且有高亮器实例
         if (this.options.getHighlighHTML && this.options.highlighter) {
             // 获取代码内容、编程语言和主题
@@ -269,8 +308,32 @@ const TiptapShiki = CodeBlock.extend({
             // 解析生成的 HTML 字符串并返回第一个元素
             const container = document.createElement("div");
             container.innerHTML = highlightedCode;
-            if (container.firstElementChild)
-                return container.firstElementChild;
+            if (container.firstElementChild) {
+                const rsDOM = container.firstElementChild;
+                Object.keys(HTMLAttributes).forEach((key) => {
+                    rsDOM.setAttribute(key, HTMLAttributes[key]);
+                });
+                if (extraRenderHTMLAttributes) {
+                    // 处理 classList
+                    if (extraRenderHTMLAttributes.classList)
+                        rsDOM.classList.add(...extraRenderHTMLAttributes.classList);
+                    // 处理 styles
+                    if (extraRenderHTMLAttributes.styles) {
+                        for (const key in extraRenderHTMLAttributes.styles) {
+                            if (extraRenderHTMLAttributes.styles.hasOwnProperty(key))
+                                rsDOM.style[key] = extraRenderHTMLAttributes.styles[key];
+                        }
+                    }
+                    // 处理 attrs
+                    if (extraRenderHTMLAttributes.attrs) {
+                        for (const key in extraRenderHTMLAttributes.attrs) {
+                            if (extraRenderHTMLAttributes.attrs.hasOwnProperty(key))
+                                rsDOM.setAttribute(key, extraRenderHTMLAttributes.attrs[key]);
+                        }
+                    }
+                }
+                return rsDOM;
+            }
         }
         // 返回标准的 pre/code 标签结构
         return ["pre", HTMLAttributes, ["code", 0]];
@@ -288,13 +351,20 @@ const TiptapShiki = CodeBlock.extend({
         if (!this.options.highlighter)
             throw new Error("highlighter is required");
         return (props) => {
+            var _a;
             // 获取视图相关参数
             const { view, getPos, node } = props;
             // 获取当前主题配置
             const theme = this.options.highlighter.getTheme(node.attrs.theme || this.options.defaultTheme);
             // 创建主容器 DOM 元素
             const dom = document.createElement("div");
-            dom.classList.add("tiptap-shiki--container", "not-prose", "shiki", "dracula");
+            dom.classList.add("tiptap-shiki--container", "shiki");
+            if (this.options.showLineNumbers) {
+                dom.classList.add("show-line-numbers");
+            }
+            if ((_a = this.options.extraRenderHTMLAttributes) === null || _a === void 0 ? void 0 : _a.classList) {
+                dom.classList.add(...this.options.extraRenderHTMLAttributes.classList);
+            }
             // 应用主题颜色
             dom.style.backgroundColor = theme.bg;
             dom.style.color = theme.fg;
@@ -398,6 +468,7 @@ const TiptapShiki = CodeBlock.extend({
                 highlighter: this.options.highlighter,
                 defaultLanguage: this.options.defaultLanguage,
                 defaultTheme: this.options.defaultTheme,
+                showLineNumbers: this.options.showLineNumbers,
             }),
         ];
     },

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap-extension-shiki",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -39,6 +39,7 @@
   },
   "peerDependencies": {
     "@tiptap/core": "^2.3.0 || ^3.0.0",
+    "@tiptap/extension-code-block": "^2.3.0 || ^3.14.0",
     "@tiptap/pm": "^2.3.0 || ^3.0.0",
     "shiki": "^3.0.0"
   }

package/rollup.config.js

@@ -8,6 +8,7 @@ const typescript = require("rollup-plugin-typescript2");
 const postcss = require("rollup-plugin-postcss");
 const cssnano = require("cssnano");
 const autoprefixer = require("autoprefixer");
+const pkg = require("./package.json");
 
 const config = {
   input: "src/index.ts",
@@ -26,7 +27,7 @@ const config = {
     },
   ],
   plugins: [
-    autoExternal({ 
+    autoExternal({
       packagePath: "./package.json",
     }),
     postcss({
@@ -65,6 +66,8 @@ const config = {
     "@tiptap/extension-code-block",
     // Shiki依赖
     "shiki",
+    ...Object.keys(pkg.devDependencies || {}),
+    ...Object.keys(pkg.dependencies || {}),
   ],
 };
 

package/src/ShikiLightPlugin.ts

@@ -28,18 +28,17 @@ function getDecorations({
   highlighter,
   defaultTheme,
   defaultLanguage,
+  showLineNumbers,
 }: {
   doc: ProsemirrorNode;
   name: string;
   highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
   defaultTheme: ThemeRegistrationAny | StringLiteralUnion<string>;
   defaultLanguage: StringLiteralUnion<SpecialLanguage>;
+  showLineNumbers?: boolean;
 }) {
-  console.log("doc", doc);
-
   // 查找文档中所有指定类型的节点（shiki代码块）
   const decorations = findChildren(doc, (node) => {
-    console.log("node node ", node);
     return node.type.name === name;
   }).reduce((acc, block) => {
     // 为每个代码块生成装饰
@@ -48,7 +47,8 @@ function getDecorations({
       block.pos,
       highlighter,
       defaultTheme,
-      defaultLanguage
+      defaultLanguage,
+      showLineNumbers
     );
     return acc.concat(nodeDecorations);
   }, [] as Decoration[]);
@@ -73,7 +73,8 @@ function getSingleNodeDecorations(
   pos: number,
   highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>,
   defaultTheme: ThemeRegistrationAny | StringLiteralUnion<string>,
-  defaultLanguage: StringLiteralUnion<SpecialLanguage>
+  defaultLanguage: StringLiteralUnion<SpecialLanguage>,
+  showLineNumbers?: boolean
 ) {
   const decorations: Decoration[] = [];
 
@@ -91,7 +92,52 @@ function getSingleNodeDecorations(
   });
 
   // 遍历每一行的token，为有颜色的token创建装饰
-  lines.forEach((line) => {
+  lines.forEach((line, index) => {
+    if (showLineNumbers) {
+      // === 新增：在每一行开头添加行号 Widget ===
+      decorations.push(
+        Decoration.widget(
+          startPos,
+          () => {
+            // const lineNumber = index + 1;
+            const lineNumberElement = document.createElement("span");
+            lineNumberElement.className = "tiptap-shiki--line-number";
+            lineNumberElement.textContent = (index + 1).toString();
+            return lineNumberElement;
+          },
+          {
+            // 设置为负数（如 -1）表示该 Widget 倾向于“依附”在左侧。
+            // 当位置处于 0 长度的行首时，光标会落在 Widget 的右侧（即可以输入的位置）。
+            side: -1,
+            // 这能防止光标进入 Widget 内部，并阻止某些事件冒泡
+            stopEvent: () => true,
+            // 忽略选区
+            // 告诉 ProseMirror 在处理点击和选区时跳过这个元素
+            ignoreSelection: true,
+          }
+        )
+      );
+    }
+
+    // const lineNumber = index + 1;
+    // decorations.push(
+    //   Decoration.widget(
+    //     startPos,
+    //     () => {
+    //       const dom = document.createElement("span");
+    //       dom.className = "shiki-line-number";
+    //       dom.innerText = `${lineNumber}`;
+    //       dom.style.userSelect = "none";
+    //       // 关键：设置不可选中，防止干扰复制粘贴
+    //       dom.setAttribute("unselectable", "on");
+    //       return dom;
+    //     },
+    //     {
+    //       side: -1, // 确保它在当前位置的最左侧
+    //       ignoreSelection: true,
+    //     }
+    //   )
+    // );
     line.forEach((token) => {
       const endPos = startPos + token.content.length;
 
@@ -131,11 +177,13 @@ export function ShikiLightPlugin({
   highlighter,
   defaultTheme,
   defaultLanguage,
+  showLineNumbers,
 }: {
   name: string;
   highlighter: HighlighterGeneric<BundledLanguage, BundledTheme>;
   defaultTheme: ThemeRegistrationAny | StringLiteralUnion<string>;
   defaultLanguage: StringLiteralUnion<SpecialLanguage>;
+  showLineNumbers?: boolean;
 }) {
   const shikiLightPlugin: Plugin = new Plugin({
     key: new PluginKey("shiki"),
@@ -153,6 +201,7 @@ export function ShikiLightPlugin({
           highlighter,
           defaultTheme,
           defaultLanguage,
+          showLineNumbers,
         });
       },
 
@@ -197,7 +246,8 @@ export function ShikiLightPlugin({
                   pos,
                   highlighter,
                   defaultTheme,
-                  defaultLanguage
+                  defaultLanguage,
+                  showLineNumbers
                 );
                 newDecorationSet = newDecorationSet.add(newState.doc, newSpecs);
               }

package/src/index.css

@@ -11,31 +11,43 @@
 .tiptap-shiki--container {
   /* 设置圆角边框 */
   border-radius: 0.4rem;
-  
+
   /* 设置相对较小的字体大小 */
   font-size: 0.875em;
+}
+
+.tiptap-shiki--container pre {
+  /* 设置内边距，提供舒适的代码阅读空间 */
+  padding: 1.25rem;
+
+  /* 设置最大高度，超出时显示滚动条 */
+  max-height: 400px;
+
+  /* 设置溢出内容为自动滚动 */
+  overflow: auto;
+}
+
+.tiptap-shiki--container.show-line-numbers pre {
+  padding-left: 0;
+}
 
-  /* 嵌套样式：代码内容区域 */
-  pre {
-    /* 设置内边距，提供舒适的代码阅读空间 */
-    padding: 20px;
-    
-    /* 设置最大高度，超出时显示滚动条 */
-    max-height: 400px;
-    
-    /* 设置溢出内容为自动滚动 */
-    overflow: auto;
-  }
+.tiptap-shiki--line-number {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 5em;
+  padding-right: 2em;
+  text-align: right;
+  user-select: none;
 }
 
 /* 工具栏样式 */
 .tiptap-shiki--toolbar {
   /* 使用弹性布局排列工具栏元素 */
   display: flex;
-  
+
   /* 垂直居中对齐工具栏内容 */
   align-items: center;
-  
+
   /* 设置工具栏内边距 */
-  padding: 10px;
+  padding: 0.75rem;
 }

package/src/index.ts

@@ -1,6 +1,6 @@
 /**
  * Tiptap Shiki 语法高亮扩展
- * 
+ *
  * 本文件实现了一个基于 Shiki 的 Tiptap 扩展，用于在富文本编辑器中提供语法高亮功能。
  * 该扩展扩展了 Tiptap 的 CodeBlock，添加了以下功能：
  * - 支持多种编程语言的语法高亮
@@ -30,10 +30,10 @@ import { ShikiLightPlugin } from "./ShikiLightPlugin.js";
 
 /**
  * TiptapShiki 扩展类定义
- * 
+ *
  * 该类扩展了 Tiptap 的 CodeBlock，添加了语法高亮功能和相关配置选项。
  * 使用泛型类型定义扩展选项和节点视图属性。
- * 
+ *
  * @template T - 扩展选项类型，包含默认主题、语言、高亮器等配置
  * @template U - 节点视图属性类型，定义 DOM 元素的类型
  */
@@ -47,6 +47,14 @@ const TiptapShiki = CodeBlock.extend<
     highlighter?: HighlighterGeneric<BundledLanguage, BundledTheme>;
     // 是否获取高亮的 HTML 字符串
     getHighlighHTML?: boolean;
+    // 额外渲染HTML属性
+    extraRenderHTMLAttributes?: {
+      classList?: string[];
+      styles?: Record<string, string>;
+      attrs?: Record<string, string>;
+    };
+    // 显示行号
+    showLineNumbers?: boolean;
     // 自定义工具栏渲染函数
     renderToolbar?: (props: {
       toolbarDOM: HTMLElement;
@@ -56,285 +64,319 @@ const TiptapShiki = CodeBlock.extend<
       setTheme: (theme: string) => void;
     }) => void;
   },
-  { 
+  {
     // 节点视图中的 DOM 元素类型定义
-    container: HTMLElement; 
-    shikiCode: HTMLElement; 
-    contentDOM: HTMLElement 
+    container: HTMLElement;
+    shikiCode: HTMLElement;
+    contentDOM: HTMLElement;
   }
 >({
-    // 扩展名称，用于标识这个自定义扩展
-    name: "tiptapShiki",
-    
-    /**
-     * 添加扩展配置选项
-     * 
-     * 定义了 Shiki 语法高亮的默认配置，包括默认主题、编程语言等。
-     * 使用父类的配置选项并添加本扩展特有的选项。
-     * 
-     * @returns 配置对象，包含默认主题、语言和高亮器设置
-     */
-    addOptions() {
-      return {
-        // 继承父类的配置选项
-        ...this.parent?.(),
-        // 默认语法高亮主题
-        defaultTheme: "dracula",
-        // 默认编程语言
-        defaultLanguage: "javascript",
-        // 初始化时的高亮器实例（可选）
-        highlighter: undefined,
-      };
-    },
-     /**
-      * 添加节点属性
-      * 
-      * 定义了代码块节点的自定义属性，包括编程语言和主题。
-      * 这些属性用于存储和渲染代码块的语法高亮配置。
-      * 
-      * @returns 属性配置对象，包含语言和主题属性
-      */
-     addAttributes() {
-       return {
-         // 继承父类的属性
-         ...this.parent?.(),
-         
-         // 编程语言属性
-         language: {
-           // 默认语言配置
-           default: this.options.defaultLanguage || "javascript",
-           
-           /**
-            * 从 HTML 元素解析语言属性
-            * @param element - HTML 元素
-            * @returns 编程语言字符串
-            */
-           parseHTML: (element) => {
-             // 从 data-language 属性获取语言信息
-             return element.getAttribute("data-language");
-           },
-           
-           /**
-            * 渲染 HTML 时设置语言属性
-            * @param attributes - 节点属性对象
-            * @returns HTML 属性对象
-            */
-           renderHTML: (attributes) => {
-             // 将语言信息存储在 data-language 属性中
-             return { "data-language": attributes.language };
-           },
-         },
-         
-         // 主题属性
-         theme: {
-           // 默认主题配置
-           default: this.options.defaultTheme || "dracula",
-           
-           /**
-            * 从 HTML 元素解析主题属性
-            * @param element - HTML 元素
-            * @returns 主题名称字符串
-            */
-           parseHTML: (element) => element.getAttribute("data-theme"),
-           
-           /**
-            * 渲染 HTML 时设置主题属性
-            * @param attributes - 节点属性对象
-            * @returns HTML 属性对象
-            */
-           renderHTML: (attributes) => ({
-             "data-theme": attributes.theme,
-           }),
-         },
-       };
-     },
-
-      /**
-       * 渲染 HTML
-       * 
-       * 定义了代码块节点在静态 HTML 中的渲染逻辑。
-       * 如果配置了 getHighlighHTML 和 highlighter，将使用 Shiki 生成高亮的 HTML；
-       * 否则返回标准的 pre/code 标签结构。
-       * 
-       * @param node - ProseMirror 节点对象
-       * @param HTMLAttributes - HTML 属性对象
-       * @returns HTML 数组或元素
-       */
-      renderHTML({ node, HTMLAttributes }) {
-        // 如果启用了高亮 HTML 生成并且有高亮器实例
-        if (this.options.getHighlighHTML && this.options.highlighter) {
-          // 获取代码内容、编程语言和主题
-          const language = node.attrs.language || this.options.defaultLanguage;
-          const theme = node.attrs.theme || this.options.defaultTheme;
-          const content = node.textContent;
-  
-          // 使用 Shiki 将代码转换为带样式的 HTML
-          const highlightedCode = this.options.highlighter.codeToHtml(content, {
-            lang: language,
-            theme: theme,
-          });
-          
-          // 解析生成的 HTML 字符串并返回第一个元素
-          const container = document.createElement("div");
-          container.innerHTML = highlightedCode;
-          if (container.firstElementChild) return container.firstElementChild;
-        }
-  
-        // 返回标准的 pre/code 标签结构
-        return ["pre", HTMLAttributes, ["code", 0]];
+  // 扩展名称，用于标识这个自定义扩展
+  name: "tiptapShiki",
+
+  /**
+   * 添加扩展配置选项
+   *
+   * 定义了 Shiki 语法高亮的默认配置，包括默认主题、编程语言等。
+   * 使用父类的配置选项并添加本扩展特有的选项。
+   *
+   * @returns 配置对象，包含默认主题、语言和高亮器设置
+   */
+  addOptions() {
+    return {
+      // 继承父类的配置选项
+      ...this.parent?.(),
+      // 默认语法高亮主题
+      defaultTheme: "dracula",
+      // 默认编程语言
+      defaultLanguage: "javascript",
+      // 初始化时的高亮器实例（可选）
+      highlighter: undefined,
+    };
+  },
+  /**
+   * 添加节点属性
+   *
+   * 定义了代码块节点的自定义属性，包括编程语言和主题。
+   * 这些属性用于存储和渲染代码块的语法高亮配置。
+   *
+   * @returns 属性配置对象，包含语言和主题属性
+   */
+  addAttributes() {
+    return {
+      // 继承父类的属性
+      ...this.parent?.(),
+
+      // 编程语言属性
+      language: {
+        // 默认语言配置
+        default: this.options.defaultLanguage || "javascript",
+
+        /**
+         * 从 HTML 元素解析语言属性
+         * @param element - HTML 元素
+         * @returns 编程语言字符串
+         */
+        parseHTML: (element) => {
+          // 从 data-language 属性获取语言信息
+          return element.getAttribute("data-language");
+        },
+
+        /**
+         * 渲染 HTML 时设置语言属性
+         * @param attributes - 节点属性对象
+         * @returns HTML 属性对象
+         */
+        renderHTML: (attributes) => {
+          // 将语言信息存储在 data-language 属性中
+          return { "data-language": attributes.language };
+        },
       },
 
-       /**
-        * 添加节点视图
-        * 
-        * 创建代码块的交互式 DOM 视图，包括工具栏和代码显示区域。
-        * 提供了实时的语法高亮和主题切换功能。
-        * 
-        * @returns 节点视图工厂函数
-        */
-       addNodeView() {
-         // 检查是否有高亮器实例
-         if (!this.options.highlighter) throw new Error("highlighter is required");
-         
-         return (props) => {
-           // 获取视图相关参数
-           const { view, getPos, node } = props;
-   
-           // 获取当前主题配置
-           const theme = this.options.highlighter.getTheme(
-             node.attrs.theme || this.options.defaultTheme
-           );
-   
-           // 创建主容器 DOM 元素
-           const dom = document.createElement("div");
-           dom.classList.add(
-             "tiptap-shiki--container",
-             "not-prose",
-             "shiki",
-             "dracula"
-           );
-           // 应用主题颜色
-           dom.style.backgroundColor = theme.bg;
-           dom.style.color = theme.fg;
-   
-           // 创建工具栏（如果配置了自定义渲染器）
-           let toolbarDOM: HTMLElement | undefined;
-           if (
-             this.options.renderToolbar &&
-             typeof this.options.renderToolbar === "function"
-           ) {
-             // 创建工具栏容器
-             toolbarDOM = document.createElement("div");
-             toolbarDOM.classList.add("tiptap-shiki--toolbar");
-             toolbarDOM.setAttribute("contenteditable", "false");
-             
-             // 创建节点标记更新函数
-             const setNodeMarkup = (attr: Record<string, string>) => {
-               if (typeof getPos !== "function") return;
-               const pos = getPos();
-               if (pos === undefined) return;
-               const { tr } = view.state;
-               const nowNode = view.state.doc.nodeAt(pos);
-   
-               // 更新节点属性
-               tr.setNodeMarkup(pos, this.type, { ...nowNode?.attrs, ...attr });
-               view.dispatch(tr);
-             };
-   
-             // 创建语言设置函数
-             const setLanguage = (language: string) => {
-               setNodeMarkup({
-                 language, // 仅修改当前代码块的编程语言
-               });
-             };
-   
-             // 创建主题设置函数
-             const setTheme = (theme: string) => {
-               setNodeMarkup({
-                 theme, // 仅修改当前代码块的主题
-               });
-             };
-   
-             // 调用自定义工具栏渲染器
-             this.options.renderToolbar({
-               language: node.attrs.language,
-               theme: node.attrs.theme,
-               toolbarDOM,
-               setLanguage,
-               setTheme,
-             });
-   
-             // 将工具栏添加到主容器
-             dom.appendChild(toolbarDOM);
-           }
-   
-           // 创建代码显示区域
-           const preDOM = document.createElement("pre");
-           const contentDOM = document.createElement("code");
-           contentDOM.classList.add("tiptap-shiki--content");
-   
-           // 组装 DOM 结构
-           preDOM.appendChild(contentDOM);
-           dom.appendChild(preDOM);
-   
-           // 返回节点视图对象
-           return {
-             // 主 DOM 元素
-             dom: dom,
-             // 内容 DOM 元素
-             contentDOM,
-             
-             /**
-              * 更新节点视图
-              * @param updatedNode - 更新后的节点
-              * @returns 是否成功更新
-              */
-             update: (updatedNode) => {
-               // 如果不是相同类型的节点，拒绝更新
-               return updatedNode.type === node.type;
-             },
-             
-             /**
-              * 忽略某些 DOM 变化
-              * @param mutation - DOM 变化对象
-              * @returns 是否忽略该变化
-              */
-             ignoreMutation: (mutation) => {
-               // 忽略工具栏区域的 DOM 变化
-               return toolbarDOM?.contains(mutation.target) || false;
-             },
-           };
-         };
-       },
+      // 主题属性
+      theme: {
+        // 默认主题配置
+        default: this.options.defaultTheme || "dracula",
+
+        /**
+         * 从 HTML 元素解析主题属性
+         * @param element - HTML 元素
+         * @returns 主题名称字符串
+         */
+        parseHTML: (element) => element.getAttribute("data-theme"),
+
+        /**
+         * 渲染 HTML 时设置主题属性
+         * @param attributes - 节点属性对象
+         * @returns HTML 属性对象
+         */
+        renderHTML: (attributes) => ({
+          "data-theme": attributes.theme,
+        }),
+      },
+    };
+  },
+
+  /**
+   * 渲染 HTML
+   *
+   * 定义了代码块节点在静态 HTML 中的渲染逻辑。
+   * 如果配置了 getHighlighHTML 和 highlighter，将使用 Shiki 生成高亮的 HTML；
+   * 否则返回标准的 pre/code 标签结构。
+   *
+   * @param node - ProseMirror 节点对象
+   * @param HTMLAttributes - HTML 属性对象
+   * @returns HTML 数组或元素
+   */
+  renderHTML({ node, HTMLAttributes }) {
+    const extraRenderHTMLAttributes = this.options?.extraRenderHTMLAttributes;
+    // 如果启用了高亮 HTML 生成并且有高亮器实例
+    if (this.options.getHighlighHTML && this.options.highlighter) {
+      // 获取代码内容、编程语言和主题
+      const language = node.attrs.language || this.options.defaultLanguage;
+      const theme = node.attrs.theme || this.options.defaultTheme;
+      const content = node.textContent;
+
+      // 使用 Shiki 将代码转换为带样式的 HTML
+      const highlightedCode = this.options.highlighter.codeToHtml(content, {
+        lang: language,
+        theme: theme,
+      });
+
+      // 解析生成的 HTML 字符串并返回第一个元素
+      const container = document.createElement("div");
+      container.innerHTML = highlightedCode;
+      if (container.firstElementChild) {
+        const rsDOM = container.firstElementChild as HTMLElement;
+        Object.keys(HTMLAttributes).forEach((key) => {
+          rsDOM.setAttribute(key, HTMLAttributes[key]);
+        });
+
+        if (extraRenderHTMLAttributes) {
+          // 处理 classList
+          if (extraRenderHTMLAttributes.classList)
+            rsDOM.classList.add(...extraRenderHTMLAttributes.classList);
+
+          // 处理 styles
+          if (extraRenderHTMLAttributes.styles) {
+            for (const key in extraRenderHTMLAttributes.styles) {
+              if (extraRenderHTMLAttributes.styles.hasOwnProperty(key))
+                rsDOM.style[key] = extraRenderHTMLAttributes.styles[key];
+            }
+          }
+
+          // 处理 attrs
+          if (extraRenderHTMLAttributes.attrs) {
+            for (const key in extraRenderHTMLAttributes.attrs) {
+              if (extraRenderHTMLAttributes.attrs.hasOwnProperty(key))
+                rsDOM.setAttribute(key, extraRenderHTMLAttributes.attrs[key]);
+            }
+          }
+        }
+        return rsDOM;
+      }
+    }
+
+    // 返回标准的 pre/code 标签结构
+    return ["pre", HTMLAttributes, ["code", 0]];
+  },
+
+  /**
+   * 添加节点视图
+   *
+   * 创建代码块的交互式 DOM 视图，包括工具栏和代码显示区域。
+   * 提供了实时的语法高亮和主题切换功能。
+   *
+   * @returns 节点视图工厂函数
+   */
+  addNodeView() {
+    // 检查是否有高亮器实例
+    if (!this.options.highlighter) throw new Error("highlighter is required");
+
+    return (props) => {
+      // 获取视图相关参数
+      const { view, getPos, node } = props;
+
+      // 获取当前主题配置
+      const theme = this.options.highlighter.getTheme(
+        node.attrs.theme || this.options.defaultTheme
+      );
+
+      // 创建主容器 DOM 元素
+      const dom = document.createElement("div");
+      dom.classList.add("tiptap-shiki--container", "shiki");
+
+      if (this.options.showLineNumbers) {
+        dom.classList.add("show-line-numbers");
+      }
+
+      if (this.options.extraRenderHTMLAttributes?.classList) {
+        dom.classList.add(...this.options.extraRenderHTMLAttributes.classList);
+      }
+
+      // 应用主题颜色
+      dom.style.backgroundColor = theme.bg;
+      dom.style.color = theme.fg;
+
+      // 创建工具栏（如果配置了自定义渲染器）
+      let toolbarDOM: HTMLElement | undefined;
+      if (
+        this.options.renderToolbar &&
+        typeof this.options.renderToolbar === "function"
+      ) {
+        // 创建工具栏容器
+        toolbarDOM = document.createElement("div");
+        toolbarDOM.classList.add("tiptap-shiki--toolbar");
+        toolbarDOM.setAttribute("contenteditable", "false");
+
+        // 创建节点标记更新函数
+        const setNodeMarkup = (attr: Record<string, string>) => {
+          if (typeof getPos !== "function") return;
+          const pos = getPos();
+          if (pos === undefined) return;
+          const { tr } = view.state;
+          const nowNode = view.state.doc.nodeAt(pos);
+
+          // 更新节点属性
+          tr.setNodeMarkup(pos, this.type, { ...nowNode?.attrs, ...attr });
+          view.dispatch(tr);
+        };
+
+        // 创建语言设置函数
+        const setLanguage = (language: string) => {
+          setNodeMarkup({
+            language, // 仅修改当前代码块的编程语言
+          });
+        };
+
+        // 创建主题设置函数
+        const setTheme = (theme: string) => {
+          setNodeMarkup({
+            theme, // 仅修改当前代码块的主题
+          });
+        };
+
+        // 调用自定义工具栏渲染器
+        this.options.renderToolbar({
+          language: node.attrs.language,
+          theme: node.attrs.theme,
+          toolbarDOM,
+          setLanguage,
+          setTheme,
+        });
+
+        // 将工具栏添加到主容器
+        dom.appendChild(toolbarDOM);
+      }
+
+      // 创建代码显示区域
+      const preDOM = document.createElement("pre");
+      const contentDOM = document.createElement("code");
+      contentDOM.classList.add("tiptap-shiki--content");
+
+      // 组装 DOM 结构
+      preDOM.appendChild(contentDOM);
+      dom.appendChild(preDOM);
+
+      // 返回节点视图对象
+      return {
+        // 主 DOM 元素
+        dom: dom,
+        // 内容 DOM 元素
+        contentDOM,
+
+        /**
+         * 更新节点视图
+         * @param updatedNode - 更新后的节点
+         * @returns 是否成功更新
+         */
+        update: (updatedNode) => {
+          // 如果不是相同类型的节点，拒绝更新
+          return updatedNode.type === node.type;
+        },
 
         /**
-         * 添加 ProseMirror 插件
-         * 
-         * 注册 Shiki 轻量级语法高亮插件，实现实时语法高亮功能。
-         * 继承父类的插件并添加自定义的高亮插件。
-         * 
-         * @returns ProseMirror 插件数组
+         * 忽略某些 DOM 变化
+         * @param mutation - DOM 变化对象
+         * @returns 是否忽略该变化
          */
-        addProseMirrorPlugins() {
-          // 检查是否有高亮器实例
-          if (!this.options.highlighter) throw new Error("highlighter is required");
-          
-          return [
-            // 继承父类的插件
-            ...(this.parent?.() || []),
-            // 添加 Shiki 轻量级高亮插件
-            ShikiLightPlugin({
-              name: this.name,
-              highlighter: this.options.highlighter,
-              defaultLanguage: this.options.defaultLanguage,
-              defaultTheme: this.options.defaultTheme,
-            }),
-          ];
+        ignoreMutation: (mutation) => {
+          // 忽略工具栏区域的 DOM 变化
+          return toolbarDOM?.contains(mutation.target) || false;
         },
-   });
-   
-   // 导出命名导出
-   export { TiptapShiki };
-   
-   // 导出默认导出
-   export default TiptapShiki;
+      };
+    };
+  },
+
+  /**
+   * 添加 ProseMirror 插件
+   *
+   * 注册 Shiki 轻量级语法高亮插件，实现实时语法高亮功能。
+   * 继承父类的插件并添加自定义的高亮插件。
+   *
+   * @returns ProseMirror 插件数组
+   */
+  addProseMirrorPlugins() {
+    // 检查是否有高亮器实例
+    if (!this.options.highlighter) throw new Error("highlighter is required");
+
+    return [
+      // 继承父类的插件
+      ...(this.parent?.() || []),
+      // 添加 Shiki 轻量级高亮插件
+      ShikiLightPlugin({
+        name: this.name,
+        highlighter: this.options.highlighter,
+        defaultLanguage: this.options.defaultLanguage,
+        defaultTheme: this.options.defaultTheme,
+        showLineNumbers: this.options.showLineNumbers,
+      }),
+    ];
+  },
+});
+
+// 导出命名导出
+export { TiptapShiki };
+
+// 导出默认导出
+export default TiptapShiki;