@codady/coax 0.0.3 → 0.0.5

package/dist/coax.umd.js

@@ -1,10 +1,10 @@
 
 /*!
- * @since Last modified: 2026-1-12 9:47:5
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.3
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
- * @description Coax is a custom web component that enables syntax highlighting for various programming languages inside your HTML documents.
+ * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
  * @see {@link https://github.com/codady/coax/issues|github issues}
  * @see {@link https://gitee.com/codady/coax/issues|Gitee issues}
@@ -22,6 +22,170 @@
 
     const NAMESPACE = 'ax';
 
+    const html = [
+        { token: 'comment', pattern: /&lt;!--[\s\S]*?--&gt;/, light: '#999999', dark: '#6e7681' },
+        { token: 'doctype', pattern: /&lt;!DOCTYPE[\s\S]*?&gt;/i, light: '#6a737d', dark: '#8b949e' },
+        // 匹配标签名: <div, </div
+        { token: 'tag', pattern: /&lt;\/?[a-zA-Z0-9]+/, light: '#22863a', dark: '#7ee787' },
+        // 匹配属性名: class=
+        { token: 'attr', pattern: /[a-zA-Z-]+(?=\s*=\s*)/, light: '#6f42c1', dark: '#d2a8ff' },
+        // 匹配属性值: "value"
+        { token: 'string', pattern: /(['"])(?:\\.|[^\\])*?\1/, light: '#032f62', dark: '#a5d6ff' },
+        // 匹配标签闭合: >, />
+        { token: 'bracket', pattern: /\/?&gt;/, light: '#24292e', dark: '#c9d1d9' }
+    ];
+
+    const javascript = [
+        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, light: '#6a737d', dark: '#8b949e' },
+        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, light: '#032f62', dark: '#98c379' },
+        { token: 'keyword', pattern: /\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/, light: '#d73a49', dark: '#ff7b72' },
+        { token: 'builtin', pattern: /\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/, light: '#e36209', dark: '#ffa657' },
+        { token: 'number', pattern: /\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/, light: '#005cc5', dark: '#79c0ff' },
+        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, light: '#6f42c1', dark: '#d2a8ff' },
+        { token: 'op', pattern: /[+\-*/%=<>!&|^~]+/, light: '#069598', dark: '#56b6c2' }
+    ];
+
+    const markdown = [
+        // 注释: 这是 Markdown 中的行内注释
+        { token: 'comment', pattern: /<!--[\s\S]*?-->/, light: '#6a737d', dark: '#8b949e' },
+        // 标题: 通过 `#` 来定义标题
+        { token: 'heading', pattern: /(^|\n)(#{1,6})\s*(.+)/, light: '#e36209', dark: '#ffa657' },
+        // 粗体: **text** 或 __text__
+        { token: 'bold', pattern: /\*\*([^*]+)\*\*|__([^_]+)__/g, light: '#d73a49', dark: '#ff7b72' },
+        // 斜体: *text* 或 _text_
+        { token: 'italic', pattern: /\*([^*]+)\*|_([^_]+)_/g, light: '#032f62', dark: '#a5d6ff' },
+        // 链接: [text](url)
+        { token: 'link', pattern: /\[([^\]]+)\]\(([^)]+)\)/g, light: '#0288d1', dark: '#80c0ff' },
+        // 行内代码: `code`
+        { token: 'inline-code', pattern: /`([^`]+)`/g, light: '#032f62', dark: '#98c379' },
+        // 代码块: ```code```
+        { token: 'code-block', pattern: /```([^\n]+)\n([\s\S]*?)```/g, light: '#24292e', dark: '#c9d1d9' },
+        // 列表项: - item 或 * item
+        { token: 'list-item', pattern: /(^|\n)([-*])\s+(.+)/g, light: '#5c6e7c', dark: '#8b949e' },
+        // 引用: > text
+        { token: 'quote', pattern: /(^|\n)>[ \t]*(.+)/g, light: '#6f42c1', dark: '#d2a8ff' },
+        // 图片: ![alt](url)
+        { token: 'image', pattern: /!\[([^\]]+)\]\(([^)]+)\)/g, light: '#d73a49', dark: '#ff7b72' },
+        // 分割线: ---
+        { token: 'hr', pattern: /^(---|___|\*\*\*)\s*$/gm, light: '#24292e', dark: '#c9d1d9' },
+        // 强调和删除: ~~text~~
+        { token: 'strikethrough', pattern: /~~([^~]+)~~/g, light: '#e36209', dark: '#ffa657' },
+        // 表格: | header1 | header2 |
+        { token: 'table', pattern: /\|([^\|]+)\|([^\|]+)\|/g, light: '#5c6e7c', dark: '#8b949e' }
+    ];
+
+    const typescript = [
+        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, light: '#6a737d', dark: '#8b949e' },
+        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, light: '#032f62', dark: '#98c379' },
+        { token: 'decorator', pattern: /@[a-zA-Z_]\w*/, light: '#953800', dark: '#ffa657' },
+        { token: 'keyword', pattern: /\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/, light: '#d73a49', dark: '#ff7b72' },
+        { token: 'builtin', pattern: /\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/, light: '#e36209', dark: '#ffa657' },
+        { token: 'type', pattern: /\b[A-Z]\w*\b/, light: '#005cc5', dark: '#79c0ff' },
+        { token: 'number', pattern: /\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/, light: '#005cc5', dark: '#79c0ff' },
+        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, light: '#6f42c1', dark: '#d2a8ff' },
+        { token: 'op', pattern: /(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/, light: '#089ba6', dark: '#79c0ff' }
+    ];
+
+    const COMMA$1 = ',';
+
+    const SPACE$1 = ' ';
+
+    const trim$1 = (str, placement = '') => {
+        if (typeof str !== 'string') {
+            console.warn('Expected a string input');
+            return '';
+        }
+        switch (placement) {
+            case 'start':
+                return str.trimStart();
+            case 'end':
+                return str.trimEnd();
+            case 'both':
+                return str.trim();
+            case 'global':
+                return str.replace(/[\s\r\n]+/g, '');
+            default:
+                return str.trim().replace(/[\s\r\n]+/g, ' '); // Default behavior, trims both ends and replaces inner spaces
+        }
+    };
+
+    const parseClasses$1 = (data) => {
+        let separator, result = [];
+        if (Array.isArray(data)) {
+            // If data is already an array, filter out invalid values
+            result = data.filter((k) => k && typeof k === 'string');
+        }
+        else {
+            // Trim the input string and handle multiple spaces
+            data = trim$1(data);
+            // Use comma as the separator if present, otherwise use space
+            separator = data.includes(COMMA$1) ? COMMA$1 : SPACE$1;
+            result = data.split(separator);
+        }
+        // Trim each item globally and filter out any empty strings
+        return result.map((k) => trim$1(k, 'global')).filter(Boolean);
+    };
+
+    const rtlStyle = (name = '') => `
+            <style>
+                :where([dir="rtl"]) .icax-${name},
+                :where(:dir(rtl)) .icax-${name} {
+                    transform: scaleX(-1);
+                    transform-origin: center;
+                }
+            </style>
+`;
+
+    const wrap = (content, fun, isRtl = false, options) => {
+        const size = options?.size || '1em', color = options?.color || 'currentColor', thickness = options?.thickness || 2, classes = options?.classes ? parseClasses$1(options.classes).join(' ') : '', 
+        // 得到 "icax-left"
+        origName = fun.name.replace(/([A-Z])/g, "-$1").toLowerCase();
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}"
+          stroke-width="${thickness}" stroke-linecap="round" stroke-linejoin="round" class="${origName} ${classes}">
+          ${isRtl ? rtlStyle(origName.split('-')[1]) : ''}
+          ${content}
+      </svg>`;
+    };
+
+    const icaxCheck = (options) => wrap(`<polyline points="20 6 9 17 4 12"></polyline>`, icaxCheck, false, options);
+
+    const icaxCopy = (options) => wrap(`<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>`, icaxCopy, false, options);
+
+    const copy = {
+        name: 'copy',
+        icon: icaxCopy(),
+        action: function (arg) {
+            arg.wrapEl.onclick = () => {
+                //this只是组件实例
+                navigator.clipboard.writeText(this.source)
+                    .then(() => {
+                    console.log('Text successfully copied to clipboard');
+                    arg.iconEl.innerHTML = icaxCheck();
+                    arg.iconEl.toggleAttribute('disabled', true);
+                    setTimeout(() => {
+                        //恢复
+                        arg.iconEl.removeAttribute('disabled');
+                        arg.iconEl.innerHTML = icaxCopy();
+                    }, 2000);
+                })
+                    .catch(err => {
+                    console.error('Error copying text to clipboard: ', err);
+                });
+            };
+        }
+    };
+
+    const css = [
+        { token: 'comment', pattern: /\/\*[\s\S]*?\*\//, light: '#6a737d', dark: '#8b949e' },
+        { token: 'value', pattern: /(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/, light: '#032f62', dark: '#a5d6ff' },
+        { token: 'func', pattern: /[a-z-]+\(?=/, light: '#e36209', dark: '#ffa657' },
+        { token: 'property', pattern: /[a-z-]+(?=\s*:)/, light: '#005cc5', dark: '#79c0ff' },
+        { token: 'selector', pattern: /[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i, light: '#22863a', dark: '#7ee787' },
+        { token: 'unit', pattern: /(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/, light: '#d73a49', dark: '#ff7b72' },
+        { token: 'number', pattern: /\b\d+(\.\d+)?\b/, light: '#005cc5', dark: '#79c0ff' },
+        { token: 'punct', pattern: /[{}();:]/, light: '#24292e', dark: '#c9d1d9' }
+    ];
+
     const typeWriter = (text, options) => {
         const speed = options.speed || 100; // Set typing speed (default to 100ms per character)
         return new Promise((resolve) => {
@@ -49,11 +213,11 @@
         });
     };
 
-    const COMMA$1 = ',';
+    const COMMA = ',';
 
-    const SPACE$1 = ' ';
+    const SPACE = ' ';
 
-    const trim$1 = (str, placement = 'compress') => {
+    const trim = (str, placement = 'compress') => {
         if (typeof str !== 'string') {
             console.warn('Expected a string input');
             return '';
@@ -72,7 +236,7 @@
         }
     };
 
-    const parseClasses$1 = (data) => {
+    const parseClasses = (data) => {
         let separator, result = [];
         if (Array.isArray(data)) {
             // If data is already an array, filter out invalid values
@@ -80,13 +244,13 @@
         }
         else {
             // Trim the input string and handle multiple spaces
-            data = trim$1(data);
+            data = trim(data);
             // Use comma as the separator if present, otherwise use space
-            separator = data.includes(COMMA$1) ? COMMA$1 : SPACE$1;
+            separator = data.includes(COMMA) ? COMMA : SPACE;
             result = data.split(separator);
         }
         // Trim each item globally and filter out any empty strings
-        return result.map((k) => trim$1(k, 'global')).filter(Boolean);
+        return result.map((k) => trim(k, 'global')).filter(Boolean);
     };
 
     const getDataType = (obj) => {
@@ -232,7 +396,7 @@
     const ALIAS = 'rep';
 
     const addClasses = (target, classes, intercept) => {
-        const el = getEl(target), arr = parseClasses$1(classes);
+        const el = getEl(target), arr = parseClasses(classes);
         if (!el || arr.length === 0) {
             return;
         }
@@ -272,36 +436,35 @@
         return toolsEl;
     };
 
-    class CoaxElem extends HTMLElement {
+    class Coax extends HTMLElement {
         // A static Map to hold the configuration for different languages
         static languages = new Map();
+        // A static array to hold the tools registered with the component
         static tools = [];
-        source;
-        _renderQueued = false;
-        baseStylesEl;
-        themeStylesEl;
-        dynamicStylesEl;
-        highlightedCodeEl;
-        headerEl;
-        codeNameEl;
-        codeToolsEl;
-        codeBodyEl;
-        alias;
-        lineString;
-        speed;
-        autoScroll;
+        source; // Source code content to be highlighted
+        _renderQueued = false; // Flag to prevent multiple render requests
+        baseStylesEl; // Element for base styles
+        themeStylesEl; // Element for theme styles
+        dynamicStylesEl; // Element for dynamic styles
+        highlightEl; // Element that holds the highlighted code
+        headerEl; // Header element (for code name, tools, etc.)
+        codeNameEl; // Code name element (shows language or alias)
+        codeToolsEl; // Code tools element (for interactive tools like copy)
+        codeBodyEl; // Code body element (the container for the code)
+        lang = 'plain'; // Language of the code (default is plain text)
+        alias = 'Plain Text'; // Alias name for the language (default is 'Plain Text')
+        lineString = ''; // The current line's string being typed
+        lastLineString = ''; // The last line's string
+        speed = 5; // Speed of the typing effect (higher is slower)
+        autoScroll = true; // Flag to enable/disable auto-scrolling
+        canListen = true; // Flag to enable/disable auto-scrolling
         constructor() {
             super();
             // Attach a Shadow DOM to the custom element
             this.attachShadow({ mode: 'open' });
             // Remove leading/trailing whitespace from the raw code content
             this.source = this.textContent?.replace(/^\s*\n|\n\s*$/g, '') || '';
-            this.lang = 'plain';
-            this.alias = 'Plain Text';
-            this.lineString = '';
-            this.speed = 5;
-            this.autoScroll = true;
-            // 1. 初始化基础骨架
+            // Initialize the basic structure of the component
             this.shadowRoot.innerHTML = `
             <style id="base-styles">
                 :host { 
@@ -431,10 +594,10 @@
             <style id="theme-styles"></style>
             <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
             <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
+                <pre><code id="highlight"></code></pre>
             </div>
         `;
-            // 缓存引用
+            // Cache references to various elements
             this.baseStylesEl = getEl('#base-styles', this.shadowRoot);
             this.themeStylesEl = getEl('#theme-styles', this.shadowRoot);
             this.dynamicStylesEl = getEl('#dynamic-styles', this.shadowRoot);
@@ -442,10 +605,10 @@
             this.codeNameEl = getEl('#code-name', this.shadowRoot);
             this.codeToolsEl = getEl('#code-tools', this.shadowRoot);
             this.codeBodyEl = getEl('#code-body', this.shadowRoot);
-            this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot);
+            this.highlightEl = getEl('#highlight', this.shadowRoot);
             this.codeBodyEl.addEventListener('scroll', () => {
                 let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
-                // 检测是否是用户手动滚动
+                // Check if the user manually scrolled
                 this.autoScroll = !flag;
             });
         }
@@ -454,11 +617,11 @@
             // Store the language configuration in the static map
             this.languages.set(name, { ...config });
         }
-        //注册工具箱
+        
         static addTools(items) {
-            CoaxElem.tools = items;
+            Coax.tools = items;
         }
-        //加入工具箱
+        
         mountTools(toolItems) {
             requestAnimationFrame(() => {
                 this.codeToolsEl.innerHTML = '';
@@ -469,31 +632,32 @@
                 this.codeToolsEl.appendChild(createTools(items));
             });
         }
-        // Called when the element is connected to the DOM
+        
         connectedCallback() {
             this.render();
         }
-        // Observed attributes for changes
+        
         static get observedAttributes() { return ['lang', 'height', 'max-height', 'tools', 'speed']; }
         
         attributeChangedCallback(name, oldVal, newVal) {
-            if (oldVal === newVal)
+            if (oldVal === newVal || !this.canListen)
                 return;
             if (name === 'height' || name === 'max-height') {
                 this.updateStyleByRegExp(name, newVal);
             }
             if (name === 'speed') {
+                // Convert to integer (0 or 1)
                 this.speed = ~~(!!newVal);
             }
             if (name === 'lang') {
-                //更新当前语言
+                // Update the language and re-render
                 this.lang = newVal;
                 this.render();
             }
             if (name === 'tools') {
                 if (!newVal)
                     this.codeToolsEl.innerHTML = '';
-                const tools = parseClasses$1(newVal), toolItems = CoaxElem.tools.filter(k => tools.includes(k.name));
+                const tools = parseClasses(newVal), toolItems = Coax.tools.filter(k => tools.includes(k.name));
                 if (!toolItems.length)
                     return;
                 this.mountTools(toolItems);
@@ -507,11 +671,13 @@
             // 替换为新的属性值
             this.baseStylesEl.textContent = this.baseStylesEl.textContent.replace(regex, `;\n${prop}: ${value};`);
         }
+        
         getCssPrefix(config) {
             return (config?.cssPrefix || this.lang).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
         }
+        
         getHighLightString(string, config) {
-            config = config || CoaxElem.languages.get(this.lang);
+            config = config || Coax.languages.get(this.lang);
             if (!config)
                 return string;
             // 如果找到了配置，则进行高亮处理
@@ -523,19 +689,21 @@
                 return i !== -1 && config.rules[i] ? `<span class="${NAMESPACE}-${cssPrefix}-${config.rules[i].token}">${match}</span>` : match;
             });
         }
+        
         createLineWrap(index, startIndex) {
             let dataIndex = 0;
             if (index == null && startIndex == null) {
-                dataIndex = this.highlightedCodeEl.children.length;
+                dataIndex = this.highlightEl.children.length;
             }
             else {
-                const start = startIndex || this.highlightedCodeEl.children.length;
+                const start = startIndex || this.highlightEl.children.length;
                 dataIndex = start + index;
             }
             return createEl('div', { 'data-index': dataIndex }, '<div></div>');
         }
+        
         getLineToFill(codeWrap, line, config) {
-            config = config || CoaxElem.languages.get(this.lang);
+            config = config || Coax.languages.get(this.lang);
             let highlightedLine = this.getHighLightString(line, config);
             // 将高亮后的内容填充到 div 中
             codeWrap.innerHTML = highlightedLine;
@@ -543,7 +711,7 @@
         ;
         
         async highlight(newCode) {
-            const config = CoaxElem.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
+            const config = Coax.languages.get(this.lang), startIndex = this.highlightEl.children.length, 
             // 将新源码按行分割
             newCodeLines = newCode ? newCode.split('\n') : [];
             //更新别名
@@ -558,9 +726,9 @@
                 // 创建一个 div 包裹每一行
                 const lineWrap = this.createLineWrap(index, startIndex), codeWrap = lineWrap.lastElementChild;
                 //标记完成
-                this.closeLine(lineWrap);
+                lineWrap.completed = true;
                 if (this.hasAttribute('speed')) {
-                    this.highlightedCodeEl.appendChild(lineWrap);
+                    this.highlightEl.appendChild(lineWrap);
                     //流式打字
                     await typeWriter(lineString, {
                         speed: this.speed,
@@ -574,20 +742,22 @@
                     //直接打出
                     this.getLineToFill(codeWrap, lineString, config);
                     //
-                    this.highlightedCodeEl.appendChild(lineWrap);
+                    this.highlightEl.appendChild(lineWrap);
                 }
             }
             //滚动到最底部
             this.autoScrollCode();
             return true;
         }
+        
         autoScrollCode() {
             if (this.autoScroll) {
                 this.codeBodyEl.scrollTop = this.codeBodyEl.scrollHeight;
             }
         }
+        
         injectThemeStyles() {
-            const config = CoaxElem.languages.get(this.lang);
+            const config = Coax.languages.get(this.lang);
             if (!config)
                 return;
             // Get language name, fallback to 'js' if not provided
@@ -609,13 +779,13 @@
                     .${NAMESPACE}-${cssPrefix}-${rule.token} { color: var(--${NAMESPACE}-${cssPrefix}-${rule.token},${rule.dark}); }` : ``} `).join('\n');
             schemeStyles += `}`;
             // Set the inner HTML of the shadow root, including styles and highlighted code
-            // 2. 精确更新 DOM 节点而非重写 ShadowRoot
             this.dynamicStylesEl.textContent = lightStyles + darkStyles + schemeStyles;
             //附加主题样式
             if (config?.themeStyles) {
                 this.themeStylesEl.textContent = config.themeStyles;
             }
         }
+        
         updateName(config) {
             if (this.hasAttribute('unnamed'))
                 return;
@@ -631,21 +801,18 @@
         
         render(code = this.source) {
             //同时多次改变属性，只执行一次
-            // 如果已经在队列中，则直接返回
             if (this._renderQueued)
                 return;
             this._renderQueued = true;
-            // 使用 requestAnimationFrame 将渲染推迟到下一帧
-            requestAnimationFrame(async () => {
-                this.clear();
-                this.injectThemeStyles();
-                //一次性渲染
-                await this.highlight(code);
-                this._renderQueued = false;
-            });
+            this.clear();
+            this.injectThemeStyles();
+            //一次性渲染
+            this.highlight(code);
+            this._renderQueued = false;
         }
+        
         clear() {
-            this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+            this.highlightEl.innerHTML = this.source = this.lineString = '';
         }
         
         async replace(newCode) {
@@ -659,36 +826,46 @@
             // 高亮新的部分
             await this.highlight(newCode);
         }
-        getActiveCodeWrap() {
-            const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+        
+        getLastLine() {
+            const lastChild = this.highlightEl.lastElementChild, lastLine = !lastChild || this.highlightEl.lastElementChild?.completed ?
                 this.createLineWrap() : lastChild;
             return {
                 lineWrap: lastLine,
                 codeWrap: lastLine.lastElementChild
             };
         }
-        closeLine(lineWrap) {
-            lineWrap = lineWrap || this.highlightedCodeEl.lastElementChild;
-            lineWrap && (lineWrap.completed = true);
+        
+        close() {
+            const lineWrap = this.highlightEl.lastElementChild;
+            if (!lineWrap)
+                return;
+            lineWrap.completed = true;
+            //行结束前保存
+            this.lastLineString = this.lineString;
+            this.getLineToFill(lineWrap?.lastElementChild, this.lineString);
+            //一行结束，清空临时行文本
+            this.lineString = '';
         }
-        openLine(lineWrap) {
-            lineWrap = lineWrap || this.highlightedCodeEl.lastElementChild;
-            lineWrap && (lineWrap.completed = false);
+        
+        open() {
+            const lineWrap = this.highlightEl.lastElementChild;
+            if (!lineWrap)
+                return;
+            lineWrap.completed = false;
+            //恢复最后一行字符串
+            (lineWrap?.lastElementChild).textContent = this.lineString = this.lastLineString;
         }
-        stream(str, forceEnd = false) {
-            const { lineWrap, codeWrap } = this.getActiveCodeWrap();
-            this.highlightedCodeEl.appendChild(lineWrap);
+        
+        stream(str, forceClose = false) {
+            const { lineWrap, codeWrap } = this.getLastLine();
+            this.highlightEl.appendChild(lineWrap);
             //汇集
             this.source += str;
             //如果没有遇到换行符号，也可以强制结束
-            forceEnd && this.closeLine(lineWrap);
-            if (str.startsWith('\n') || str.startsWith('\r')) {
+            if (forceClose || (str.startsWith('\n') || str.endsWith('\n'))) {
                 //标记完成
-                this.closeLine(lineWrap);
-                //渲染
-                this.getLineToFill(codeWrap, this.lineString);
-                //一行结束，清空临时行文本
-                this.lineString = '';
+                this.close();
             }
             else {
                 //插入文本
@@ -701,171 +878,6 @@
         }
     }
 
-    const html = [
-        { token: 'comment', pattern: /&lt;!--[\s\S]*?--&gt;/, light: '#999999', dark: '#6e7681' },
-        { token: 'doctype', pattern: /&lt;!DOCTYPE[\s\S]*?&gt;/i, light: '#6a737d', dark: '#8b949e' },
-        // 匹配标签名: <div, </div
-        { token: 'tag', pattern: /&lt;\/?[a-zA-Z0-9]+/, light: '#22863a', dark: '#7ee787' },
-        // 匹配属性名: class=
-        { token: 'attr', pattern: /[a-zA-Z-]+(?=\s*=\s*)/, light: '#6f42c1', dark: '#d2a8ff' },
-        // 匹配属性值: "value"
-        { token: 'string', pattern: /(['"])(?:\\.|[^\\])*?\1/, light: '#032f62', dark: '#a5d6ff' },
-        // 匹配标签闭合: >, />
-        { token: 'bracket', pattern: /\/?&gt;/, light: '#24292e', dark: '#c9d1d9' }
-    ];
-
-    const javascript = [
-        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, light: '#6a737d', dark: '#8b949e' },
-        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, light: '#032f62', dark: '#98c379' },
-        { token: 'keyword', pattern: /\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/, light: '#d73a49', dark: '#ff7b72' },
-        { token: 'builtin', pattern: /\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/, light: '#e36209', dark: '#ffa657' },
-        { token: 'number', pattern: /\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/, light: '#005cc5', dark: '#79c0ff' },
-        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, light: '#6f42c1', dark: '#d2a8ff' },
-        { token: 'op', pattern: /[+\-*/%=<>!&|^~]+/, light: '#069598', dark: '#56b6c2' }
-    ];
-
-    const markdown = [
-        // 注释: 这是 Markdown 中的行内注释
-        { token: 'comment', pattern: /<!--[\s\S]*?-->/, light: '#6a737d', dark: '#8b949e' },
-        // 标题: 通过 `#` 来定义标题
-        { token: 'heading', pattern: /(^|\n)(#{1,6})\s*(.+)/, light: '#e36209', dark: '#ffa657' },
-        // 粗体: **text** 或 __text__
-        { token: 'bold', pattern: /\*\*([^*]+)\*\*|__([^_]+)__/g, light: '#d73a49', dark: '#ff7b72' },
-        // 斜体: *text* 或 _text_
-        { token: 'italic', pattern: /\*([^*]+)\*|_([^_]+)_/g, light: '#032f62', dark: '#a5d6ff' },
-        // 链接: [text](url)
-        { token: 'link', pattern: /\[([^\]]+)\]\(([^)]+)\)/g, light: '#0288d1', dark: '#80c0ff' },
-        // 行内代码: `code`
-        { token: 'inline-code', pattern: /`([^`]+)`/g, light: '#032f62', dark: '#98c379' },
-        // 代码块: ```code```
-        { token: 'code-block', pattern: /```([^\n]+)\n([\s\S]*?)```/g, light: '#24292e', dark: '#c9d1d9' },
-        // 列表项: - item 或 * item
-        { token: 'list-item', pattern: /(^|\n)([-*])\s+(.+)/g, light: '#5c6e7c', dark: '#8b949e' },
-        // 引用: > text
-        { token: 'quote', pattern: /(^|\n)>[ \t]*(.+)/g, light: '#6f42c1', dark: '#d2a8ff' },
-        // 图片: ![alt](url)
-        { token: 'image', pattern: /!\[([^\]]+)\]\(([^)]+)\)/g, light: '#d73a49', dark: '#ff7b72' },
-        // 分割线: ---
-        { token: 'hr', pattern: /^(---|___|\*\*\*)\s*$/gm, light: '#24292e', dark: '#c9d1d9' },
-        // 强调和删除: ~~text~~
-        { token: 'strikethrough', pattern: /~~([^~]+)~~/g, light: '#e36209', dark: '#ffa657' },
-        // 表格: | header1 | header2 |
-        { token: 'table', pattern: /\|([^\|]+)\|([^\|]+)\|/g, light: '#5c6e7c', dark: '#8b949e' }
-    ];
-
-    const typescript = [
-        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, light: '#6a737d', dark: '#8b949e' },
-        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, light: '#032f62', dark: '#98c379' },
-        { token: 'decorator', pattern: /@[a-zA-Z_]\w*/, light: '#953800', dark: '#ffa657' },
-        { token: 'keyword', pattern: /\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/, light: '#d73a49', dark: '#ff7b72' },
-        { token: 'builtin', pattern: /\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/, light: '#e36209', dark: '#ffa657' },
-        { token: 'type', pattern: /\b[A-Z]\w*\b/, light: '#005cc5', dark: '#79c0ff' },
-        { token: 'number', pattern: /\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/, light: '#005cc5', dark: '#79c0ff' },
-        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, light: '#6f42c1', dark: '#d2a8ff' },
-        { token: 'op', pattern: /(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/, light: '#089ba6', dark: '#79c0ff' }
-    ];
-
-    const COMMA = ',';
-
-    const SPACE = ' ';
-
-    const trim = (str, placement = '') => {
-        if (typeof str !== 'string') {
-            console.warn('Expected a string input');
-            return '';
-        }
-        switch (placement) {
-            case 'start':
-                return str.trimStart();
-            case 'end':
-                return str.trimEnd();
-            case 'both':
-                return str.trim();
-            case 'global':
-                return str.replace(/[\s\r\n]+/g, '');
-            default:
-                return str.trim().replace(/[\s\r\n]+/g, ' '); // Default behavior, trims both ends and replaces inner spaces
-        }
-    };
-
-    const parseClasses = (data) => {
-        let separator, result = [];
-        if (Array.isArray(data)) {
-            // If data is already an array, filter out invalid values
-            result = data.filter((k) => k && typeof k === 'string');
-        }
-        else {
-            // Trim the input string and handle multiple spaces
-            data = trim(data);
-            // Use comma as the separator if present, otherwise use space
-            separator = data.includes(COMMA) ? COMMA : SPACE;
-            result = data.split(separator);
-        }
-        // Trim each item globally and filter out any empty strings
-        return result.map((k) => trim(k, 'global')).filter(Boolean);
-    };
-
-    const rtlStyle = (name = '') => `
-            <style>
-                :where([dir="rtl"]) .icax-${name},
-                :where(:dir(rtl)) .icax-${name} {
-                    transform: scaleX(-1);
-                    transform-origin: center;
-                }
-            </style>
-`;
-
-    const wrap = (content, fun, isRtl = false, options) => {
-        const size = options?.size || '1em', color = options?.color || 'currentColor', thickness = options?.thickness || 2, classes = options?.classes ? parseClasses(options.classes).join(' ') : '', 
-        // 得到 "icax-left"
-        origName = fun.name.replace(/([A-Z])/g, "-$1").toLowerCase();
-        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}"
-          stroke-width="${thickness}" stroke-linecap="round" stroke-linejoin="round" class="${origName} ${classes}">
-          ${isRtl ? rtlStyle(origName.split('-')[1]) : ''}
-          ${content}
-      </svg>`;
-    };
-
-    const icaxCheck = (options) => wrap(`<polyline points="20 6 9 17 4 12"></polyline>`, icaxCheck, false, options);
-
-    const icaxCopy = (options) => wrap(`<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>`, icaxCopy, false, options);
-
-    const copy = {
-        name: 'copy',
-        icon: icaxCopy(),
-        action: function (arg) {
-            arg.wrapEl.onclick = () => {
-                //this只是组件实例
-                navigator.clipboard.writeText(this.source)
-                    .then(() => {
-                    console.log('Text successfully copied to clipboard');
-                    arg.iconEl.innerHTML = icaxCheck();
-                    arg.iconEl.toggleAttribute('disabled', true);
-                    setTimeout(() => {
-                        //恢复
-                        arg.iconEl.removeAttribute('disabled');
-                        arg.iconEl.innerHTML = icaxCopy();
-                    }, 2000);
-                })
-                    .catch(err => {
-                    console.error('Error copying text to clipboard: ', err);
-                });
-            };
-        }
-    };
-
-    const css = [
-        { token: 'comment', pattern: /\/\*[\s\S]*?\*\//, light: '#6a737d', dark: '#8b949e' },
-        { token: 'value', pattern: /(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/, light: '#032f62', dark: '#a5d6ff' },
-        { token: 'func', pattern: /[a-z-]+\(?=/, light: '#e36209', dark: '#ffa657' },
-        { token: 'property', pattern: /[a-z-]+(?=\s*:)/, light: '#005cc5', dark: '#79c0ff' },
-        { token: 'selector', pattern: /[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i, light: '#22863a', dark: '#7ee787' },
-        { token: 'unit', pattern: /(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/, light: '#d73a49', dark: '#ff7b72' },
-        { token: 'number', pattern: /\b\d+(\.\d+)?\b/, light: '#005cc5', dark: '#79c0ff' },
-        { token: 'punct', pattern: /[{}();:]/, light: '#24292e', dark: '#c9d1d9' }
-    ];
-
-    const Coax = CoaxElem;
     //注册语言类型
     Coax.register('css', {
         alias: 'CSS',