Skip to content

Commit ababdf3

Browse files
qianmoQqianmoQ
committed
feat (language): 支持 HTML 语言
1 parent b40addc commit ababdf3

File tree

9 files changed

+363
-2
lines changed

9 files changed

+363
-2
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发
2828
- **C++**
2929
- **Go**
3030
- **Groovy**
31+
- **HTML**
3132
- **Java**
3233
- **JavaScript (Browser)**
3334
- **JavaScript (jQuery)**
@@ -51,6 +52,7 @@ CodeForge 是一款轻量级、高性能的桌面代码执行器，专为开发
5152
- Node.js 18+
5253
- Rust 1.8+
5354
- Tauri 2.x
55+
- Vue 3.x
5456

5557
**构建步骤：**
5658

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@babel/runtime": "^7.28.2",
1414
"@codemirror/lang-cpp": "^6.0.3",
1515
"@codemirror/lang-go": "^6.0.1",
16+
"@codemirror/lang-html": "^6.4.9",
1617
"@codemirror/lang-java": "^6.0.2",
1718
"@codemirror/lang-javascript": "^6.2.4",
1819
"@codemirror/lang-python": "^6.2.1",

‎public/icons/html.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src-tauri/src/examples/html.html‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CodeForge HTML 代码示例</title>
7+
<style>
8+
body {
9+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
10+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11+
color: #333;
12+
margin: 0;
13+
padding: 20px;
14+
line-height: 1.6;
15+
}
16+
17+
.container {
18+
max-width: 900px;
19+
margin: 0 auto;
20+
background: rgba(255, 255, 255, 0.95);
21+
padding: 30px;
22+
border-radius: 15px;
23+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
24+
}
25+
26+
.header {
27+
text-align: center;
28+
border: 2px solid #4CAF50;
29+
padding: 20px;
30+
margin-bottom: 30px;
31+
background: #f8f9fa;
32+
border-radius: 10px;
33+
}
34+
35+
.section {
36+
margin: 20px 0;
37+
padding: 15px;
38+
background: #f0f8ff;
39+
border-left: 4px solid #2196F3;
40+
border-radius: 5px;
41+
}
42+
43+
.output {
44+
background: #1a1a1a;
45+
color: #00ff00;
46+
padding: 15px;
47+
border-radius: 8px;
48+
font-family: 'Courier New', monospace;
49+
margin: 10px 0;
50+
overflow-x: auto;
51+
}
52+
53+
.button-container {
54+
text-align: center;
55+
margin: 20px 0;
56+
}
57+
58+
.btn {
59+
background: #4CAF50;
60+
color: white;
61+
padding: 10px 20px;
62+
border: none;
63+
border-radius: 5px;
64+
cursor: pointer;
65+
font-size: 16px;
66+
margin: 5px;
67+
transition: background 0.3s;
68+
}
69+
70+
.btn:hover {
71+
background: #45a049;
72+
}
73+
74+
.fruit-list {
75+
list-style: none;
76+
padding: 0;
77+
}
78+
79+
.fruit-list li {
80+
background: #e8f5e8;
81+
margin: 5px 0;
82+
padding: 8px;
83+
border-radius: 5px;
84+
border-left: 3px solid #4CAF50;
85+
}
86+
87+
.score-display {
88+
font-size: 18px;
89+
font-weight: bold;
90+
padding: 10px;
91+
border-radius: 5px;
92+
text-align: center;
93+
}
94+
95+
.excellent {
96+
background: #d4edda;
97+
color: #155724;
98+
}
99+
100+
.good {
101+
background: #cce5ff;
102+
color: #004085;
103+
}
104+
105+
.pass {
106+
background: #fff3cd;
107+
color: #856404;
108+
}
109+
110+
.improvement {
111+
background: #f8d7da;
112+
color: #721c24;
113+
}
114+
</style>
115+
</head>
116+
<body>
117+
<div class="container">
118+
<!-- 头部信息 -->
119+
<div class="header">
120+
<h1>🎉 欢迎使用 CodeForge!</h1>
121+
<h2>Welcome to CodeForge!</h2>
122+
<hr>
123+
<h3>CodeForge HTML</h3>
124+
</div>
125+
126+
<!-- 基本输出示例 -->
127+
<div class="section">
128+
<h3>✅ 基本输出 (Basic Output)</h3>
129+
<div class="output">
130+
<div>✅ HTML 运行成功! (HTML is working!)</div>
131+
<div>🌐 这是 HTML 程序 (This is HTML program)</div>
132+
</div>
133+
</div>
134+
135+
<!-- 变量操作 -->
136+
<div class="section">
137+
<h3>🔢 简单计算 (Simple Calculation)</h3>
138+
<div class="button-container">
139+
<button class="btn" onclick="performCalculation()">执行计算 / Execute Calculation</button>
140+
</div>
141+
<div class="output" id="calculationOutput">点击按钮执行计算...</div>
142+
</div>
143+
144+
<!-- 字符串操作 -->
145+
<div class="section">
146+
<h3>📝 字符串操作 (String Operations)</h3>
147+
<div class="output" id="stringOutput">
148+
<div>平台名称 (Platform): <span id="platformName">CodeForge</span></div>
149+
<div>语言版本 (Language): <span id="languageVersion">HTML</span></div>
150+
<div>完整信息 (Full info): <span id="fullInfo">CodeForge - HTML</span></div>
151+
</div>
152+
</div>
153+
154+
<!-- 循环示例 -->
155+
<div class="section">
156+
<h3>🔄 循环输出 (Loop Output)</h3>
157+
<div class="button-container">
158+
<button class="btn" onclick="showLoop()">显示循环 / Show Loop</button>
159+
</div>
160+
<div class="output" id="loopOutput">点击按钮显示循环输出...</div>
161+
</div>
162+
163+
<!-- 数组操作 -->
164+
<div class="section">
165+
<h3>🍎 水果列表 (Fruit List)</h3>
166+
<ul class="fruit-list" id="fruitList">
167+
<li>1. 苹果 🍎</li>
168+
<li>2. 香蕉 🍌</li>
169+
<li>3. 橙子 🍊</li>
170+
<li>4. 葡萄 🍇</li>
171+
</ul>
172+
</div>
173+
174+
<!-- 条件判断 -->
175+
<div class="section">
176+
<h3>📊 成绩评估 (Score Evaluation)</h3>
177+
<div class="button-container">
178+
<input type="number" id="scoreInput" value="85" min="0" max="100" style="padding: 8px; margin: 5px;">
179+
<button class="btn" onclick="evaluateScore()">评估成绩 / Evaluate Score</button>
180+
</div>
181+
<div class="score-display good" id="scoreResult">
182+
当前成绩: 85 分 - 良好! (Good!)
183+
</div>
184+
</div>
185+
186+
<!-- DOM操作示例 -->
187+
<div class="section">
188+
<h3>🔍 DOM操作示例 (DOM Manipulation Example)</h3>
189+
<div class="button-container">
190+
<button class="btn" onclick="demonstrateDOM()">演示DOM操作 / Demonstrate DOM</button>
191+
</div>
192+
<div class="output" id="domOutput">点击按钮查看DOM操作...</div>
193+
</div>
194+
195+
<!-- 函数示例 -->
196+
<div class="section">
197+
<h3>🎭 函数示例 (Function Example)</h3>
198+
<div class="button-container">
199+
<input type="text" id="userNameInput" placeholder="请输入您的姓名..." style="padding: 8px; margin: 5px; width: 200px;">
200+
<button class="btn" onclick="greetUser()">问候用户 / Greet User</button>
201+
</div>
202+
<div class="output" id="greetingOutput">输入姓名后点击按钮...</div>
203+
</div>
204+
205+
<!-- 结束信息 -->
206+
<div class="section" style="text-align: center; background: #e8f5e8;">
207+
<h3>🎯 CodeForge HTML 代码执行完成!</h3>
208+
<h4>🎯 CodeForge HTML execution completed!</h4>
209+
<p>感谢使用 CodeForge 代码执行环境! 🚀</p>
210+
<p>Thank you for using CodeForge! 🚀</p>
211+
</div>
212+
</div>
213+
214+
<script>
215+
// 简单计算函数
216+
function performCalculation() {
217+
const number1 = 10;
218+
const number2 = 20;
219+
const result = number1 + number2;
220+
221+
document.getElementById('calculationOutput').innerHTML =
222+
`${number1} + ${number2} = ${result}`;
223+
}
224+
225+
// 循环输出函数
226+
function showLoop() {
227+
let output = '';
228+
for (let i = 1; i <= 5; i++) {
229+
output += `第 ${i} 次输出 (Output #${i}): Hello from CodeForge!<br>`;
230+
}
231+
document.getElementById('loopOutput').innerHTML = output;
232+
}
233+
234+
// 成绩评估函数
235+
function evaluateScore() {
236+
const score = parseInt(document.getElementById('scoreInput').value);
237+
const resultDiv = document.getElementById('scoreResult');
238+
239+
let evaluation = '';
240+
let className = '';
241+
242+
if (score >= 90) {
243+
evaluation = '优秀! (Excellent!)';
244+
className = 'excellent';
245+
}
246+
else if (score >= 80) {
247+
evaluation = '良好! (Good!)';
248+
className = 'good';
249+
}
250+
else if (score >= 60) {
251+
evaluation = '及格 (Pass)';
252+
className = 'pass';
253+
}
254+
else {
255+
evaluation = '需要努力 (Need improvement)';
256+
className = 'improvement';
257+
}
258+
259+
resultDiv.textContent = `当前成绩: ${score} 分 - ${evaluation}`;
260+
resultDiv.className = `score-display ${className}`;
261+
}
262+
263+
// DOM操作演示
264+
function demonstrateDOM() {
265+
const now = new Date();
266+
const element = document.getElementById('domOutput');
267+
268+
const output = `
269+
<div>当前时间: ${now.toLocaleString()}</div>
270+
<div>页面标题: ${document.title}</div>
271+
<div>用户代理: ${navigator.userAgent.substring(0, 50)}...</div>
272+
<div>页面URL: ${window.location.href}</div>
273+
`;
274+
275+
element.innerHTML = output;
276+
}
277+
278+
// 问候用户函数
279+
function greetUser() {
280+
const userName = document.getElementById('userNameInput').value || 'CodeForge用户';
281+
const greeting = `Hello, ${userName}! 👋<br>欢迎来到 CodeForge HTML 环境!`;
282+
283+
document.getElementById('greetingOutput').innerHTML = greeting;
284+
}
285+
286+
// 页面加载完成后的初始化
287+
window.onload = function () {
288+
console.log('🎉 CodeForge HTML 环境已就绪!');
289+
console.log('Welcome to CodeForge HTML Environment!');
290+
};
291+
</script>
292+
</body>
293+
</html>

