轻量、纯净的代码编辑器

自主开发的多语言代码编辑与编译展示工具，专注速度、专注体验、专注学习场景。

了解功能 → 支持的语言
main.c utils.h
12345678
// codes.js.cn - 编辑器预览
#include <stdio.h>

int main(void) {
    for (int i = 0; i < 3; i++)
        printf("Hello, codes! #%d\n", i);
    return 0;
}
● 已保存 · UTF-8 · LF C · Ln 8, Col 2

核心功能

每一项都为「写代码」服务，没有多余功能

⚡

极速启动

纯静态实现，秒开秒用，无需登录、无需安装插件。

🎨

语法高亮

内置 C、C++、Python、JavaScript 等常用语言的高亮配色。

🔧

在线编译

对接后端编译器，提交代码立即获得编译/运行结果。

📱

移动适配

响应式界面，在手机和平板上同样能正常使用与查看。

💾

本地保存

代码保存在本地浏览器，不上传服务器，隐私无忧。

🌙

深色主题

护眼配色，长时间编码不易疲劳。

更新日志

持续迭代，记录每一次功能改进与语言支持扩展

v0.4.0 · 自动缩进与括号匹配

  • 新增基于语法的智能自动缩进，支持 C/C++/Python/JavaScript
  • 括号高亮与自动补全，减少括号不匹配导致的编译错误
  • 行号区域增加当前行高亮指示器
  • 修复移动端虚拟键盘弹出时的光标偏移问题

v0.3.2 · 新增 Rust 与 Go 高亮

  • 语法高亮支持 Rust（生命周期、模式匹配关键字）
  • 语法高亮支持 Go（goroutine、channel、defer 关键字）
  • 优化大文件（>500 行）的渲染性能，滚动帧率提升约 40%
  • 编译结果面板增加错误行号点击跳转

v0.3.0 · 主题与快捷键

  • 新增浅色主题切换（跟随系统偏好或手动切换）
  • 支持常用快捷键：Ctrl+S 保存、Ctrl+/ 注释、Ctrl+F 查找
  • 代码折叠功能：支持按函数块与区域折叠
  • 本地存储改为 IndexedDB，单文件容量上限提升至 5MB

v0.2.0 · 多文件与编译器对接

  • 支持多标签页编辑，可在同一窗口切换不同源文件
  • 后端编译器 API 对接，支持 C/C++/Python 在线运行
  • 运行结果区分 stdout / stderr，超时自动终止
  • 编辑器体积压缩至 45KB（gzip 后 16KB）

支持的语言

覆盖主流编程语言，持续扩展中

C C++ Python JavaScript TypeScript Java Go Rust PHP Shell SQL HTML/CSS

语法高亮示例

Python高亮
def fib(n: int) -> int:
    # 带缓存的斐波那契
    if n < 2:
        return n
    a, b = 0, 1
    for _ in range(2, n + 1):
        a, b = b, a + b
    return b

print(fib(20))  # 6765
Rust高亮
fn main() {
    let nums = vec![1, 2, 3, 4, 5];
    let sum: i32 = nums
        .iter()
        .map(|x| x * x)
        .sum();
    println!("sum = {}", sum);
}
Go高亮
package main

import "fmt"

func main() {
    ch := make(chan int, 2)
    go func() { ch <- 42 }()
    v := <-ch
    fmt.Println(v)
}
JavaScript高亮
const fetchData = async (url) => {
    try {
        const res = await fetch(url);
        return await res.json();
    } catch (err) {
        console.error("fail:", err);
        return null;
    }
};

技术文章

深入编辑器内核与交互设计的实现细节

编辑器功能

代码编辑器代码格式化完全指南

自动缩进、代码美化、语言支持，助你构建完善的代码格式化系统。

阅读全文 →
编辑器功能

代码编辑器代码补全完全指南

智能补全、上下文感知、LLM集成，助你构建强大的代码补全功能。

阅读全文 →
编辑器核心

代码编辑器重做与历史管理完全指南

操作历史栈、时间旅行、状态管理，助你构建完善的撤销重做系统。

阅读全文 →
编辑器功能

代码编辑器缩进与空格处理完全指南

制表符、缩进策略、可视化空白，助你打造完美的代码格式化体验。

阅读全文 →
编辑器功能

代码编辑器拖拽完全指南

详解文本拖拽、选区创建、跨编辑器拖放实现，助你构建流畅的拖拽体验。

阅读全文 →
编辑器核心

代码编辑器选区与剪贴板完全指南

详解选区管理、坐标转换、剪贴板操作与撤销重做，助你构建完善的编辑器核心。

阅读全文 →
编辑器功能

代码编辑器查找与替换完全指南

详解查找算法、替换策略、正则匹配与多光标替换，助你构建高效的编辑器查找系统。

阅读全文 →
编辑器功能

代码编辑器代码折叠完全指南

详解代码折叠原理、区域标记、嵌套折叠与性能优化，助你实现完美的代码折叠功能。

阅读全文 →
编辑器功能

代码编辑器撤销与重做完全指南

命令历史栈、操作逆反、选择性撤销，助你构建完善的撤销重做系统。

阅读全文 →
编辑器功能

代码编辑器错误处理与诊断完全指南

编译错误、运行时错误、错误高亮与快速修复，助你构建高效的问题诊断系统。

阅读全文 →
查看更多文章 →

使用教程

三步上手，从编辑到运行

STEP 1

创建或粘贴代码

点击「新建文件」或直接将代码粘贴到编辑器。支持从本地拖拽 .c、.py、.js 等文件直接打开。编辑器会自动识别语言并启用对应高亮规则。

STEP 2

配置编译参数

点击底部状态栏的「设置」图标，选择编译器类型（GCC/Clang/MSVC）、优化级别（-O0 ~ -O3）与 C 标准版本（C99/C11/C17）。Python 与 JavaScript 无需额外配置。

STEP 3

运行与调试

按 Ctrl+Enter 或点击「运行」按钮提交到后端编译器。运行结果会在下方面板展示，包含 stdout、stderr 与执行耗时。若编译失败，点击错误行号可快速定位。

TIP

快捷键清单

Ctrl+S 保存到本地 · Ctrl+F 查找 · Ctrl+/ 切换注释 · Ctrl+D 删除当前行 · Ctrl+Z / Ctrl+Y 撤销重做 · Tab / Shift+Tab 缩进调整。

TIP

多文件项目

在左侧文件树右键「新建文件」即可添加多个源文件与头文件。主文件需包含 main 函数，其他文件会被自动编译链接。适合练习模块化编程。

TIP

隐私说明

所有代码默认保存在浏览器本地（IndexedDB），不会上传到服务器。仅在点击「运行」时，代码才会通过加密通道发送到编译后端，执行后立即销毁。

NEW

Vim 模式按键绑定

支持普通模式、插入模式、可视模式与组合操作。Esc 切换模式，h/j/k/l 移动，dd/yy 删行复制，ci"/di( 修改删除内部内容。查看完整按键参考 →

NEW

自定义主题开发

通过 CSS 变量自定义编辑器配色。覆盖 --editor-bg、--keyword、--string 等变量即可创建新主题，支持跟随系统偏好自动切换。阅读开发指南 →

关键指标

轻量、快速、稳定

<50KB核心 HTML/CSS 体积
0第三方依赖
12+支持的语言
100%纯静态部署

关于 Codes

本站展示自主开发的代码编辑器与编译器项目。我们追求最小化的依赖、最干净的界面与最直接的编码体验，希望它能成为你日常学习与练手的趁手工具。