javascript - 在 CodeMirror 中突出显示事件行

Question

查看 demo在这里，我下载了 active-line.js 文件并将其包含在我的 HTML 中，如演示中所示，但没有任何反应。我把它包括在内:

<script src="/js/codemirror.js"></script>
<script src="/js/sql.js"></script>
<script src="/js/active-line.js"></script>
<link rel="stylesheet" type="text/css" href="/css/codemirror.css">

这是我初始化 CodeMirror 的方式:

<script>
    CodeMirror.fromTextArea(document.getElementById("maple_code"), {
        lineNumbers: true,
        mode: "text/x-mysql"
    });
</script>

除了事件行突出显示外，语法突出显示和行号正常工作。我还需要调整选项中的任何内容吗？

Answer 1

对于任何使用 Webpack 或其他类似工具构建项目的人来说，这里有一个完整高亮事件行所需的操作序列:

1. 添加以下导入:import 'codemirror/addon/selection/active-line';

2. 在创建 CodeMirror 实例时指定 styleActiveLine 选项:

   const editor = CodeMirror.fromTextArea(
       textAreaElement, 
       {
           styleActiveLine: { nonEmpty: true }
           /* add other options here if you need */
       }
   )
   

3. 从现在开始，CSS-class .CodeMirror-activeline 将自动添加到当前事件行，同时 .CodeMirror-activeline-background 类将也被添加到负责背景的子 div 中。添加 import 'codemirror/lib/codemirror.css' 时，应自动应用默认背景样式。

   如果没有，你可能还需要手动写一个背景样式。例如:

   .CodeMirror-activeline-background {
       background: #e8f2ff;
   }
   

   或者，如果您只想在 CodeMirror 元素获得焦点时突出显示事件行:

   .CodeMirror-focused .CodeMirror-activeline-background {
       background: #e8f2ff;
   }
   

   如果应用了默认样式，但您想在 CodeMirror 元素未获得焦点时将其关闭:

   .CodeMirror:not(.CodeMirror-focused) .CodeMirror-activeline-background {
       background: unset;
   }
   

4. 享受 :)