跳到主要内容

code-editor

CodeMirror 6 编辑器绑定共享的语言描述与主题类型。

功能特性​

  • 多语言描述：JavaScript、TypeScript、JSON、HTML、CSS、SQL、Markdown、Python 等
  • 按需加载：语言解析器通过 LanguageDescription.load() 动态加载
  • 统一查找：按语言名称或别名进行大小写不敏感查找
  • 零框架依赖：供 Angular、React、Vue 或其他 CodeMirror 6 集成复用

何时使用​

  • 需要为 CodeMirror 6 编辑器加载语言支持
  • 需要在多个框架绑定之间共享同一份语言列表
  • 需要向框架绑定传入自定义语言描述

框架集成​

本包不创建编辑器实例。完整组件请使用：

  • Angular: @aiao/code-editor-angular
  • React: @aiao/code-editor-react
  • Vue: @aiao/code-editor-vue

安装​

npm install @aiao/code-editor
# 或
pnpm add @aiao/code-editor

使用​

import { findLanguageByName, SUPPORT_LANGUAGES } from '@aiao/code-editor';

const language = findLanguageByName('typescript');

if (language === null) {
  throw new Error('Unsupported language');
}

const languageSupport = await language.load();
const availableLanguageNames = SUPPORT_LANGUAGES.map(item => item.name);

findLanguageByName() 只匹配语言名称和别名，不按文件扩展名或文件名查找。返回的 languageSupport 可作为 CodeMirror 扩展交给具体框架绑定或编辑器状态。

完整示例​

Interfaces​

InterfaceDescription
CodeEditorLanguageDescription-
CodeEditorLanguageSupport-

Type Aliases​

Type AliasDescription
CodeEditorExtension-
CodeEditorThemeCodeEditor 主题类型

Variables​

VariableDescription
CSS-
HTML-
JavaScript-
JSON-
JSX-
Markdown-
PostgreSQL-
Python-
Sass-
SCSS-
SQL-
SQLite-
SUPPORT_LANGUAGES-
TSX-
TypeScript-
XML-

Functions​

FunctionDescription
findLanguageByName-