@codady/coax 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +331 -166
- package/dist/coax.cjs.js +450 -271
- package/dist/coax.cjs.min.js +4 -4
- package/dist/coax.esm.js +444 -271
- package/dist/coax.esm.min.js +4 -4
- package/dist/coax.umd.js +466 -266
- package/dist/coax.umd.min.js +4 -4
- package/examples/.htaccess +0 -0
- package/examples/append-highlight.html +82 -0
- package/examples/color-selector.html +412 -0
- package/examples/deepseek-highlight.html +100 -0
- package/examples/js-highlight.html +1 -1
- package/examples/md-highlight.html +60 -0
- package/examples/nginx.htaccess +0 -0
- package/examples/replace-highlight.html +69 -0
- package/examples/stream-highlight.html +64 -0
- package/examples/theme-highlight.html +69 -0
- package/package.json +4 -4
- package/rollup.config.js +3 -3
- package/script-note.js +2 -2
- package/src/Coax.js +25 -414
- package/src/Coax.ts +28 -443
- package/src/components/Coax.js +528 -0
- package/src/components/Coax.ts +556 -0
- package/src/modules.js +12 -0
- package/src/modules.ts +23 -0
- package/src/rules/css.js +11 -0
- package/src/rules/css.ts +11 -0
- package/src/rules/html.js +13 -0
- package/src/rules/html.ts +13 -0
- package/src/rules/javascript.js +10 -0
- package/src/rules/javascript.ts +10 -0
- package/src/rules/markdown.js +29 -0
- package/src/rules/markdown.ts +41 -0
- package/src/rules/ruleCss - /345/211/257/346/234/254.js" +10 -0
- package/src/rules/ruleHTML - /345/211/257/346/234/254.js" +12 -0
- package/src/rules/ruleJs - /345/211/257/346/234/254.js" +10 -0
- package/src/rules/ruleTs - /345/211/257/346/234/254.js" +12 -0
- package/src/rules/typescript.js +12 -0
- package/src/rules/typescript.ts +12 -0
- package/src/tools/copy.js +26 -0
- package/src/tools/copy.ts +29 -0
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>DeepSeek Stream Demo</title>
|
|
8
|
+
<style>
|
|
9
|
+
#output {
|
|
10
|
+
font-family: monospace;
|
|
11
|
+
white-space: pre-wrap;
|
|
12
|
+
/* 保持格式 */
|
|
13
|
+
word-wrap: break-word;
|
|
14
|
+
border: 1px solid #ccc;
|
|
15
|
+
padding: 10px;
|
|
16
|
+
width: 80%;
|
|
17
|
+
margin: 0 auto;
|
|
18
|
+
height: 300px;
|
|
19
|
+
overflow-y: auto;
|
|
20
|
+
}
|
|
21
|
+
</style>
|
|
22
|
+
</head>
|
|
23
|
+
|
|
24
|
+
<body>
|
|
25
|
+
<ax-code lang="js" indexed></ax-code>
|
|
26
|
+
|
|
27
|
+
<button>随机展示javascript</button>
|
|
28
|
+
<script src="../node_modules/@codady/utils/dist/utils.umd.js" type='text/javascript'></script>
|
|
29
|
+
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
30
|
+
<script type='text/javascript'>
|
|
31
|
+
|
|
32
|
+
const btn = document.querySelector('button');
|
|
33
|
+
|
|
34
|
+
async function fetchStreamedText() {
|
|
35
|
+
const outputElement = document.querySelector('ax-code');
|
|
36
|
+
const apiKey = 'sk-46066a43b74c4c7693282b9885fe8820';
|
|
37
|
+
const endpoint = 'https://api.deepseek.com/chat/completions';
|
|
38
|
+
|
|
39
|
+
//先清空
|
|
40
|
+
outputElement.clear();
|
|
41
|
+
|
|
42
|
+
fetch(endpoint, {
|
|
43
|
+
method: "POST",
|
|
44
|
+
headers: {
|
|
45
|
+
"Content-Type": "application/json",
|
|
46
|
+
"Authorization": "Bearer " + apiKey
|
|
47
|
+
},
|
|
48
|
+
body: JSON.stringify({
|
|
49
|
+
model: "deepseek-chat",
|
|
50
|
+
messages: [
|
|
51
|
+
{
|
|
52
|
+
role: "user",
|
|
53
|
+
content: `
|
|
54
|
+
你必须遵守以下格式规则：
|
|
55
|
+
1. 绝对不要使用markdown格式
|
|
56
|
+
2. 绝对不要使用\`\`\`标记
|
|
57
|
+
3. 直接输出JavaScript格式的代码
|
|
58
|
+
4. 每次输出的javascript均不同
|
|
59
|
+
`
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
stream: true, // 设置为 true，启用流式输出
|
|
63
|
+
max_tokens: 1000,
|
|
64
|
+
temperature: 0.3,
|
|
65
|
+
})
|
|
66
|
+
})
|
|
67
|
+
.then(async (response) => {
|
|
68
|
+
if (!response.ok) {
|
|
69
|
+
throw new Error("网络请求失败");
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/*
|
|
73
|
+
response.body = ReadableStream,decoder.decode(value, { stream: true }) =如下
|
|
74
|
+
data: {"id":"36746ef4-7200-45dc-b731-282ca9e0baa0","object":"chat.completion.chunk","created":1768011313,"model":"deepseek-chat","system_fingerprint":"fp_eaab8d114b_prod0820_fp8_kvcache","choices":[{"index":0,"delta":{"content":"。"},"logprobs":null,"finish_reason":null}]}
|
|
75
|
+
|
|
76
|
+
data: {"id":"36746ef4-7200-45dc-b731-282ca9e0baa0","object":"chat.completion.chunk","created":1768011313,"model":"deepseek-chat","system_fingerprint":"fp_eaab8d114b_prod0820_fp8_kvcache","choices":[{"index":0,"delta":{"content":""},"logprobs":null,"finish_reason":"stop"}],"usage":{"prompt_tokens":10,"completion_tokens":42,"total_tokens":52,"prompt_tokens_details":{"cached_tokens":0},"prompt_cache_hit_tokens":0,"prompt_cache_miss_tokens":10}}
|
|
77
|
+
|
|
78
|
+
data: [DONE] */
|
|
79
|
+
|
|
80
|
+
const resp = await utils.parseLLMStream(response.body, (str) => {
|
|
81
|
+
outputElement.stream(str);
|
|
82
|
+
});
|
|
83
|
+
outputElement.close();
|
|
84
|
+
|
|
85
|
+
})
|
|
86
|
+
.catch(err => {
|
|
87
|
+
console.error("请求失败:", err);
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
fetchStreamedText();
|
|
92
|
+
|
|
93
|
+
//随机生成
|
|
94
|
+
btn.onclick = () => {
|
|
95
|
+
fetchStreamedText();
|
|
96
|
+
}
|
|
97
|
+
</script>
|
|
98
|
+
</body>
|
|
99
|
+
|
|
100
|
+
</html>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Coax 代码高亮插件</title>
|
|
8
|
+
<style>
|
|
9
|
+
/* 白天模式变量 */
|
|
10
|
+
:root {
|
|
11
|
+
--ax-html-comment: #6a737d;
|
|
12
|
+
--ax-html-doctype: #005cc5;
|
|
13
|
+
--ax-html-tag: #22863a;
|
|
14
|
+
--ax-html-attr: #6f42c1;
|
|
15
|
+
--ax-html-string: #032f62;
|
|
16
|
+
--ax-html-bracket: #24292e;
|
|
17
|
+
}
|
|
18
|
+
</style>
|
|
19
|
+
|
|
20
|
+
</head>
|
|
21
|
+
|
|
22
|
+
<body>
|
|
23
|
+
<ax-code lang="md">
|
|
24
|
+
<code>
|
|
25
|
+
# 这是一个一级标题
|
|
26
|
+
|
|
27
|
+
## 这是一个二级标题
|
|
28
|
+
|
|
29
|
+
### 这是一个三级标题
|
|
30
|
+
|
|
31
|
+
#### 这是一个四级标题
|
|
32
|
+
|
|
33
|
+
##### 这是一个五级标题
|
|
34
|
+
|
|
35
|
+
###### 这是一个六级标题
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
这是一个段落文本，其中包含 **粗体** 和 *斜体*。
|
|
40
|
+
|
|
41
|
+
[点击这里访问 OpenAI](https://www.openai.com)
|
|
42
|
+
|
|
43
|
+
这是一段 `行内代码` 示例。
|
|
44
|
+
|
|
45
|
+
```javascript
|
|
46
|
+
// 这是一个 JavaScript 代码块
|
|
47
|
+
function sayHello() {
|
|
48
|
+
console.log("Hello, World!");
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
</code>
|
|
52
|
+
</ax-code>
|
|
53
|
+
|
|
54
|
+
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
55
|
+
<script type='text/javascript'>
|
|
56
|
+
|
|
57
|
+
</script>
|
|
58
|
+
</body>
|
|
59
|
+
|
|
60
|
+
</html>
|
|
File without changes
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Coax 代码高亮插件</title>
|
|
8
|
+
<style>
|
|
9
|
+
/* 白天模式变量 */
|
|
10
|
+
:root {}
|
|
11
|
+
</style>
|
|
12
|
+
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<ax-code streaming tools="copy" indexed lang="js">
|
|
17
|
+
<code>
|
|
18
|
+
/**
|
|
19
|
+
* Simple animation function
|
|
20
|
+
*/
|
|
21
|
+
async function animate(element, duration) {
|
|
22
|
+
const start = Date.now();
|
|
23
|
+
|
|
24
|
+
if (!element) return false;
|
|
25
|
+
|
|
26
|
+
console.log("Animation started...");
|
|
27
|
+
|
|
28
|
+
while (Date.now() - start < duration) {
|
|
29
|
+
let progress = (Date.now() - start) / duration;
|
|
30
|
+
element.style.opacity = Math.min(progress, 1);
|
|
31
|
+
await Promise.resolve();
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return true;
|
|
35
|
+
}
|
|
36
|
+
</code>
|
|
37
|
+
</ax-code>
|
|
38
|
+
|
|
39
|
+
<button>替换代码</button>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
44
|
+
<script type='text/javascript'>
|
|
45
|
+
|
|
46
|
+
let btn = document.querySelector('button');
|
|
47
|
+
let code = document.querySelector('ax-code');
|
|
48
|
+
btn.onclick = () => {
|
|
49
|
+
code.replace(`
|
|
50
|
+
function calculateCircleArea(radius) {
|
|
51
|
+
if (typeof radius !== 'number' || radius <= 0) {
|
|
52
|
+
throw new Error('Radius must be a positive number');
|
|
53
|
+
}
|
|
54
|
+
return Math.PI * radius * radius;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
function calculateCircleCircumference(radius) {
|
|
58
|
+
if (typeof radius !== 'number' || radius <= 0) {
|
|
59
|
+
throw new Error('Radius must be a positive number');
|
|
60
|
+
}
|
|
61
|
+
return 2 * Math.PI * radius;
|
|
62
|
+
}
|
|
63
|
+
`)
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
</script>
|
|
67
|
+
</body>
|
|
68
|
+
|
|
69
|
+
</html>
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Coax 代码高亮插件</title>
|
|
8
|
+
<style>
|
|
9
|
+
/* 白天模式变量 */
|
|
10
|
+
:root {}
|
|
11
|
+
</style>
|
|
12
|
+
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<ax-code tools="copy" indexed lang="js"></ax-code>
|
|
17
|
+
|
|
18
|
+
<textarea id="box">
|
|
19
|
+
function calculateCircleArea(radius) {
|
|
20
|
+
if (typeof radius !== 'number' || radius <= 0) {
|
|
21
|
+
throw new Error('Radius must be a positive number');
|
|
22
|
+
}
|
|
23
|
+
return Math.PI * radius * radius;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function calculateCircleCircumference(radius) {
|
|
27
|
+
if (typeof radius !== 'number' || radius <= 0) {
|
|
28
|
+
|
|
29
|
+
throw new Error('Radius must be a positive number');
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return 2 * Math.PI * radius;
|
|
34
|
+
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
</textarea>
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
<script src="../dist/coax.umd.js" type='text/javascript'></script>
|
|
42
|
+
<script type='text/javascript'>
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
let el = document.querySelector('ax-code'),
|
|
47
|
+
// arr = ['/**', '\n', ' * Simple', ' animation', ' function', '\n', ' */', '\n', 'async', ' function', ' animate', '(element,', 'duration) {', '\n',
|
|
48
|
+
// ' const', ' start', ' = Date', '.now();', 'DONE'
|
|
49
|
+
// ],
|
|
50
|
+
arr = document.querySelector('#box').value.split('\n'),
|
|
51
|
+
index = 0;
|
|
52
|
+
|
|
53
|
+
let timer = setInterval(() => {
|
|
54
|
+
el.stream(arr[index]);
|
|
55
|
+
index++;
|
|
56
|
+
if (index >= arr.length) {
|
|
57
|
+
clearInterval(timer);
|
|
58
|
+
}
|
|
59
|
+
}, 50);
|
|
60
|
+
|
|
61
|
+
</script>
|
|
62
|
+
</body>
|
|
63
|
+
|
|
64
|
+
</html>
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Coax 代码高亮插件</title>
|
|
8
|
+
<style>
|
|
9
|
+
/* 白天模式变量 */
|
|
10
|
+
:root {}
|
|
11
|
+
</style>
|
|
12
|
+
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
<ax-code lang="css">
|
|
17
|
+
<code>
|
|
18
|
+
/* Main Layout Style */
|
|
19
|
+
.container > .header:hover {
|
|
20
|
+
display: flex;
|
|
21
|
+
width: 100%;
|
|
22
|
+
max-width: 1200px;
|
|
23
|
+
padding: 20px 1.5rem;
|
|
24
|
+
background-color: var(--primary-bg, #fff);
|
|
25
|
+
transition: all 300ms ease-in-out;
|
|
26
|
+
transform: rotate(5deg);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (max-width: 768px) {
|
|
30
|
+
.container {
|
|
31
|
+
grid-template-columns: 1fr;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
</code>
|
|
35
|
+
</ax-code>
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
<script type='module'>
|
|
41
|
+
|
|
42
|
+
const {CoaxElem,css} = await import('../dist/coax.esm.js');
|
|
43
|
+
|
|
44
|
+
css.themeStyles = `
|
|
45
|
+
:host {
|
|
46
|
+
--background:rgba(0,0,0,0.02);
|
|
47
|
+
--border-color:rgba(0,0,0,0.08);
|
|
48
|
+
--color-code:#333;
|
|
49
|
+
}
|
|
50
|
+
:host([scheme="dark"]){
|
|
51
|
+
--background: #282c34;
|
|
52
|
+
--border-color: transparent;
|
|
53
|
+
--color-code: #abb2bf;
|
|
54
|
+
}
|
|
55
|
+
@media (prefers-color-scheme: dark) {
|
|
56
|
+
:host{
|
|
57
|
+
--background: #282c34;
|
|
58
|
+
--border-color: transparent;
|
|
59
|
+
--color-code: #abb2bf;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
customElements.define(`ax-code`, CoaxElem);
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
</script>
|
|
67
|
+
</body>
|
|
68
|
+
|
|
69
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codady/coax",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
7
|
"author": "AXUI Development Team",
|
|
8
8
|
"license": "MIT",
|
|
9
|
-
"description": "Coax is a
|
|
9
|
+
"description": "Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.",
|
|
10
10
|
"main": "./src/Coax.js",
|
|
11
11
|
"type": "module",
|
|
12
12
|
"types": "./src/coax.d.ts",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"build": "rollup --config",
|
|
58
58
|
"mini": "node script-mini.js",
|
|
59
59
|
"push": "node script-push.js",
|
|
60
|
-
"all": "
|
|
60
|
+
"all": "npm run build && npm run css && npm run mini && npm publish && (npm run push || true)"
|
|
61
61
|
},
|
|
62
62
|
"repository": {
|
|
63
63
|
"type": "git",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"homepage": "https://www.axui.cn",
|
|
85
85
|
"dependencies": {
|
|
86
86
|
"@codady/icax": "^0.0.5",
|
|
87
|
-
"@codady/utils": "^0.0.
|
|
87
|
+
"@codady/utils": "^0.0.34",
|
|
88
88
|
"simple-git": "^3.27.0"
|
|
89
89
|
}
|
|
90
90
|
}
|
package/rollup.config.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Last modified: 2026/01/
|
|
2
|
+
* Last modified: 2026/01/12 08:59:10
|
|
3
3
|
*/
|
|
4
4
|
import resolve from '@rollup/plugin-node-resolve';
|
|
5
5
|
import replace from 'rollup-plugin-replace';
|
|
@@ -40,7 +40,7 @@ export default [
|
|
|
40
40
|
],
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
|
-
input: './src/
|
|
43
|
+
input: './src/modules.js',
|
|
44
44
|
output:
|
|
45
45
|
{
|
|
46
46
|
dir: './dist/',
|
|
@@ -53,7 +53,7 @@ export default [
|
|
|
53
53
|
],
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
|
-
input: './src/
|
|
56
|
+
input: './src/modules.js',
|
|
57
57
|
output:
|
|
58
58
|
{
|
|
59
59
|
dir: './dist/',
|
package/script-note.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/**
|
|
3
|
-
* Last modified: 2026/01/
|
|
3
|
+
* Last modified: 2026/01/12 14:43:46
|
|
4
4
|
*/
|
|
5
5
|
import { readFileSync } from 'fs';
|
|
6
6
|
import { fileURLToPath } from 'url';
|
|
@@ -20,7 +20,7 @@ const note = `
|
|
|
20
20
|
* @name Coax event management system.
|
|
21
21
|
* @version ${pkg.version}
|
|
22
22
|
* @author AXUI development team <3217728223@qq.com>
|
|
23
|
-
* @description Coax is a
|
|
23
|
+
* @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
|
|
24
24
|
* @see {@link https://coax.axui.cn|Official website}
|
|
25
25
|
* @see {@link https://github.com/codady/coax/issues|github issues}
|
|
26
26
|
* @see {@link https://gitee.com/codady/coax/issues|Gitee issues}
|