HTML 代码编辑器

支持语法高亮、代码注释、Tab操作、文件打开和保存

未命名文件.txt
1
字数: 0
行数: 1
历史记录: 0
缩进: 4 空格
语言: 纯文本
模式: 普通
// Python 示例 def factorial(n): """计算阶乘的Python函数""" if n == 0: return 1 else: return n * factorial(n-1) # 调用函数 print(f"5的阶乘是: {factorial(5)}") // SQL 示例 -- 创建用户表 CREATE TABLE users ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL, email VARCHAR(100) NOT NULL UNIQUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); -- 插入数据 INSERT INTO users (username, email) VALUES ('john_doe', 'john@example.com'), ('jane_smith', 'jane@example.com'); -- 查询数据 SELECT * FROM users WHERE username LIKE 'j%'; // JSON 示例 { "name": "代码编辑器", "version": "1.0.0", "features": [ "语法高亮", "代码注释", "文件操作", "全屏模式", "暗色模式", "撤销重做" ], "author": { "name": "开发者", "email": "developer@example.com" } }`; // 设置初始语言为JavaScript currentLanguage = 'javascript'; languageSelect.value = 'javascript'; languageDisplay.textContent = 'JavaScript'; // 初始化历史记录 initializeHistory(); // 初始化更新 updateLineNumbers(); updateCharCount(); updateHighlight(); // 初始化函数,确保所有元素从相同位置开始 function initEditorAlignment() { // 重置所有滚动位置 textEditor.scrollTop = 0; lineNumbers.scrollTop = 0; highlightBackground.scrollTop = 0; // 确保所有元素从顶部对齐 textEditor.style.paddingTop = '10px'; textEditor.style.paddingLeft = '15px'; highlightBackground.style.paddingTop = '10px'; highlightBackground.style.paddingLeft = '15px'; lineNumbers.style.paddingTop = '10px'; lineNumbers.style.paddingLeft = '15px'; } // 在初始化时调用对齐函数 window.addEventListener('load', async () => { initEditorAlignment(); updateLineNumbers(); updateCharCount(); updateHighlight(); // 检查URL参数中是否有文件路径 const urlParams = new URLSearchParams(window.location.search); const filePath = urlParams.get('path'); if (filePath) { await loadFileFromApi(filePath); } }); // 在窗口调整大小时重新对齐 window.addEventListener('resize', initEditorAlignment); // 在页面加载完成后自动点击暗色模式按钮 window.addEventListener('load', function() { // 等待一小段时间确保页面完全加载 setTimeout(function() { document.getElementById('darkModeBtn').click(); }, 100); });