01
语法高亮原理
Tokenization 基础 · 正则表达式在词法分析中的应用
原理词法
02
构建简单的词法分析器
定义Token类型 · 正则规则 · 分词函数 · 边界处理
词法分析实现
03
渲染引擎基础
DOM操作 · DocumentFragment · 虚拟DOM与增量渲染
渲染性能
04
基于正则的语法高亮器
高亮函数 · 匹配关键字/字符串/注释 · 生成带span的HTML
正则高亮
05
行号显示与滚动同步
行号生成 · 滚动监听 · 行号与代码对齐
UI同步
06
支持多语言
语言配置 · 动态切换规则 · 扩展正则集
多语言配置
07
智能提示概述
IntelliSense · 触发时机 · 静态/动态数据源
提示概念
08
构建关键词提示引擎
关键词列表 · 模糊匹配 · Levenshtein距离
引擎算法
09
上下文感知提示
作用域变量收集 · 类型推断 · 排序策略
上下文智能
10
提示UI组件
弹出层定位 · 键盘导航 · 高亮选中项
UI交互
11
代码片段 (Snippet) 支持
Snippet格式 · 占位符$1,$2 · Tab跳转
片段效率
12
异步数据源
后端API · 防抖节流 · 加载状态
异步性能
13
编辑器集成 (Textarea)
选区与光标 · 替换文本 · 撤销/重做
Textarea集成
14
编辑器集成 (ContentEditable)
contenteditable · 输入事件 · 保持光标
富文本光标
15
性能优化
大文件分片 · Web Worker · 虚拟滚动
优化Worker
16
括号匹配与自动补全
栈算法 · 自动闭合 · 高亮匹配括号
括号自动补全
17
错误提示与波浪线
语法错误检测 · 位置映射 · 波浪线渲染
错误诊断
18
主题系统
主题数据结构 · CSS变量 · 暗色/亮色
主题自定义
19
插件化架构
生命周期 · API设计 · 注册/卸载
插件架构
20
测试与调试
单元测试 · 集成测试 · Chrome DevTools
测试调试
21
打包与发布
Webpack/Rollup · UMD/ESM · npm发布
构建发布
22
实战：JavaScript语法高亮器
JS词法规则 · 模板字符串 · 正则字面量
实战JS
23
实战：Python语法高亮器
缩进处理 · 装饰器 · f-string
实战Python
24
实战：JSON/XML语法高亮器
结构折叠 · 属性高亮 · 错误标记
实战JSON
25
实战：Markdown编辑器
实时预览 · 代码块高亮 · 任务列表
实战Markdown
26
实战：SQL编辑器
关键字高亮 · 表名/字段提示 · 执行计划
实战SQL
27
实战：配置式语言支持 (YAML/TOML)
键值对高亮 · 注释 · 多行字符串
实战YAML
28
实战：代码对比 (Diff) 视图
行级别对比 · 颜色标记 · 并排/统一模式
实战Diff
29
实战：嵌入到React/Vue组件
封装React组件 · Vue组件 · Props/事件
实战ReactVue
30
项目总结与展望
架构回顾 · 性能指标 · LSP集成 · AI辅助
总结未来