@codady/coax 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# Changelog
+
+All changes to Coax including new features, updates, and removals are documented here.
+
+## [v0.0.1] - 2026-1-4
+
+### Distribution Files
+- **JS**: https://unpkg.com/@codady/coax@0.0.1/dist/coax.umd.js
+
+### Changes
+
+#### Fixed
+- Null
+
+#### Added
+- Publish the first version.
+
+#### Removed
+- Null

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2025 AXUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Please keep our copyright information. If you have any questions, 
+please contact us: 3217728223@qq.com.

package/README.md

@@ -0,0 +1,236 @@
+
+# Coax: A Code Syntax Highlighter for Web Components
+
+## Overview
+
+**Coax** is a custom web component that enables syntax highlighting for various programming languages inside your HTML documents. It allows you to easily embed highlighted code using web standards (Web Components) and modern CSS. This plugin automatically highlights code using regular expressions and supports dynamic theming and customization.
+
+---
+
+## Features
+
+- **Custom Web Component**: Easily use `<ax-code>` to render syntax-highlighted code.
+- **Language Support**: Register custom language configurations for syntax highlighting (e.g., `HTML`, `CSS`, `JavaScript`, `TypeScript`).
+- **Custom Themes**: Add language-specific themes using CSS variables for customization.
+- **Shadow DOM**: Isolated styling and functionality using the Shadow DOM for better encapsulation.
+- **Dynamic CSS**: Dynamically generate styles for each language based on rules.
+
+---
+
+## Installation
+
+Simply include the `Coax` JavaScript file in your project, or use the module system if you're using a build tool like Webpack or Rollup.
+
+### Direct inclusion (via script tag)
+
+```html
+<script src="path/to/coax.js"></script>
+````
+
+---
+
+## Usage
+
+To use the Coax code highlighting component, follow these steps:
+
+### 1. Define the `<ax-code>` element
+
+```html
+<ax-code lang="js">
+  // Your JavaScript code here
+</ax-code>
+
+<ax-code lang="css">
+  /* Your CSS code here */
+</ax-code>
+
+<ax-code lang="html">
+  <!-- Your HTML code here -->
+</ax-code>
+```
+
+### 2. Register Language Configurations
+
+You can register languages with their syntax rules and themes using the `Coax.register` method.
+
+```javascript
+Coax.register('html', {
+  rules: [
+    { name: 'comment', reg: /&lt;!--[\s\S]*?--&gt;/ },
+    { name: 'tag', reg: /&lt;\/?[a-zA-Z0-9]+/ },
+    { name: 'attr', reg: /[a-zA-Z-]+(?=\s*=\s*)/ },
+    { name: 'string', reg: /(['"])(?:\\.|[^\\])*?\1/ },
+  ],
+  theme: {
+    'tag': '#e06c75', // red
+    'attr': '#d19a66', // orange
+    'string': '#98c379', // green
+  }
+});
+```
+
+### 3. Customization
+
+You can customize the code highlighting by modifying the language's rules, theme colors, or internal CSS using the `theme`, `internalCss`, and `cssPrefix` properties.
+
+Example:
+
+```javascript
+Coax.register('css', {
+  rules: [
+    { name: 'comment', reg: /\/\*[\s\S]*?\*\// },
+    { 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)/ },
+  ],
+  theme: {
+    'keyword': '#61afef', // blue
+    'string': '#98c379', // green
+    'op': '#abb2bf', // gray
+  },
+  internalCss: `
+    .ax-css-string { color: var(--ax-code-string); }
+  `
+});
+```
+
+### 4. Optional Attributes
+
+You can customize the code block's height and max height:
+
+```html
+<ax-code lang="js" height="200px" max-height="400px">
+  const x = 10;
+</ax-code>
+```
+
+---
+
+## Development
+
+If you'd like to extend or modify the plugin, the source code is available for you to contribute or adapt.
+
+* **Clone the repository**: `git clone https://github.com/your-repository`
+* **Run build tools** (e.g., Webpack, Babel) for production optimization.
+
+---
+
+## License
+
+MIT License. Feel free to use and modify it for your projects.
+
+---
+
+# 中文文档
+
+## 概述
+
+**Coax** 是一个自定义 Web 组件，可以在 HTML 文档中嵌入高亮的代码。它允许您使用现代 Web 标准（Web 组件）和 CSS 来轻松实现代码高亮。该插件通过正则表达式自动高亮代码，并支持动态主题和自定义设置。
+
+---
+
+## 特性
+
+* **自定义 Web 组件**：使用 `<ax-code>` 标签轻松渲染代码高亮。
+* **语言支持**：为每种编程语言注册自定义语法高亮配置（例如，`HTML`，`CSS`，`JavaScript`，`TypeScript`）。
+* **自定义主题**：使用 CSS 变量添加语言特定的主题，支持个性化定制。
+* **Shadow DOM**：使用 Shadow DOM 实现样式和功能的隔离。
+* **动态 CSS**：基于规则动态生成每种语言的样式。
+
+---
+
+## 安装
+
+只需将 `Coax` 的 JavaScript 文件包含到您的项目中，或使用构建工具（如 Webpack 或 Rollup）进行模块化引入。
+
+### 直接引入（通过 `<script>` 标签）
+
+```html
+<script src="path/to/coax.js"></script>
+```
+
+---
+
+## 使用方法
+
+要使用 Coax 代码高亮组件，请按照以下步骤进行操作：
+
+### 1. 定义 `<ax-code>` 元素
+
+```html
+<ax-code lang="js">
+  // 这里是您的 JavaScript 代码
+</ax-code>
+
+<ax-code lang="css">
+  /* 这里是您的 CSS 代码 */
+</ax-code>
+
+<ax-code lang="html">
+  <!-- 这里是您的 HTML 代码 -->
+</ax-code>
+```
+
+### 2. 注册语言配置
+
+您可以使用 `Coax.register` 方法注册语言的语法规则和主题。
+
+```javascript
+Coax.register('html', {
+  rules: [
+    { name: 'comment', reg: /&lt;!--[\s\S]*?--&gt;/ },
+    { name: 'tag', reg: /&lt;\/?[a-zA-Z0-9]+/ },
+    { name: 'attr', reg: /[a-zA-Z-]+(?=\s*=\s*)/ },
+    { name: 'string', reg: /(['"])(?:\\.|[^\\])*?\1/ },
+  ],
+  theme: {
+    'tag': '#e06c75', // 红色
+    'attr': '#d19a66', // 橙色
+    'string': '#98c379', // 绿色
+  }
+});
+```
+
+### 3. 自定义设置
+
+您可以通过修改语言的规则、主题颜色或内部 CSS 来定制代码高亮，具体方法如下：
+
+```javascript
+Coax.register('css', {
+  rules: [
+    { name: 'comment', reg: /\/\*[\s\S]*?\*\// },
+    { 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)/ },
+  ],
+  theme: {
+    'keyword': '#61afef', // 蓝色
+    'string': '#98c379', // 绿色
+    'op': '#abb2bf', // 灰色
+  },
+  internalCss: `
+    .ax-css-string { color: var(--ax-code-string); }
+  `
+});
+```
+
+### 4. 可选属性
+
+您可以通过 `height` 和 `max-height` 属性自定义代码块的高度和最大高度：
+
+```html
+<ax-code lang="js" height="200px" max-height="400px">
+  const x = 10;
+</ax-code>
+```
+
+---
+
+## 许可证
+
+MIT 许可证。可以自由使用和修改代码以适应您的项目需求。
+
+```
+
+---
+

package/dist/coax.cjs.js

@@ -0,0 +1,181 @@
+
+/*!
+ * @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
+ */
+
+'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.cjs.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
+ */
+"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/dist/coax.esm.js

@@ -0,0 +1,179 @@
+
+/*!
+ * @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 {
+    // 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: /(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/ }
+    ],
+    
+});