CodeMirror api

在 CodeMirror 编辑器中,要实现光标所在行高亮,可以通过监听 cursorActivity 事件并在事件触发时设置高亮样式。以下是一个简单的示例:

var editor = CodeMirror.fromTextArea(document.getElementById('your-textarea-id'), {
  // ... 其他配置项
});

editor.on('cursorActivity', function(cm) {
  var cursor = cm.getCursor();
  cm.operation(function() { // 使用operation包裹避免多次刷新
    cm.removeLineClass(hlLine, 'background', 'CodeMirror-line-highlight'); // 移除先前高亮的行样式(如果有)
    hlLine = cm.getLineHandle(cursor.line); // 获取当前光标所在行的句柄
    cm.addLineClass(hlLine, 'background', 'CodeMirror-line-highlight'); // 给当前行添加高亮样式
  });
});

var hlLine = null; // 用于记录当前高亮行的句柄

// 定义高亮样式(通常在CSS文件中定义,这里仅作为演示)
CodeMirror.defineStyle('CodeMirror-line-highlight', {
  backgroundColor: '#FFFF00',
  backgroundAttachment: 'fixed'
});

这段代码会在每次光标活动(移动、插入、删除等)时,清除之前高亮的行,并将当前光标所在行设置为高亮状态。高亮样式通过 addLineClass 方法添加,并且要在 CSS 中预先定义好 .CodeMirror-line-highlight 的样式。如果已有对应的样式名,可以直接使用那个名称代替 'CodeMirror-line-highlight'