@codady/coax 0.0.2 → 0.0.3

package/dist/coax.umd.js

@@ -1,8 +1,8 @@
 
 /*!
- * @since Last modified: 2026-1-8 16:55:44
+ * @since Last modified: 2026-1-12 9:47:5
  * @name Coax event management system.
- * @version 0.0.2
+ * @version 0.0.3
  * @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.
  * @see {@link https://coax.axui.cn|Official website}
@@ -14,10 +14,80 @@
  * @license MIT license
  */
 
-(function (factory) {
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
     typeof define === 'function' && define.amd ? define(factory) :
-    factory();
-})((function () { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.coax = factory());
+})(this, (function () { 'use strict';
+
+    const NAMESPACE = 'ax';
+
+    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 getDataType = (obj) => {
         let tmp = Object.prototype.toString.call(obj).slice(8, -1), result;
@@ -161,48 +231,6 @@
 
     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) {
@@ -244,72 +272,7 @@
         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 {
+    class CoaxElem extends HTMLElement {
         // A static Map to hold the configuration for different languages
         static languages = new Map();
         static tools = [];
@@ -320,9 +283,13 @@
         dynamicStylesEl;
         highlightedCodeEl;
         headerEl;
-        nameEl;
-        toolsEl;
+        codeNameEl;
+        codeToolsEl;
+        codeBodyEl;
         alias;
+        lineString;
+        speed;
+        autoScroll;
         constructor() {
             super();
             // Attach a Shadow DOM to the custom element
@@ -331,6 +298,9 @@
             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. 初始化基础骨架
             this.shadowRoot.innerHTML = `
             <style id="base-styles">
@@ -348,16 +318,16 @@
                     --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{
@@ -365,8 +335,8 @@
                         --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 {
@@ -376,7 +346,6 @@
                     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));
                 }
@@ -393,6 +362,7 @@
                     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";
@@ -408,6 +378,9 @@
                         flex:auto;
                     }
                 }
+                code>div>div:empty:before{
+                    content:' ';
+                }
                 :host([indexed]) code>div:before{
                     display:inline-flex;
                     color:var(--color-index);
@@ -415,13 +388,13 @@
                     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{
@@ -466,9 +439,15 @@
             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;
+                // 检测是否是用户手动滚动
+                this.autoScroll = !flag;
+            });
         }
         
         static register(name, config) {
@@ -477,17 +456,17 @@
         }
         //注册工具箱
         static addTools(items) {
-            Coax.tools = items;
+            CoaxElem.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
@@ -495,7 +474,7 @@
             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)
@@ -503,19 +482,18 @@
             if (name === 'height' || name === 'max-height') {
                 this.updateStyleByRegExp(name, newVal);
             }
-            else if (name === 'lang') {
+            if (name === 'speed') {
+                this.speed = ~~(!!newVal);
+            }
+            if (name === 'lang') {
                 //更新当前语言
                 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 = '';
-                const tools = parseClasses$1(newVal), toolItems = Coax.tools.filter(k => tools.includes(k.name));
+                    this.codeToolsEl.innerHTML = '';
+                const tools = parseClasses$1(newVal), toolItems = CoaxElem.tools.filter(k => tools.includes(k.name));
                 if (!toolItems.length)
                     return;
                 this.mountTools(toolItems);
@@ -532,36 +510,84 @@
         getCssPrefix(config) {
             return (config?.cssPrefix || this.lang).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
         }
+        getHighLightString(string, config) {
+            config = config || CoaxElem.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 || CoaxElem.languages.get(this.lang);
+            let highlightedLine = this.getHighLightString(line, config);
+            // 将高亮后的内容填充到 div 中
+            codeWrap.innerHTML = highlightedLine;
+        }
+        ;
         
-        highlight(newCode) {
-            const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
+        async highlight(newCode) {
+            const config = CoaxElem.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;
+                //标记完成
+                this.closeLine(lineWrap);
+                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);
+            const config = CoaxElem.languages.get(this.lang);
             if (!config)
                 return;
             // Get language name, fallback to 'js' if not provided
@@ -569,17 +595,17 @@
             //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
@@ -589,123 +615,283 @@
             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;
             });
         }
+        clear() {
+            this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+        }
         
-        replaceCode(newCode) {
-            // 更新原始代码为新代码
-            this.source = newCode;
-            //清空
-            this.highlightedCodeEl.innerHTML = '';
-            this.highlight(newCode);
+        async replace(newCode) {
+            this.clear();
+            await this.highlight(newCode);
         }
         
-        appendCode(newCode) {
+        async append(newCode) {
             // 将新的代码追加到现有代码末尾
             this.source += `\n${newCode}`;
             // 高亮新的部分
-            this.highlight(newCode);
+            await this.highlight(newCode);
+        }
+        getActiveCodeWrap() {
+            const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+                this.createLineWrap() : lastChild;
+            return {
+                lineWrap: lastLine,
+                codeWrap: lastLine.lastElementChild
+            };
+        }
+        closeLine(lineWrap) {
+            lineWrap = lineWrap || this.highlightedCodeEl.lastElementChild;
+            lineWrap && (lineWrap.completed = true);
+        }
+        openLine(lineWrap) {
+            lineWrap = lineWrap || this.highlightedCodeEl.lastElementChild;
+            lineWrap && (lineWrap.completed = false);
+        }
+        stream(str, forceEnd = false) {
+            const { lineWrap, codeWrap } = this.getActiveCodeWrap();
+            this.highlightedCodeEl.appendChild(lineWrap);
+            //汇集
+            this.source += str;
+            //如果没有遇到换行符号，也可以强制结束
+            forceEnd && this.closeLine(lineWrap);
+            if (str.startsWith('\n') || str.startsWith('\r')) {
+                //标记完成
+                this.closeLine(lineWrap);
+                //渲染
+                this.getLineToFill(codeWrap, this.lineString);
+                //一行结束，清空临时行文本
+                this.lineString = '';
+            }
+            else {
+                //插入文本
+                codeWrap.innerHTML += str;
+                //临时保存行文本
+                this.lineString += str;
+            }
+            //滚动到最底部
+            this.autoScrollCode();
         }
     }
+
+    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', {
-        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' }
-        ],
+        alias: 'CSS',
+        rules: css,
         
     });
     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' }
-        ],
+        alias: 'HTML',
+        rules: html,
     });
     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' }
-        ],
+        rules: javascript,
     });
     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' }
-        ],
+        alias: 'Typescript',
+        rules: typescript,
     });
-    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);
-                    });
-                };
-            }
-        }]);
+    Coax.register('md', {
+        alias: 'Markdown',
+        rules: markdown
+    });
+    //注册工具箱
+    Coax.addTools([copy]);
     customElements.define(`${NAMESPACE}-code`, Coax);
 
+    return Coax;
+
 }));