‎src-tauri/src/plugins/html.rs‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
use super::{LanguagePlugin, PluginConfig};
2+
use std::vec;
3+
4+
pub struct HtmlPlugin;
5+
6+
impl LanguagePlugin for HtmlPlugin {
7+
fn get_order(&self) -> i32 {
8+
20
9+
}
10+
11+
fn get_language_name(&self) -> &'static str {
12+
"HTML"
13+
}
14+
15+
fn get_language_key(&self) -> &'static str {
16+
"html"
17+
}
18+
19+
fn get_file_extension(&self) -> String {
20+
self.get_config()
21+
.map(|config| config.extension.clone())
22+
.unwrap_or_else(|| "html".to_string())
23+
}
24+
25+
fn get_version_args(&self) -> Vec<&'static str> {
26+
vec!["--"]
27+
}
28+
29+
fn get_path_command(&self) -> String {
30+
"--".to_string()
31+
}
32+
33+
fn get_default_config(&self) -> PluginConfig {
34+
PluginConfig {
35+
enabled: true,
36+
language: String::from("html"),
37+
before_compile: None,
38+
extension: String::from("html"),
39+
execute_home: None,
40+
run_command: Some(String::from("cat $filename")),
41+
after_compile: None,
42+
template: Some(String::from("// 在这里输入 HTML 代码")),
43+
timeout: Some(30),
44+
console_type: Some(String::from("web")),
45+
}
46+
}
47+
48+
fn get_default_command(&self) -> String {
49+
self.get_config()
50+
.and_then(|config| config.run_command.clone())
51+
.unwrap_or_else(|| "--".to_string())
52+
}
53+
}

‎src-tauri/src/plugins/manager.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ use crate::plugins::clojure::ClojurePlugin;
55
use crate::plugins::cpp::CppPlugin;
66
use crate::plugins::go::GoPlugin;
77
use crate::plugins::groovy::GroovyPlugin;
8+
use crate::plugins::html::HtmlPlugin;
89
use crate::plugins::java::JavaPlugin;
910
use crate::plugins::javascript_browser::JavaScriptBrowserPlugin;
1011
use crate::plugins::javascript_jquery::JavaScriptJQueryPlugin;
@@ -48,6 +49,7 @@ impl PluginManager {
4849
plugins.insert("typescript".to_string(), Box::new(TypeScriptPlugin));
4950
plugins.insert("cpp".to_string(), Box::new(CppPlugin));
5051
plugins.insert("groovy".to_string(), Box::new(GroovyPlugin));
52+
plugins.insert("html".to_string(), Box::new(HtmlPlugin));
5153
plugins.insert(
5254
"javascript-nodejs".to_string(),
5355
Box::new(JavaScriptNodeJsPlugin),

0 commit comments

Comments
 (0)