CodeMirror：专为浏览器设计 多功能 Web 代码编辑器

CodeMirror 是一个功能强大的、可嵌入的代码编辑器，专为浏览器设计。它支持多种编程语言，并提供了丰富的功能，如语法高亮、代码自动补全、行号显示、代码折叠等。

功能与特性

1. 功能强大的代码编辑器

CodeMirror 提供了以下功能：

• • 语法高亮：支持多种编程语言的语法高亮。
• • 代码自动补全：支持代码自动补全功能。
• • 行号显示：显示代码行号。
• • 代码折叠：支持代码折叠功能。
• • 主题支持：支持多种主题，可以自定义编辑器的外观。
• • 丰富的插件支持：可以通过插件扩展编辑器的功能。

2. 响应式设计

CodeMirror 支持响应式设计，确保在不同屏幕尺寸和设备上都能提供良好的用户体验。

3. 自定义样式

可以通过 CSS 或内联样式轻松自定义编辑器的外观和行为。

4. 事件支持

提供了丰富的事件支持，如 onChange、onCursor 等，方便开发者在编辑器操作过程中执行自定义逻辑。

安装与使用

1. 安装

你可以通过 npm 或 yarn 来安装 CodeMirror：

npm install codemirror
# 或者
yarn add codemirror

如果你只需要在 HTML 文件中使用，也可以通过 CDN 引入：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>

2. 基本使用

使用 CodeMirror 创建一个代码编辑器：

<textarea id="editor"></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script>
  const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
  mode: 'javascript', // 设置语言模式
  lineNumbers: true,  // 显示行号
  theme: 'default',   // 设置主题
  viewportMargin: Infinity // 优化滚动性能
  });
</script>

配置选项

CodeMirror 提供了丰富的配置选项，可以满足各种复杂的需求。以下是一些常用的配置：

1. mode

指定编辑器的语言模式。CodeMirror 支持多种语言，如 JavaScript、Python、HTML 等。

mode: 'javascript'

2. lineNumbers

设置为 true 时，显示代码行号。

lineNumbers: true

3. theme

设置编辑器的主题。CodeMirror 提供了多种主题，如 default、monokai 等。

theme: 'monokai'

4. readOnly

设置为 true 时，编辑器将变为只读模式。

readOnly: true

5. viewportMargin

优化滚动性能，设置为 Infinity 可以确保编辑器在滚动时不会频繁重新渲染。

viewportMargin: Infinity

事件处理

CodeMirror 提供了丰富的事件支持，以下是一些常用的事件：

1. onChange

代码内容发生变化时触发的回调函数。参数包括：

• • editor：编辑器实例
• • change：变更信息

editor.on('change', (editor, change) => {
  console.log('Code changed:', editor.getValue());
});

2. onCursorActivity

光标移动时触发的回调函数。参数包括：

• • editor：编辑器实例

editor.on('cursorActivity', (editor) => {
  console.log('Cursor moved to:', editor.getCursor());
});