@codady/coax 0.0.1 → 0.0.3

package/dist/coax.umd.min.js

@@ -1,7 +1,7 @@
 /*!
- * @since Last modified: 2026-1-4 16:0:48
+ * @since Last modified: 2026-1-12 9:47:5
  * @name Coax event management system.
- * @version 0.0.1
+ * @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}
@@ -12,4 +12,4 @@
  * @copyright This software supports the MIT License, allowing free learning and commercial use, but please retain the terms 'coax', 'Coax'  and 'COAX' within the software.
  * @license MIT license
  */
-!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";class Coax extends HTMLElement{static languages=new Map;rawCode;constructor(){super(),this.attachShadow({mode:"open"}),this.rawCode=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||""}static register(e,{rules:n,theme:t={},internalCss:a="",cssPrefix:r=""}){this.languages.set(e,{rules:n,theme:t,internalCss:a,cssPrefix:r}),document.querySelectorAll("ax-code").forEach(n=>{n.getAttribute("lang")===e&&n.render()})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height"]}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("lang")||"js",n=Coax.languages.get(e),t=n?.cssPrefix||e,a=this.getAttribute("height"),r=this.getAttribute("max-height");let s="",o="";if(n){const e=new RegExp(n.rules.map(e=>`(${e.reg.source})`).join("|"),"g");s=this.rawCode.replace(/[&<>]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[e])).replace(e,(e,...a)=>{const r=a.findIndex(e=>void 0!==e);return-1!==r&&n.rules[r]?`<span class="ax-${t}-${n.rules[r].name}">${e}</span>`:e}),o=n.rules.map(e=>`\n                .ax-${t}-${e.name} { color: var(--ax-${t}-${e.name}); }\n            `).join("\n")}else s=this.rawCode;const i=n?.theme?Object.entries(n.theme).map(([e,n])=>`--ax-${t}-${e}: ${n};`).join("\n"):"";this.shadowRoot.innerHTML=`\n        <style>\n            :host { \n                ${i} \n\n                font-size: var(--ax-code-fs,14px);\n                display: block; \n                padding: var(--ax-code-p,1em);\n                box-sizing:border-box;\n                line-height: var(--ax-code-lh,1.5);\n                background-color:var(--ax-code-bg,rgba(0,0,0,0.02));\n                color:var(--ax-code-c,#333);\n                border:var(--ax-code-bw,1px) solid var(--ax-code-bc,rgba(0,0,0,0.08));\n                height:${a||"var(--ax-code-h,auto)"};\n                max-height:${r||"var(--ax-code-mh,500px)"};\n                overflow:auto;\n                transition: border-color 0.3s ease,color 0.3s ease;  \n                border-radius: var(--ax-code-r,9px);\n            }\n            pre,code{\n                font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace", "microsoft yahei", "Microsoft JhengHei", "Yu Mincho", "simsun";\n                margin:0;\n                padding:0;\n            }\n           \n            \n             \n            ${o}\n            \n            \n            ${n?.internalCss||""}\n        </style>\n        <pre><code>${s}</code></pre>`}}customElements.define("ax-code",Coax),Coax.register("html",{rules:[{name:"comment",reg:/&lt;!--[\s\S]*?--&gt;/},{name:"doctype",reg:/&lt;!DOCTYPE[\s\S]*?&gt;/i},{name:"tag",reg:/&lt;\/?[a-zA-Z0-9]+/},{name:"attr",reg:/[a-zA-Z-]+(?=\s*=\s*)/},{name:"string",reg:/(['"])(?:\\.|[^\\])*?\1/},{name:"bracket",reg:/\/?&gt;/}]}),Coax.register("css",{rules:[{name:"comment",reg:/\/\*[\s\S]*?\*\//},{name:"value",reg:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/},{name:"func",reg:/[a-z-]+\(?=/},{name:"property",reg:/[a-z-]+(?=\s*:)/},{name:"selector",reg:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i},{name:"unit",reg:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/},{name:"number",reg:/\b\d+(\.\d+)?\b/},{name:"punct",reg:/[{}();:]/}],theme:{type:"#61afef",keyword:"#d19a66",string:"#98c379",op:"#abb2bf"},internalCss:"\n        .ax-css-string { color: var(--ax-code-string); }\n        .ax-css-string::first-letter { color: var(--ax-code-c); }\n    "}),Coax.register("js",{rules:[{name:"comment",reg:/\/\/[^\n]*|\/\*[\s\S]*?\*\//},{name:"string",reg:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/},{name:"keyword",reg:/\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/},{name:"builtin",reg:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise)\b/},{name:"number",reg:/\b\d+\b/},{name:"func",reg:/\b[a-zA-Z_]\w*(?=\s*\()/},{name:"op",reg:/[+\-*/%=<>!&|^~]+/}]}),Coax.register("ts",{rules:[{name:"comment",reg:/\/\/[^\n]*|\/\*[\s\S]*?\*\//},{name:"string",reg:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/},{name:"decorator",reg:/@[a-zA-Z_]\w*/},{name:"keyword",reg:/\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/},{name:"builtin",reg:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|boolean|true|false|console|window|document)\b/},{name:"type",reg:/\b[A-Z]\w*\b/},{name:"number",reg:/\b\d+\b/},{name:"func",reg:/\b[a-zA-Z_]\w*(?=\s*\()/},{name:"op",reg:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/}]})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).coax=t()}(this,function(){"use strict";const e="ax",typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(i=>{t?.onBeforeType?.(e);let r=0;const o=setInterval(()=>{if(r<e.length){const n=e.charAt(r),i=e.substring(0,r+1);t?.onDuringType?.(n,i),r++}else clearInterval(o),i(e),t?.onAfterType?.(e)},n)})},trim$1=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses$1=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)},getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),i=getDataType(t),r=i.includes("HTML")||"ShadowRoot"===i?t:document.querySelector(t),o=r&&r instanceof HTMLTemplateElement?r.content:r,a=null;if(e)if(n.includes("HTML"))a=e;else if("String"===n)try{a=(o||document).querySelector(e.trim())}catch{a=null}return a},createEl=(e,t,n)=>{let i=(e=e||"div").toUpperCase().trim(),r=document.createElement(i),o=getDataType(t);if(t&&"Object"===o)for(let e in t)t.hasOwnProperty(e)&&r.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===i)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(r,n),r},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},t="rep",createTools=n=>{const i=createEl("span",{class:`${e}-box-tools`}),renderFn=e=>{const n={},i=e.extendable?`<i ${t}="arrow"></i>`:"",r=(e.icon?`<i ${t}="icon">${e.icon}</i>`:"")+(e.disk?`<i ${t}="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i ${t}="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i ${t}="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i ${t}="label">${e.label}</i>`:"")+i;e.title&&(n.title=e.title),e.focusable&&(n.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(n,e.attrs),r),e.iconEl=e.wrapEl.querySelector(`[${t}="icon"]`),e.cubeEl=e.wrapEl.querySelector(`[${t}="cube"]`),e.diskEl=e.wrapEl.querySelector(`[${t}="disk"]`),e.imageEl=e.wrapEl.querySelector(`[${t}="image"]`),e.labelEl=e.wrapEl.querySelector(`[${t}="label"]`),!isEmpty(e.classes)&&((e,t)=>{const n=getEl(e),i=parseClasses$1(t);n&&0!==i.length&&i.forEach(e=>{n.classList.add(e)})})(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let e of n)renderFn(e),i.appendChild(e.wrapEl),e?.action?.(e);return i};class CoaxElem extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightedCodeEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;alias;lineString;speed;autoScroll;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.lang="plain",this.alias="Plain Text",this.lineString="",this.speed=5,this.autoScroll=!0,this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--${e}-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--${e}-code-background-color,var(--background));\n                    color:var(--${e}-code-color,var(--color-code));\n                    border:var(--${e}-code-border-width,var(--border-width)) var(--${e}-code-border-style,var(--border-style)) var(--${e}-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--${e}-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--${e}-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--${e}-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--${e}-code-padding,var(--padding)) 0;\n                    height:var(--${e}-code-height,var(--height));\n                    max-height:var(--${e}-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--${e}-code-padding,var(--padding));\n                    line-height: var(--${e}-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--${e}-code-index-width,2em);\n                    margin-inline-end:var(--${e}-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .${e}-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight-code"></code></pre>\n            </div>\n        `,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.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 e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){CoaxElem.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses$1(n),t=CoaxElem.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(t,n){if(!(n=n||CoaxElem.languages.get(this.lang)))return t;const i=this.getCssPrefix(n),r=new RegExp(n.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return t.replace(r,(t,...r)=>{const o=r.findIndex(e=>void 0!==e);return-1!==o&&n.rules[o]?`<span class="${e}-${i}-${n.rules[o].token}">${t}</span>`:t})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightedCodeEl.children.length;else{n=(t||this.highlightedCodeEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||CoaxElem.languages.get(this.lang);let i=this.getHighLightString(t,n);e.innerHTML=i}async highlight(e){const t=CoaxElem.languages.get(this.lang),n=this.highlightedCodeEl.children.length,i=e?e.split("\n"):[];if(this.updateName(t),!i.length)return!0;for(let[e,r]of i.entries()){if(!r.trim()&&this.hasAttribute("sanitized"))continue;const i=this.createLineWrap(e,n),o=i.lastElementChild;this.closeLine(i),this.hasAttribute("speed")?(this.highlightedCodeEl.appendChild(i),await typeWriter(r,{speed:this.speed,onDuringType:(e,t)=>{o.innerHTML=t}}),this.getLineToFill(o,r,t)):(this.getLineToFill(o,r,t),this.highlightedCodeEl.appendChild(i))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const t=CoaxElem.languages.get(this.lang);if(!t)return;let n=this.getCssPrefix(t),i=t.rules.map(t=>`\n                .${e}-${n}-${t.token} { color: var(--${e}-${n}-${t.token}${t.light?","+t.light:""});}`).join("\n"),r="",o="";r+=':host([scheme="dark"]){',r+=t.rules.map(t=>"\n                "+(t.light?`\n                    .${e}-${n}-${t.token} {color: var(--${e}-${n}-${t.token},${t.dark});}`:"")).join("\n"),r+="}",o="@media (prefers-color-scheme: dark){\n                                :host{\n            ",o+=t.rules.map(t=>`\n                ${t.light?`\n                    .${e}-${n}-${t.token} { color: var(--${e}-${n}-${t.token},${t.dark}); }`:""} `).join("\n"),o+="}",this.dynamicStylesEl.textContent=i+r+o,t?.themeStyles&&(this.themeStylesEl.textContent=t.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,requestAnimationFrame(async()=>{this.clear(),this.injectThemeStyles(),await this.highlight(e),this._renderQueued=!1}))}clear(){this.highlightedCodeEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getActiveCodeWrap(){const e=this.highlightedCodeEl.lastElementChild,t=!e||this.highlightedCodeEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}closeLine(e){(e=e||this.highlightedCodeEl.lastElementChild)&&(e.completed=!0)}openLine(e){(e=e||this.highlightedCodeEl.lastElementChild)&&(e.completed=!1)}stream(e,t=!1){const{lineWrap:n,codeWrap:i}=this.getActiveCodeWrap();this.highlightedCodeEl.appendChild(n),this.source+=e,t&&this.closeLine(n),e.startsWith("\n")||e.startsWith("\r")?(this.closeLine(n),this.getLineToFill(i,this.lineString),this.lineString=""):(i.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}const trim=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},wrap=(e,t,n=!1,i)=>{const r=i?.size||"1em",o=i?.color||"currentColor",a=i?.thickness||2,l=i?.classes?(e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)})(i.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${r}" viewBox="0 0 24 24" fill="none" stroke="${o}"\n          stroke-width="${a}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?((e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`)(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>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,!1,e),n={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}},i=CoaxElem;return i.register("css",{alias:"CSS",rules:[{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"}]}),i.register("html",{alias:"HTML",rules:[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}]}),i.register("js",{alias:"Javascript",rules:[{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"}]}),i.register("ts",{alias:"Typescript",rules:[{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"}]}),i.register("md",{alias:"Markdown",rules:[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}]}),i.addTools([n]),customElements.define(`${e}-code`,i),i});

package/examples/append-highlight.html

@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {}
+    </style>
+
+</head>
+
+<body>
+    <ax-code streaming tools="copy" indexed lang="js">
+        <code>
+/**
+ * Simple animation function
+ */
+async function animate(element, duration) {
+    const start = Date.now();
+    
+    if (!element) return false;
+
+    console.log("Animation started...");
+
+    while (Date.now() - start < duration) {
+        let progress = (Date.now() - start) / duration;
+        element.style.opacity = Math.min(progress, 1);
+        await Promise.resolve();
+    }
+    
+    return true;
+}
+        </code>
+    </ax-code>
+
+    <button id="append01">尾部增加片段1</button>
+    <button id="append02">尾部增加片段2</button>
+    <button id="append03">尾部增加片段3</button>
+
+
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+
+        let append01 = document.querySelector('#append01');
+        let append02 = document.querySelector('#append02');
+        let append03 = document.querySelector('#append03');
+        let code = document.querySelector('ax-code');
+        append01.onclick = () => {
+            code.append(`
+function calculateCircleArea(radius) {
+    if (typeof radius !== 'number' || radius <= 0) {
+        throw new Error('Radius must be a positive number');
+    }
+    return Math.PI * radius * radius;
+}`);
+        }
+        append02.onclick = () => {
+            code.append(`
+function calculateCircleCircumference(radius) {
+    if (typeof radius !== 'number' || radius <= 0) {
+        throw new Error('Radius must be a positive number');
+    }
+    return 2 * Math.PI * radius;
+}`);
+        }
+
+        append03.onclick = () => {
+            code.append(`
+while (Date.now() - start < duration) {
+        let progress = (Date.now() - start) / duration;
+        element.style.opacity = Math.min(progress, 1);
+        await Promise.resolve();
+    }`);
+        }
+    </script>
+</body>
+
+</html>

package/examples/color-selector.html

@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Coax 语法高亮配色增强实验室</title>
+    <style>
+        :root {
+            --sidebar-width: 380px;
+            --primary-color: #007aff;
+        }
+
+        body {
+            display: flex;
+            height: 100vh;
+            margin: 0;
+            background: #f5f5f7;
+            color: #1d1d1f;
+        }
+
+        /* 布局 */
+        #sidebar {
+            width: var(--sidebar-width);
+            background: white;
+            border-right: 1px solid #d2d2d7;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #preview-area {
+            flex: 1;
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            overflow-y: auto;
+            transition: background 0.3s;
+        }
+
+        #preview-area.dark {
+            background: #121212;
+        }
+
+        /* 侧边栏控件 */
+        .sidebar-header {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
+        }
+
+        .lang-tabs {
+            display: flex;
+            background: #eee;
+            padding: 4px;
+            border-radius: 8px;
+            margin: 10px 20px;
+        }
+
+        .tab-btn {
+            flex: 1;
+            border: none;
+            padding: 8px;
+            border-radius: 6px;
+            cursor: pointer;
+            background: transparent;
+            font-size: 13px;
+        }
+
+        .tab-btn.active {
+            background: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            font-weight: bold;
+        }
+
+        #controls-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0 20px 20px;
+        }
+
+        .control-item {
+            margin-top: 15px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid #f5f5f5;
+        }
+
+        .control-item label {
+            display: block;
+            font-size: 12px;
+            font-weight: 600;
+            color: #86868b;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+        }
+
+        .color-row {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 8px;
+        }
+
+        .color-row span {
+            font-size: 11px;
+            width: 40px;
+            color: #86868b;
+        }
+
+        .picker-wrapper {
+            display: flex;
+            align-items: center;
+            background: #f5f5f7;
+            padding: 4px 8px;
+            border-radius: 6px;
+            flex: 1;
+            cursor: pointer;
+            border: 1px solid transparent;
+        }
+
+        .picker-wrapper:hover {
+            border-color: #d2d2d7;
+        }
+
+        input[type="color"] {
+            border: none;
+            width: 24px;
+            height: 24px;
+            background: none;
+            cursor: pointer;
+            padding: 0;
+        }
+
+        .hex-code {
+            font-family: monospace;
+            font-size: 13px;
+            margin-left: 8px;
+            flex: 1;
+            color: #1d1d1f;
+        }
+
+        .copy-btn {
+            border: none;
+            background: #eee;
+            font-size: 10px;
+            padding: 4px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+        }
+
+        .copy-btn:hover {
+            background: #e2e2e7;
+        }
+
+        /* 预览代码盒 */
+        .code-container {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+            padding: 24px;
+            position: relative;
+            transition: 0.3s;
+            border: 1px solid #d2d2d7;
+        }
+
+        .dark .code-container {
+            background: #1e1e1e;
+            border-color: #333;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+        }
+
+        .mode-toggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            padding: 12px 24px;
+            border-radius: 30px;
+            border: none;
+            background: var(--primary-color);
+            color: white;
+            cursor: pointer;
+            font-weight: 600;
+            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
+        }
+
+        /* 高亮 Token 占位符（通过动态 CSS 变量渲染） */
+    </style>
+</head>
+
+<body>
+
+    <div id="sidebar">
+        <div class="sidebar-header">
+            <h2 style="margin:0; font-size: 18px;">Coax 配色实验室</h2>
+            <p style="font-size: 12px; color: #86868b;">配置各语言 Token，点击 HEX 即可复制</p>
+        </div>
+
+        <div class="lang-tabs" id="lang-tabs">
+            <button class="tab-btn active" onclick="switchLang('html')">HTML</button>
+            <button class="tab-btn" onclick="switchLang('js')">JS</button>
+            <button class="tab-btn" onclick="switchLang('ts')">TS</button>
+            <button class="tab-btn" onclick="switchLang('css')">CSS</button>
+        </div>
+
+        <div id="controls-list"></div>
+    </div>
+
+    <div id="preview-area" id="preview-area">
+        <div class="code-container">
+            <ax-code></ax-code>
+        </div>
+        <button id="copy">复制主题样式</button>
+        <button id="reset">恢复原始样式</button>
+    </div>
+
+    <button class="mode-toggle" onclick="toggleDarkMode()">切换深色模式 (Current: Light)</button>
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script>
+        // 1. 核心数据结构：各语言的配置
+        const config = {
+            html: {
+                tokens: ['doctype', 'tag', 'attr', 'string', 'comment', 'bracket'],
+                // 包含 DOCTYPE, 注释, 标签, 属性, 字符串, 闭合括号
+                code: `<!--详情页面-->\n<!DOCTYPE html>\n<div class="main-wrapper" data-active="true">\n  <h1 id="title">Coax Editor</h1>\n  <img src="./assets/logo.svg" alt="Coax Logo" />\n  <br />\n</div>`,
+                colors: {
+                    doctype: { light: '#6a737d', dark: '#8b949e' }, // 灰度处理，弱化非结构信息
+                    tag: { light: '#22863a', dark: '#7ee787' },     // 绿色（标签）
+                    attr: { light: '#6f42c1', dark: '#d2a8ff' },    // 紫色（属性）
+                    string: { light: '#032f62', dark: '#a5d6ff' },  // 蓝色（值）
+                    comment: { light: '#999999', dark: '#6e7681' }, // 弱灰（注释）
+                    bracket: { light: '#24292e', dark: '#c9d1d9' }  // 默认色（括号）
+                }
+            },
+            js: {
+                tokens: ['keyword', 'func', 'string', 'builtin', 'number', 'comment', 'op'],
+                // 包含 关键字, 函数调用, 字符串, 内置对象, 数字, 注释, 运算符
+                code: `// 这是一个 JS 逻辑演示\nasync function fetchData(id) {\n  const API = "https://api.coax.com/v1";\n  let count = 2026 + id;\n  if (count > 0) {\n    console.log(\`Fetching \${id}...\`);\n    return Math.random() * count;\n  }\n  return null;\n}`,
+                colors: {
+                    keyword: { light: '#d73a49', dark: '#ff7b72' }, // 鲜红/浅粉（逻辑控制）
+                    func: { light: '#6f42c1', dark: '#d2a8ff' },    // 紫色（定义与调用）
+                    string: { light: '#032f62', dark: '#98c379' },  // 绿色（暗色下绿色字符串更护眼）
+                    builtin: { light: '#e36209', dark: '#ffa657' }, // 橙色（内置变量）
+                    number: { light: '#005cc5', dark: '#79c0ff' },  // 蓝色（数值）
+                    comment: { light: '#6a737d', dark: '#8b949e' }, // 灰色（注释）
+                    op: { light: '#069598', dark: '#56b6c2'}       // 青色（将运算符与关键字区分开）
+                }
+            },
+            ts: {
+                tokens: ['type', 'decorator', 'keyword', 'func', 'string', 'builtin', 'number', 'comment', 'op'],
+                // 包含 类型声明, 装饰器, 关键字, 函数, 字符串, 内置, 数字, 注释, 运算符
+                code: `/** TypeScript 装饰器与类型演示 **/\n@Module({ providers: [] })\nexport class User<T> extends Base {\n  readonly version: number = 1.0;\n  private name: string = "Gemini";\n\n  public async save(data: T): Promise<boolean> {\n    const status = await this.exec();\n    return !!status;\n  }\n}`,
+                colors: {
+                    keyword: { light: '#d73a49', dark: '#ff7b72' },
+                    func: { light: '#6f42c1', dark: '#d2a8ff' },
+                    type: { light: '#005cc5', dark: '#79c0ff' },     // 蓝色（TS 核心：类型）
+                    builtin: { light: '#e36209', dark: '#ffa657' },
+                    decorator: { light: '#953800', dark: '#ffa657' },// 棕/橙（装饰器）
+                    number: { light: '#005cc5', dark: '#79c0ff' },
+                    string: { light: '#032f62', dark: '#98c379' },
+                    comment: { light: '#6a737d', dark: '#8b949e' },
+                    op: { light: '#089ba6', dark: '#79c0ff'}
+                }
+            },
+            css: {
+                tokens: ['selector', 'property', 'value', 'unit', 'comment', 'number', 'func', 'punct'],
+                // 包含 选择器, 属性, 值, 单位, 注释, 数字, 函数, 标点
+                code: `/* 响应式样式 */\n@media (max-width: 768px) {\n  .container > #main:hover {\n    background: rgba(0, 0, 0, 0.05);\n    margin: 10px 2rem;\n    width: calc(100% - 20px);\n    font-family: "Consolas", sans-serif;\n  }\n}`,
+                colors: {
+                    selector: { light: '#22863a', dark: '#7ee787' }, // 绿色（CSS 选择器）
+                    property: { light: '#005cc5', dark: '#79c0ff' }, // 蓝色（属性名）
+                    value: { light: '#032f62', dark: '#a5d6ff' },    // 浅蓝/深蓝（属性值）
+                    unit: { light: '#d73a49', dark: '#ff7b72' },     // 红色（单位 px, rem）
+                    number: { light: '#d73a49', dark: '#ff7b72' },   // 红色（纯数字）
+                    func: { light: '#6f42c1', dark: '#d2a8ff' },     // 紫色（calc, rgba）
+                    comment: { light: '#6a737d', dark: '#8b949e' },
+                    punct: { light: '#24292e', dark: '#c9d1d9' }     // 默认/白（分号、括号）
+                }
+            }
+        };
+
+        let currentLang = 'html';
+        let isDark = false;
+        let codeEl = document.querySelector('ax-code');
+        let copyEl = document.querySelector('#copy');
+        let resetEl = document.querySelector('#reset');
+        let currentStyle = '';
+
+        // 2. 初始化渲染
+        function init() {
+            renderControls();
+            renderCode();
+            updateDynamicStyles();
+        }
+
+        // 切换语言标签
+        function switchLang(lang) {
+            currentLang = lang;
+            document.querySelectorAll('.tab-btn').forEach(btn => {
+                btn.classList.toggle('active', btn.innerText.toLowerCase() === lang);
+            });
+            renderControls();
+            renderCode();
+            updateDynamicStyles();
+        }
+
+        // 渲染左侧色值控件
+        function renderControls() {
+            const list = document.getElementById('controls-list');
+            list.innerHTML = '';
+            const langConfig = config[currentLang];
+
+            langConfig.tokens.forEach(token => {
+                const item = document.createElement('div');
+                item.className = 'control-item';
+                const colors = langConfig.colors[token];
+
+                item.innerHTML = `
+                <label>${token}</label>
+                ${renderColorRow(token, 'light', colors.light)}
+                ${renderColorRow(token, 'dark', colors.dark)}
+            `;
+                list.appendChild(item);
+            });
+        }
+
+        function renderColorRow(token, mode, value) {
+            return `
+            <div class="color-row">
+                <span>${mode.toLowerCase()}</span>
+                <div class="picker-wrapper">
+                    <input type="color" value="${value}" oninput="updateTokenColor('${token}', '${mode}', this.value)">
+                    <div class="hex-code" onclick="copyHex(this.previousElementSibling.value)">${value.toLowerCase()}</div>
+                    <button class="copy-btn" onclick="copyHex(this.previousElementSibling.previousElementSibling.value)">COPY</button>
+                </div>
+            </div>
+        `;
+        }
+
+        // 3. 颜色更新逻辑
+        function updateTokenColor(token, mode, value) {
+            config[currentLang].colors[token][mode] = value;
+            // 实时更新文字显示，不重新渲染整个列表以免失去焦点
+            event.target.nextElementSibling.innerText = value.toLowerCase();
+            updateDynamicStyles();
+        }
+
+        // 4. 复制功能
+        async function copyHex(hex) {
+            try {
+                await navigator.clipboard.writeText(hex.toLowerCase());
+                alert('色值已复制: ' + hex.toLowerCase());
+            } catch (err) {
+                console.error('无法复制', err);
+            }
+        }
+
+        // 5. 动态生成 CSS 变量
+        function updateDynamicStyles() {
+            currentStyle = ':root{\n';
+            const langConfig = config[currentLang];
+
+            langConfig.tokens.forEach(token => {
+                const color = isDark ? langConfig.colors[token].dark : langConfig.colors[token].light;
+
+                currentStyle += `--ax-${currentLang}-${token}: ${color};\n`;
+
+            });
+            currentStyle += '}';
+
+            let styleTag = document.getElementById('dynamic-colors');
+            if (!styleTag) {
+                styleTag = document.createElement('style');
+                styleTag.id = 'dynamic-colors';
+                document.head.appendChild(styleTag);
+            }
+            styleTag.textContent = currentStyle;
+        }
+
+        // 6. 简单的代码预览生成（模拟高亮逻辑）
+        function renderCode() {
+            const langConfig = config[currentLang];
+            let html = langConfig.code
+                .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+            codeEl.replaceCode(html);
+            codeEl.setAttribute('lang', currentLang);
+        }
+
+        function toggleDarkMode() {
+            isDark = !isDark;
+            document.getElementById('preview-area').classList.toggle('dark', isDark);
+            document.querySelector('.mode-toggle').innerText = `切换深色模式 (Current: ${isDark ? 'Dark' : 'Light'})`;
+            updateDynamicStyles();
+            renderControls(); // 重新渲染列表以更新文字状态（可选）
+            isDark ? codeEl.setAttribute('scheme', 'dark') : codeEl.removeAttribute('scheme');
+        }
+
+        copyEl.onclick = () => {
+            navigator.clipboard.writeText(currentStyle)
+                .then(() => {
+                    alert('已经复制到剪切板，可粘贴到文本文件当中');
+                })
+        }
+        resetEl.onclick = () => {
+            document.querySelector('#dynamic-colors')?.remove();
+        }
+
+        init();
+    </script>
+
+</body>
+
+</html>

package/examples/css-highlight.html

@@ -7,24 +7,7 @@
     <title>Coax 代码高亮插件</title>
     <style>
         /* 白天模式变量 */
-        :root {
-            --ax-css-selector: #6f42c1;
-            /* 紫色：选择器最显眼 */
-            --ax-css-property: #005cc5;
-            /* 蓝色：属性名 */
-            --ax-css-string: #22863a;
-            /* 绿色：内容字符串 */
-            --ax-css-unit: #d73a49;
-            /* 红色：单位（如 px, rem） */
-            --ax-css-number: #005cc5;
-            /* 蓝色：数值 */
-            --ax-css-func: #e36209;
-            /* 橙色：函数如 var(), rgba() */
-            --ax-css-comment: #6a737d;
-            /* 灰色：注释 */
-            --ax-css-punct: #24292e;
-            /* 深灰：符号 */
-        }
+        :root {}
     </style>
 
 </head>
@@ -56,6 +39,7 @@
     <script src="../dist/coax.umd.js" type='text/javascript'></script>
     <script type='text/javascript'>
 
+    
     </script>
 </body>