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

我想出了如何做到这一点。

像这样初始化你的CodeMirror对象：

var editor = CodeMirror.fromTextArea(document.getElementById("maple_code"), {
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true,
    styleActiveSelected: true,
    mode: "text/x-mysql"
});

行styleActiveLine: true是您基本需要的。 styleActiveSelected: true是可选的，它使得选择一行时活动线样式仍然存在。

Answer 2

对于任何使用Webpack或其他类似工具构建项目的人，这里有一个完整动作序列，以突出显示活动行：

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

在CodeMirror实例创建时，指定styleActiveLine选项：

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

从现在起，CSS类.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;
}
```
享受：）

突出显示CodeMirror中的活动行

2 个答案: