@codady/coax 0.0.2 → 0.0.4

package/dist/coax.esm.js

@@ -1,10 +1,10 @@
 
 /*!
- * @since Last modified: 2026-1-8 16:55:44
+ * @since Last modified: 2026-1-12 14:46:3
  * @name Coax event management system.
- * @version 0.0.2
+ * @version 0.0.4
  * @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}
@@ -14,6 +14,75 @@
  * @license MIT license
  */
 
+const typeWriter = (text, options) => {
+    const speed = options.speed || 100; // Set typing speed (default to 100ms per character)
+    return new Promise((resolve) => {
+        // Callback before typing starts
+        options?.onBeforeType?.(text);
+        let index = 0;
+        // Timer to type the text character by character at the given speed
+        const timer = setInterval(() => {
+            if (index < text.length) {
+                const char = text.charAt(index); // Get the character at the current index
+                const typedText = text.substring(0, index + 1); // The text typed so far
+                // Callback during typing each character
+                options?.onDuringType?.(char, typedText);
+                index++;
+            }
+            else {
+                // Clear the timer once typing is complete
+                clearInterval(timer);
+                // Resolve the Promise when typing is complete
+                resolve(text);
+                // Callback after typing is finished
+                options?.onAfterType?.(text);
+            }
+        }, speed);
+    });
+};
+
+const COMMA$1 = ',';
+
+const SPACE$1 = ' ';
+
+const trim$1 = (str, placement = 'compress') => {
+    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 NAMESPACE = 'ax';
+
 const getDataType = (obj) => {
     let tmp = Object.prototype.toString.call(obj).slice(8, -1), result;
     if (tmp === 'Function' && /^\s*class\s+/.test(obj.toString())) {
@@ -156,48 +225,6 @@ const isEmpty = (data) => {
 
 const ALIAS = 'rep';
 
-const NAMESPACE = 'ax';
-
-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 addClasses = (target, classes, intercept) => {
     const el = getEl(target), arr = parseClasses$1(classes);
     if (!el || arr.length === 0) {
@@ -239,94 +266,34 @@ const createTools = (data) => {
     return toolsEl;
 };
 
-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 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 icaxCheck = (options) => wrap(`<polyline points="20 6 9 17 4 12"></polyline>`, icaxCheck, false, options);
-
 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;
-    nameEl;
-    toolsEl;
-    alias;
+    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
+    highlightedCodeEl; // 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
     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';
-        // 1. 初始化基础骨架
+        // Initialize the basic structure of the component
         this.shadowRoot.innerHTML = `
             <style id="base-styles">
                 :host { 
@@ -343,16 +310,16 @@ class Coax extends HTMLElement {
                     --border-color:rgb(224, 224, 224);
                     --color-code:rgb(51, 51, 51);
                     --color-index:rgb(153, 153, 153);
-                    --color-stripe:rgb(224, 224, 224);
-                    --color-hover:rgb(224, 224, 224);
+                    --color-stripe:rgba(0,0,0,0.04);
+                    --color-hover:rgba(0,0,0,0.06);
                 }           
                :host([scheme="dark"]){
                     --background: #282c34;
                     --border-color: transparent;
                     --color-code: #abb2bf;
                     --color-index:rgb(153, 153, 153);
-                    --color-stripe:rgb(66, 66, 66);
-                    --color-hover:rgb(66, 66, 66);
+                    --color-stripe:rgba(255,255,255,0.04);
+                    --color-hover:rgba(255,255,255,0.06);
                }
                 @media (prefers-color-scheme: dark) {
                     :host{
@@ -360,8 +327,8 @@ class Coax extends HTMLElement {
                         --border-color: transparent;
                         --color-code: #abb2bf;
                         --color-index:rgb(153, 153, 153);
-                        --color-stripe:rgb(66, 66, 66);
-                        --color-hover:rgb(66, 66, 66);
+                        --color-stripe:rgba(255,255,255,0.04);
+                        --color-hover:rgba(255,255,255,0.06);
                     }
                 }
                 :host {
@@ -371,7 +338,6 @@ class Coax extends HTMLElement {
                     background:var(--${NAMESPACE}-code-background-color,var(--background));
                     color:var(--${NAMESPACE}-code-color,var(--color-code));
                     border:var(--${NAMESPACE}-code-border-width,var(--border-width)) var(--${NAMESPACE}-code-border-style,var(--border-style)) var(--${NAMESPACE}-code-border-color,var(--border-color));
-                    overflow:auto;
                     transition: border-color 0.3s ease,color 0.3s ease;  
                     border-radius: var(--${NAMESPACE}-code-radius,var(--radius));
                 }
@@ -388,6 +354,7 @@ class Coax extends HTMLElement {
                     padding: var(--${NAMESPACE}-code-padding,var(--padding)) 0;
                     height:var(--${NAMESPACE}-code-height,var(--height));
                     max-height:var(--${NAMESPACE}-code-max-height,var(--max-height));
+                    overflow:auto;
                 }
                 pre,code{
                     font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";
@@ -403,6 +370,9 @@ class Coax extends HTMLElement {
                         flex:auto;
                     }
                 }
+                code>div>div:empty:before{
+                    content:' ';
+                }
                 :host([indexed]) code>div:before{
                     display:inline-flex;
                     color:var(--color-index);
@@ -410,13 +380,13 @@ class Coax extends HTMLElement {
                     min-width:var(--${NAMESPACE}-code-index-width,2em);
                     margin-inline-end:var(--${NAMESPACE}-code-padding,8px);
                 }
-                :host([hoverable]) code>div:hover{
-                    background-color:var(--color-hover);
-                }
                 :host([striped]) code>div:nth-child(odd){
                     background-color:var(--color-stripe);
                 }
-                :host([wrapped]) code>div{
+                :host([hoverable]) code>div:hover{
+                    background-color:var(--color-hover);
+                }
+                :host([wrapped]) code>div>div{
                     white-space: pre-wrap;
                 }
                 :host([unnamed]) #code-name{
@@ -456,41 +426,47 @@ class Coax extends HTMLElement {
                 <pre><code id="highlight-code"></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);
         this.headerEl = getEl('#code-header', this.shadowRoot);
-        this.nameEl = getEl('#code-name', this.shadowRoot);
-        this.toolsEl = getEl('#code-tools', this.shadowRoot);
+        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.codeBodyEl.addEventListener('scroll', () => {
+            let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
+            // Check if the user manually scrolled
+            this.autoScroll = !flag;
+        });
     }
     
     static register(name, config) {
         // Store the language configuration in the static map
         this.languages.set(name, { ...config });
     }
-    //注册工具箱
+    
     static addTools(items) {
         Coax.tools = items;
     }
-    //加入工具箱
+    
     mountTools(toolItems) {
         requestAnimationFrame(() => {
-            this.toolsEl.innerHTML = '';
+            this.codeToolsEl.innerHTML = '';
             let items = toolItems.map(k => {
                 k.action = k.action.bind(this);
                 return k;
             });
-            this.toolsEl.appendChild(createTools(items));
+            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']; }
+    
+    static get observedAttributes() { return ['lang', 'height', 'max-height', 'tools', 'speed']; }
     
     attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal)
@@ -498,18 +474,18 @@ class Coax extends HTMLElement {
         if (name === 'height' || name === 'max-height') {
             this.updateStyleByRegExp(name, newVal);
         }
-        else if (name === 'lang') {
-            //更新当前语言
+        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();
         }
-        else if (name === 'unnamed') {
-            this.nameEl.innerHTML = newVal === null ? (this.alias || this.lang) : '';
-            this.nameEl.innerHTML = '';
-        }
-        else if (name === 'tools') {
+        if (name === 'tools') {
             if (!newVal)
-                this.toolsEl.innerHTML = '';
+                this.codeToolsEl.innerHTML = '';
             const tools = parseClasses$1(newVal), toolItems = Coax.tools.filter(k => tools.includes(k.name));
             if (!toolItems.length)
                 return;
@@ -524,37 +500,91 @@ class Coax extends HTMLElement {
         // 替换为新的属性值
         this.baseStylesEl.textContent = this.baseStylesEl.textContent.replace(regex, `;\n${prop}: ${value};`);
     }
+    
     getCssPrefix(config) {
         return (config?.cssPrefix || this.lang).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
     }
     
-    highlight(newCode) {
+    getHighLightString(string, config) {
+        config = config || Coax.languages.get(this.lang);
+        if (!config)
+            return string;
+        // 如果找到了配置，则进行高亮处理
+        const cssPrefix = this.getCssPrefix(config), 
+        // 获取用于语法高亮的正则表达式
+        combinedRegex = new RegExp(config.rules.map((r) => `(${r.pattern.source})`).join('|'), 'g');
+        return string.replace(combinedRegex, (match, ...args) => {
+            const i = args.findIndex(val => val !== undefined);
+            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;
+        }
+        else {
+            const start = startIndex || this.highlightedCodeEl.children.length;
+            dataIndex = start + index;
+        }
+        return createEl('div', { 'data-index': dataIndex }, '<div></div>');
+    }
+    
+    getLineToFill(codeWrap, line, config) {
+        config = config || Coax.languages.get(this.lang);
+        let highlightedLine = this.getHighLightString(line, config);
+        // 将高亮后的内容填充到 div 中
+        codeWrap.innerHTML = highlightedLine;
+    }
+    ;
+    
+    async highlight(newCode) {
         const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
         // 将新源码按行分割
-        newCodeLines = newCode.split('\n'), 
+        newCodeLines = newCode ? newCode.split('\n') : [];
+        //更新别名
+        this.updateName(config);
+        if (!newCodeLines.length)
+            return true;
         // 如果没有找到配置，则输出原始代码，并不进行高亮处理
-        highlightedLines = newCodeLines.map((line, index) => {
-            let highlightedLine = line;
-            // 如果找到了配置，则进行高亮处理
-            if (config) {
-                const cssPrefix = this.getCssPrefix(config);
-                // 获取用于语法高亮的正则表达式
-                const combinedRegex = new RegExp(config.rules.map((r) => `(${r.pattern.source})`).join('|'), 'g');
-                // 进行高亮替换
-                highlightedLine = line.replace(combinedRegex, (match, ...args) => {
-                    const i = args.findIndex(val => val !== undefined);
-                    return i !== -1 && config.rules[i] ? `<span class="${NAMESPACE}-${cssPrefix}-${config.rules[i].token}">${match}</span>` : match;
+        for (let [index, lineString] of newCodeLines.entries()) {
+            //如果是空行则跳过
+            if (!lineString.trim() && this.hasAttribute('sanitized'))
+                continue;
+            // 创建一个 div 包裹每一行
+            const lineWrap = this.createLineWrap(index, startIndex), codeWrap = lineWrap.lastElementChild;
+            //标记完成
+            lineWrap.completed = true;
+            if (this.hasAttribute('speed')) {
+                this.highlightedCodeEl.appendChild(lineWrap);
+                //流式打字
+                await typeWriter(lineString, {
+                    speed: this.speed,
+                    onDuringType: (char, fullText) => {
+                        codeWrap.innerHTML = fullText;
+                    }
                 });
+                this.getLineToFill(codeWrap, lineString, config);
             }
-            // 创建一个 div 包裹每一行
-            const lineDiv = createEl('div', { 'data-index': startIndex + index });
-            lineDiv.innerHTML = `<div>${highlightedLine}</div>`; // 将高亮后的内容填充到 div 中
-            return lineDiv;
-        });
-        //
-        // 将新生成的行节点追加到 highlightedCodeEl 节点中
-        this.highlightedCodeEl.append(...highlightedLines);
+            else {
+                //直接打出
+                this.getLineToFill(codeWrap, lineString, config);
+                //
+                this.highlightedCodeEl.appendChild(lineWrap);
+            }
+        }
+        //滚动到最底部
+        this.autoScrollCode();
+        return true;
     }
+    
+    autoScrollCode() {
+        if (this.autoScroll) {
+            this.codeBodyEl.scrollTop = this.codeBodyEl.scrollHeight;
+        }
+    }
+    
     injectThemeStyles() {
         const config = Coax.languages.get(this.lang);
         if (!config)
@@ -564,141 +594,284 @@ class Coax extends HTMLElement {
         //Generate dynamic CSS classes for each syntax rule
         // 为 rules 中的每一个 name 生成类似 .hl-name { color: var(--ax-code-name); }
         lightStyles = config.rules.map((rule) => `
-                .${NAMESPACE}-${cssPrefix}-${rule.token} { color: var(--${NAMESPACE}-${cssPrefix}-${rule.token}${rule.color ? ',' + rule.color : ''});}`).join('\n'), darkStyles = '', schemeStyles = '';
+                .${NAMESPACE}-${cssPrefix}-${rule.token} { color: var(--${NAMESPACE}-${cssPrefix}-${rule.token}${rule.light ? ',' + rule.light : ''});}`).join('\n'), darkStyles = '', schemeStyles = '';
         darkStyles += `:host([scheme="dark"]){`;
         darkStyles += config.rules.map((rule) => `
-                ${rule.color ? `
+                ${rule.light ? `
                     .${NAMESPACE}-${cssPrefix}-${rule.token} {color: var(--${NAMESPACE}-${cssPrefix}-${rule.token},${rule.dark});}` : ``}`).join('\n');
         darkStyles += `}`;
         schemeStyles = `@media (prefers-color-scheme: dark){
                                 :host{
             `;
         schemeStyles += config.rules.map((rule) => `
-                ${rule.color ? `
+                ${rule.light ? `
                     .${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;
         }
-        //更新别名
-        this.updateName(config);
     }
+    
     updateName(config) {
         if (this.hasAttribute('unnamed'))
             return;
-        //更新别名
-        this.alias = config.alias || this.lang;
-        this.nameEl.innerHTML = this.alias;
+        if (!config) {
+            this.codeNameEl.innerHTML = 'Plain Text';
+        }
+        else {
+            //更新别名
+            this.alias = config.alias || this.lang;
+            this.codeNameEl.innerHTML = this.alias;
+        }
     }
     
-    render() {
+    render(code = this.source) {
         //同时多次改变属性，只执行一次
-        // 如果已经在队列中，则直接返回
         if (this._renderQueued)
             return;
         this._renderQueued = true;
         // 使用 requestAnimationFrame 将渲染推迟到下一帧
-        requestAnimationFrame(() => {
-            this.highlightedCodeEl.innerHTML = '';
-            //一次性渲染
-            this.highlight(this.source);
+        requestAnimationFrame(async () => {
+            this.clear();
             this.injectThemeStyles();
+            //一次性渲染
+            await this.highlight(code);
             this._renderQueued = false;
         });
     }
     
-    replaceCode(newCode) {
-        // 更新原始代码为新代码
-        this.source = newCode;
-        //清空
-        this.highlightedCodeEl.innerHTML = '';
-        this.highlight(newCode);
+    clear() {
+        this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
     }
     
-    appendCode(newCode) {
+    async replace(newCode) {
+        this.clear();
+        await this.highlight(newCode);
+    }
+    
+    async append(newCode) {
         // 将新的代码追加到现有代码末尾
         this.source += `\n${newCode}`;
         // 高亮新的部分
-        this.highlight(newCode);
+        await this.highlight(newCode);
     }
-}
-Coax.register('css', {
-    rules: [
-        { token: 'comment', pattern: /\/\*[\s\S]*?\*\//, color: '#6a737d', dark: '#8b949e' },
-        { token: 'value', pattern: /(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/, color: '#61afef', dark: '#a5d6ff' },
-        { token: 'func', pattern: /[a-z-]+\(?=/, color: '#e36209', dark: '#ffa657' },
-        { token: 'property', pattern: /[a-z-]+(?=\s*:)/, color: '#005cc5', dark: '#79c0ff' },
-        { token: 'selector', pattern: /[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i, color: '#6f42c1', dark: '#d2a8ff' },
-        { token: 'unit', pattern: /(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/, color: '#d73a49', dark: '#ff7b72' },
-        { token: 'number', pattern: /\b\d+(\.\d+)?\b/, color: '#005cc5', dark: '#79c0ff' },
-        { token: 'punct', pattern: /[{}();:]/, color: '#24292e', dark: '#c9d1d9' }
-    ],
     
-});
-Coax.register('html', {
-    rules: [
-        { token: 'comment', pattern: /&lt;!--[\s\S]*?--&gt;/, color: '#6a737d', dark: '#8b949e' },
-        { token: 'doctype', pattern: /&lt;!DOCTYPE[\s\S]*?&gt;/i, color: '#005cc5', dark: '#56b6c2' },
-        // 匹配标签名: <div, </div
-        { token: 'tag', pattern: /&lt;\/?[a-zA-Z0-9]+/, color: '#22863a', dark: '#abb2bf' },
-        // 匹配属性名: class=
-        { token: 'attr', pattern: /[a-zA-Z-]+(?=\s*=\s*)/, color: '#6f42c1', dark: '#e06c75' },
-        // 匹配属性值: "value"
-        { token: 'string', pattern: /(['"])(?:\\.|[^\\])*?\1/, color: '#032f62', dark: '#f39c12' },
-        // 匹配标签闭合: >, />
-        { token: 'bracket', pattern: /\/?&gt;/, color: '#24292e', dark: '#f1f1f1' }
-    ],
-});
-Coax.register('js', {
-    alias: 'Javascript',
-    rules: [
-        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, color: '#6a737d', dark: '#8b949e' },
-        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, color: '#032f62', dark: '#61afef' },
-        { 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/, color: '#e06c75', dark: '#d73a49' },
-        { token: 'builtin', pattern: /\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise)\b/, color: '#56b6c2', dark: '#61afef' },
-        { token: 'number', pattern: /\b\d+\b/, color: '#61afef', dark: '#d19a66' },
-        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, color: '#e5c07b', dark: '#98c379' },
-        { token: 'op', pattern: /[+\-*/%=<>!&|^~]+/, color: '#d73a49', dark: '#e06c75' }
-    ],
-});
-Coax.register('ts', {
-    rules: [
-        { token: 'comment', pattern: /\/\/[^\n]*|\/\*[\s\S]*?\*\//, color: '#6a737d', dark: '#8b949e' },
-        { token: 'string', pattern: /(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/, color: '#032f62', dark: '#61afef' },
-        { token: 'decorator', pattern: /@[a-zA-Z_]\w*/, color: '#d19a66', dark: '#e5c07b' },
-        { 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/, color: '#e06c75', dark: '#d73a49' },
-        { token: 'builtin', pattern: /\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|boolean|true|false|console|window|document)\b/, color: '#56b6c2', dark: '#61afef' },
-        { token: 'type', pattern: /\b[A-Z]\w*\b/, color: '#22863a', dark: '#8b949e' },
-        { token: 'number', pattern: /\b\d+\b/, color: '#61afef', dark: '#d19a66' },
-        { token: 'func', pattern: /\b[a-zA-Z_]\w*(?=\s*\()/, color: '#e5c07b', dark: '#98c379' },
-        { token: 'op', pattern: /(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/, color: '#d73a49', dark: '#e06c75' }
-    ],
-});
-Coax.addTools([{
-        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);
-                });
-            };
+    getLastLine() {
+        const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+            this.createLineWrap() : lastChild;
+        return {
+            lineWrap: lastLine,
+            codeWrap: lastLine.lastElementChild
+        };
+    }
+    
+    close() {
+        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        if (!lineWrap)
+            return;
+        lineWrap.completed = true;
+        //行结束前保存
+        this.lastLineString = this.lineString;
+        this.getLineToFill(lineWrap?.lastElementChild, this.lineString);
+        //一行结束，清空临时行文本
+        this.lineString = '';
+    }
+    
+    open() {
+        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        if (!lineWrap)
+            return;
+        lineWrap.completed = false;
+        //恢复最后一行字符串
+        (lineWrap?.lastElementChild).textContent = this.lineString = this.lastLineString;
+    }
+    
+    stream(str, forceClose = false) {
+        const { lineWrap, codeWrap } = this.getLastLine();
+        this.highlightedCodeEl.appendChild(lineWrap);
+        //汇集
+        this.source += str;
+        //如果没有遇到换行符号，也可以强制结束
+        if (forceClose || (str.startsWith('\n') || str.endsWith('\n'))) {
+            //标记完成
+            this.close();
+        }
+        else {
+            //插入文本
+            codeWrap.innerHTML += str;
+            //临时保存行文本
+            this.lineString += str;
         }
-    }]);
-customElements.define(`${NAMESPACE}-code`, Coax);
+        //滚动到最底部
+        this.autoScrollCode();
+    }
+}
+
+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 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);
+            });
+        };
+    }
+};
+
+export { Coax, copy, css, html, javascript, markdown, typescript };