在 CodeMirror 中突出显示活动行

Question

看看这里的演示，我下载了该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. 享受 ：）