Smart Code Editor

智能代码编辑器 - 支持多语言、语法高亮、代码运行，可在 Vue2/3、React、原生 JS 中使用

✨ 特性

• 🎨 语法高亮 - 基于 Monaco Editor，VS Code 同款编辑器
• 💡 智能提示 - 完整的代码补全和智能提示
• 🌐 多语言支持 - 支持 JavaScript、Python、Java、C++、Go 等多种语言
• ▶️ 代码运行 - 支持在线运行代码（JavaScript/TypeScript）
• 🎭 主题切换 - 明暗主题随心切换
• 📱 响应式布局 - 左右分栏，可拖拽调整大小
• 🔌 跨框架 - Vue2/3、React、原生 JS 全支持
• ⚙️ 高度可配置 - 丰富的配置选项

📦 安装

npm install smart-code-editor
# 或
pnpm add smart-code-editor
# 或
yarn add smart-code-editor

🚀 快速开始

原生 JavaScript

import { SmartCodeEditor } from "smart-code-editor";

const editor = new SmartCodeEditor({
  container: "#editor",
  language: "javascript",
  theme: "vs-dark",
  enableRun: true,
  onChange: (value) => console.log(value),
  onRun: (result) => console.log(result),
});

Vue 3

<template>
  <SmartCodeEditor
    v-model="code"
    language="javascript"
    theme="vs-dark"
    :enable-run="true"
    @run="handleRun"
  />
</template>

<script setup>
import { ref } from "vue";
import SmartCodeEditor from "smart-code-editor/adapters/vue";

const code = ref('console.log("Hello World!")');

const handleRun = (result) => {
  console.log(result);
};
</script>

React

import { SmartCodeEditor } from "smart-code-editor/adapters/react";

function App() {
  const [code, setCode] = useState('console.log("Hello World!")');

  return (
    <SmartCodeEditor
      value={code}
      onChange={setCode}
      language="javascript"
      theme="vs-dark"
      enableRun
      onRun={(result) => console.log(result)}
    />
  );
}

📖 API 文档

SmartCodeEditorOptions

| 参数 | 类型 | 默认值 | 说明 | | -------------------- | --------------------- | ------------ | ---------------- | | container | HTMLElement | string | - | 编辑器容器 | | language | string | 'javascript' | 编程语言 | | theme | string | 'vs-dark' | 编辑器主题 | | value | string | '' | 初始代码 | | readOnly | boolean | false | 只读模式 | | showQuestionPanel | boolean | true | 显示试题面板 | | questionContent | string | '' | 试题内容（HTML） | | enableRun | boolean | true | 启用代码运行 | | enableLanguageSwitch | boolean | true | 允许切换语言 | | onChange | Function | - | 代码变化回调 | | onRun | Function | - | 运行完成回调 | | onLanguageChange | Function | - | 语言切换回调 |

方法

• getValue(): 获取代码
• setValue(code): 设置代码
• getLanguage(): 获取当前语言
• setLanguage(language): 设置语言
• setTheme(theme): 设置主题
• run(): 运行代码
• destroy(): 销毁编辑器

🌈 支持的语言

• JavaScript / TypeScript
• Python
• Java
• C / C++
• Go
• HTML / CSS
• SQL
• 更多...

⚙️ 扩展性

新增语言

只需在 src/config/languages.ts 添加配置：

{
  id: 'rust',
  name: 'Rust',
  monacoId: 'rust',
  icon: '🦀',
  defaultCode: 'fn main() {\n    println!("Hello, World!");\n}',
  canRun: true,
  runnerType: 'remote'
}

所有框架适配器自动支持新语言！

📄 License

ISC

👨‍💻 Author

haichao_kk