@codady/coax 0.0.1

package/dist/coax.esm.min.js

@@ -0,0 +1,15 @@
+/*!
+ * @since Last modified: 2026-1-4 16:0:48
+ * @name Coax event management system.
+ * @version 0.0.1
+ * @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}
+ * @see {@link https://github.com/codady/coax/issues|github issues}
+ * @see {@link https://gitee.com/codady/coax/issues|Gitee issues}
+ * @see {@link https://www.npmjs.com/package/@codady/coax|NPM}
+ * @issue QQ Group No.1:952502085
+ * @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
+ */
+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:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/}]});

package/dist/coax.umd.js

@@ -0,0 +1,186 @@
+
+/*!
+ * @since Last modified: 2026-1-4 16:0:48
+ * @name Coax event management system.
+ * @version 0.0.1
+ * @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}
+ * @see {@link https://github.com/codady/coax/issues|github issues}
+ * @see {@link https://gitee.com/codady/coax/issues|Gitee issues}
+ * @see {@link https://www.npmjs.com/package/@codady/coax|NPM}
+ * @issue QQ Group No.1:952502085
+ * @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 (factory) {
+    typeof define === 'function' && define.amd ? define(factory) :
+    factory();
+})((function () { 'use strict';
+
+    class Coax extends HTMLElement {
+        // A static Map to hold the configuration for different languages
+        static languages = new Map();
+        // Raw code as text from the HTML content
+        rawCode;
+        constructor() {
+            super();
+            // Attach a Shadow DOM to the custom element
+            this.attachShadow({ mode: 'open' });
+            // Remove leading/trailing whitespace from the raw code content
+            this.rawCode = this.textContent?.replace(/^\s*\n|\n\s*$/g, '') || '';
+        }
+        
+        static register(name, { rules, theme = {}, internalCss = '', cssPrefix = '' }) {
+            // Store the language configuration in the static map
+            this.languages.set(name, { rules, theme, internalCss, cssPrefix });
+            // Render the highlighted code for all elements with the registered language
+            document.querySelectorAll('ax-code').forEach(el => {
+                if (el.getAttribute('lang') === name)
+                    el.render();
+            });
+        }
+        // Called when the element is connected to the DOM
+        connectedCallback() { this.render(); }
+        // Observed attributes for changes
+        static get observedAttributes() { return ['lang', 'height', 'max-height']; }
+        
+        attributeChangedCallback() {
+            this.render();
+        }
+        
+        render() {
+            // Get language name, fallback to 'js' if not provided
+            const lang = this.getAttribute('lang') || 'js', 
+            // Get the language configuration
+            config = Coax.languages.get(lang), 
+            // Default to language name if no prefix is set
+            cssPrefix = config?.cssPrefix || lang, height = this.getAttribute('height'), maxHeight = this.getAttribute('max-height');
+            let highlightedCode = '', dynamicStyles = '';
+            if (config) {
+                //Generate the highlighted HTML by applying the syntax rules
+                const combinedRegex = new RegExp(config.rules.map((r) => `(${r.reg.source})`).join('|'), 'g'), escaped = this.rawCode.replace(/[&<>]/g, m => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[m]));
+                // Replace code with highlighted syntax
+                highlightedCode = escaped.replace(combinedRegex, (match, ...args) => {
+                    const index = args.findIndex(val => val !== undefined);
+                    return index !== -1 && config.rules[index] ? `<span class="ax-${cssPrefix}-${config.rules[index].name}">${match}</span>` : match;
+                });
+                //Generate dynamic CSS classes for each syntax rule
+                // 为 rules 中的每一个 name 生成类似 .hl-name { color: var(--ax-code-name); }
+                dynamicStyles = config.rules.map((rule) => `
+                .ax-${cssPrefix}-${rule.name} { color: var(--ax-${cssPrefix}-${rule.name}); }
+            `).join('\n');
+            }
+            else {
+                // If no config, display raw code without highlighting
+                highlightedCode = this.rawCode;
+            }
+            //Generate CSS theme variables if a theme is provided
+            const themeVars = config?.theme
+                ? Object.entries(config.theme).map(([k, v]) => `--ax-${cssPrefix}-${k}: ${v};`).join('\n')
+                : '';
+            // Set the inner HTML of the shadow root, including styles and highlighted code
+            this.shadowRoot.innerHTML = `
+        <style>
+            :host { 
+                ${themeVars} 
+
+                font-size: var(--ax-code-fs,14px);
+                display: block; 
+                padding: var(--ax-code-p,1em);
+                box-sizing:border-box;
+                line-height: var(--ax-code-lh,1.5);
+                background-color:var(--ax-code-bg,rgba(0,0,0,0.02));
+                color:var(--ax-code-c,#333);
+                border:var(--ax-code-bw,1px) solid var(--ax-code-bc,rgba(0,0,0,0.08));
+                height:${height || 'var(--ax-code-h,auto)'};
+                max-height:${maxHeight || 'var(--ax-code-mh,500px)'};
+                overflow:auto;
+                transition: border-color 0.3s ease,color 0.3s ease;  
+                border-radius: var(--ax-code-r,9px);
+            }
+            pre,code{
+                font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace", "microsoft yahei", "Microsoft JhengHei", "Yu Mincho", "simsun";
+                margin:0;
+                padding:0;
+            }
+           
+            
+             
+            ${dynamicStyles}
+            
+            
+            ${config?.internalCss || ''}
+        </style>
+        <pre><code>${highlightedCode}</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 },
+            // 匹配标签名: <div, </div
+            { name: 'tag', reg: /&lt;\/?[a-zA-Z0-9]+/ },
+            // 匹配属性名: class=
+            { name: 'attr', reg: /[a-zA-Z-]+(?=\s*=\s*)/ },
+            // 匹配属性值: "value"
+            { name: 'string', reg: /(['"])(?:\\.|[^\\])*?\1/ },
+            // 匹配标签闭合: >, />
+            { name: 'bracket', reg: /\/?&gt;/ }
+        ],
+        //添加root变量：--ax-html-keyword
+        
+    });
+    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: /[{}();:]/ }
+        ],
+        //添加root变量：--ax-code-keyword
+        theme: {
+            'type': '#61afef', // 蓝色选择器
+            'keyword': '#d19a66', // 橙色属性名
+            'string': '#98c379', // 绿色属性值
+            'op': '#abb2bf' // 灰色符号
+        },
+        internalCss: `
+        .ax-css-string { color: var(--ax-code-string); }
+        .ax-css-string::first-letter { color: var(--ax-code-c); }
+    `
+    });
+    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: /(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/ }
+        ],
+        
+    });
+
+}));

package/dist/coax.umd.min.js

@@ -0,0 +1,15 @@
+/*!
+ * @since Last modified: 2026-1-4 16:0:48
+ * @name Coax event management system.
+ * @version 0.0.1
+ * @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}
+ * @see {@link https://github.com/codady/coax/issues|github issues}
+ * @see {@link https://gitee.com/codady/coax/issues|Gitee issues}
+ * @see {@link https://www.npmjs.com/package/@codady/coax|NPM}
+ * @issue QQ Group No.1:952502085
+ * @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:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/}]})});

package/examples/css-highlight.html

@@ -0,0 +1,62 @@
+<!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 {
+            --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;
+            /* 深灰：符号 */
+        }
+    </style>
+
+</head>
+
+<body>
+    <ax-code lang="css">
+        <code>
+/* Main Layout Style */
+.container > .header:hover {
+    display: flex;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px 1.5rem;
+    background-color: var(--primary-bg, #fff);
+    transition: all 300ms ease-in-out;
+    transform: rotate(5deg);
+}
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
+        </code>
+    </ax-code>
+
+
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+
+    </script>
+</body>
+
+</html>

package/examples/html-highlight.html

@@ -0,0 +1,43 @@
+<!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 {
+            --ax-html-comment: #6a737d;
+            --ax-html-doctype: #005cc5;
+            --ax-html-tag: #22863a;
+            --ax-html-attr: #6f42c1;
+            --ax-html-string: #032f62;
+            --ax-html-bracket: #24292e;
+        }
+    </style>
+
+</head>
+
+<body>
+    <ax-code lang="html">
+        <code>
+        &lt;!---->
+        &lt;!DOCTYPE html>
+        &lt;div class="container" id="main-view">
+            &lt;h1 title="Welcome">Hello World&lt;/h1>
+            &lt;p data-info="example">
+                This is a Web Component demo.
+            &lt;/p>
+            &lt;img src="logo.png" alt="Logo" />
+        &lt;/div>
+        </code>
+    </ax-code>
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+
+    </script>
+</body>
+
+</html>

package/examples/js-highlight.html

@@ -0,0 +1,64 @@
+<!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 {
+            --ax-js-keyword: #d73a49;
+            /* 鲜红色：用于 if, const, return */
+            --ax-js-string: #032f62;
+            /* 藏青色：字符串内容 */
+            --ax-js-func: #6f42c1;
+            /* 靓紫色：函数名调用 */
+            --ax-js-builtin: #e36209;
+            /* 亮橙色：console, Math, true */
+            --ax-js-number: #005cc5;
+            /* 蓝色：数字 */
+            --ax-js-op: #d73a49;
+            /* 红色：操作符，突出逻辑 */
+            --ax-js-comment: #6a737d;
+            /* 灰色：注释 */
+            --ax-js-punct: #24292e;
+            /* 深灰色：标点符号 */
+        }
+    </style>
+
+</head>
+
+<body>
+    <ax-code 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>
+
+
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+
+    </script>
+</body>
+
+</html>

package/examples/ts-highlight.html

@@ -0,0 +1,65 @@
+<!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 {
+            --ax-ts-keyword: #d73a49;
+            /* 红色 */
+            --ax-ts-string: #032f62;
+            /* 深蓝 */
+            --ax-ts-decorator: #e36209;
+            /* 橙色 */
+            --ax-ts-type: #22863a;
+            /* 绿色：类和接口 */
+            --ax-ts-builtin: #005cc5;
+            /* 蓝色：基本类型 */
+            --ax-ts-func: #6f42c1;
+            /* 紫色 */
+            --ax-ts-op: #d73a49;
+            --ax-ts-comment: #6a737d;
+        }
+    </style>
+
+</head>
+
+<body>
+    <ax-code lang="ts">
+        <code>
+@Component({
+  selector: 'app-user',
+  template: `<h1>{{ user.name }}</h1>`
+})
+export class UserProfile implements OnInit {
+    private userId: number = 101;
+    public user?: UserRecord;
+
+    constructor(private service: UserService) {}
+
+    async ngOnInit(): Promise<void> {
+        this.user = await this.service.getUser(this.userId);
+        console.log("User Loaded", this.user?.name);
+    }
+}
+
+type UserRecord = {
+    id: number;
+    name: string;
+    isAdmin: boolean;
+};
+        </code>
+    </ax-code>
+
+
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+
+    </script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@codady/coax",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "AXUI Development Team",
+  "license": "MIT",
+  "description": "Coax is a custom web component that enables syntax highlighting for various programming languages inside your HTML documents.",
+  "main": "./src/Coax.js",
+  "type": "module",
+  "types": "./src/coax.d.ts",
+  "directories": {
+    "doc": "docs"
+  },
+  "private": false,
+  "workspaces": [],
+  "files": [
+    "examples",
+    "docs",
+    "dist",
+    "src",
+    "package.json",
+    "rollup.config.js",
+    "tsconfig.json",
+    "script-mini.js",
+    "script-note.js",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@types/node": "^22.19.1",
+    "archiver": "^7.0.1",
+    "cross-env": "^7.0.3",
+    "rollup": "^4.18.1",
+    "rollup-plugin-replace": "^2.2.0",
+    "terser": "^5.27.2"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "mini": "node script-mini.js",
+    "push": "node script-push.js",
+    "all": "cross-env REPLACE=true npm run build && npm run css && npm run mini  &&  npm publish  && (npm run push || true)"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/codady/coax"
+  },
+  "extraRepositories": [
+    {
+      "type": "git",
+      "url": "https://gitee.com/codady/coax"
+    }
+  ],
+  "keywords": [
+    "javascript",
+    "es6",
+    "components",
+    "vnode",
+    "mvvm",
+    "html5",
+    "css3"
+  ],
+  "bugs": {
+    "url": "https://github.com/codady/coax/issues"
+  },
+  "homepage": "https://www.axui.cn",
+  "dependencies": {
+    "simple-git": "^3.27.0"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,68 @@
+/**
+ *  Last modified: 2026/01/04 16:00:42
+ */
+import resolve from '@rollup/plugin-node-resolve';
+import replace from 'rollup-plugin-replace';
+import note from './script-note.js';
+import json from '@rollup/plugin-json';
+
+const sharePlugins = [
+  {
+    name: "remove-comments",
+    transform(code) {
+      const cleanedCode = code.replace(/\/\*[\s\S]*?\*\//g, "");
+      return {
+        code: cleanedCode,
+        map: null,
+      };
+    },
+  },
+  process.env.REPLACE === 'true' && replace({
+    preventAssignment: true,
+    'console.log': '', 
+  }),
+  resolve(),
+  json(),
+].filter(Boolean);
+export default [
+  {
+    input: './src/Coax.js',
+    output:
+    {
+      dir: './dist/',
+      format: 'umd',
+      name: 'coax',
+      entryFileNames: 'coax.umd.js',
+      banner: note,
+    },
+    plugins: [
+      ...sharePlugins,
+    ],
+  },
+  {
+    input: './src/Coax.js',
+    output:
+    {
+      dir: './dist/',
+      format: 'es',
+      entryFileNames: 'coax.esm.js',
+      banner: note,
+    },
+    plugins: [
+      ...sharePlugins
+    ],
+  },
+  {
+    input: './src/Coax.js',
+    output:
+    {
+      dir: './dist/',
+      format: 'cjs',
+      entryFileNames: 'coax.cjs.js',
+      banner: note,
+    },
+    plugins: [
+      ...sharePlugins
+    ],
+  },
+]

package/script-mini.js

@@ -0,0 +1,43 @@
+
+/**
+ *  Last modified: 2026/01/04 16:02:23
+ */
+import { exec } from 'child_process';
+
+const runCommand = (command) => {
+  return new Promise((resolve, reject) => {
+    exec(command, (error, stdout, stderr) => {
+      if (error) {
+        reject(`exec error: ${error}`);
+        return;
+      }
+      if (stderr) {
+        reject(`stderr: ${stderr}`);
+        return;
+      }
+      resolve(stdout);
+    });
+  });
+};
+
+const minifyJsFile = (input, output) => {
+  const command = `npx terser ${input} -o ${output} -c arguments,dead_code,directives,arrows,drop_console -m keep_classnames=true,keep_fnames=true`;
+  return runCommand(command);
+};
+
+
+const minifyJs = async () => {
+  try {
+   
+    
+    await minifyJsFile('./dist/coax.umd.js', './dist/coax.umd.min.js');
+    await minifyJsFile('./dist/coax.esm.js', './dist/coax.esm.min.js');
+    await minifyJsFile('./dist/coax.cjs.js', './dist/coax.cjs.min.js');
+    
+    console.log('Minification complete.');
+  } catch (error) {
+    console.error(`Error during minification: ${error}`);
+  }
+};
+
+minifyJs();