CODEWITHSUNDEEP
javascriptcodemirror
Morgan
Morgan

Reputation: 927

Highlight active line in CodeMirror

Looking at the demo here, I downloaded the active-line.js file and included it in my HTML as shown in the demo but nothing happens. I included it like so:

<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">

This is how I initialise CodeMirror:

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

Syntax highlighting and line numbers work as they should except the active line highlighting. Do I need to tweak anything in the options as well?

Upvotes: 2

Views: 5794

Answers (2)

N. Kudryavtsev
N. Kudryavtsev

Reputation: 4071

For anyone who builds their project with Webpack or other similar tools here is a full sequence of actions needed to highlight active lines:

  1. Add the following import: import 'codemirror/addon/selection/active-line';

  2. On CodeMirror instance creation specify styleActiveLine option:

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

  3. From now CSS-class .CodeMirror-activeline will be automatically added to currently active line, at the same time .CodeMirror-activeline-background class will be also added to its child div that is responsible for background. The default background style should be applied automatically when you add import 'codemirror/lib/codemirror.css'.

    If not, you may still need to write a background style manually. For example:

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

    Or, if you would like to highlight active lines only when CodeMirror element is focused:

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

    If the default style was applied, but you would like to turn it off when CodeMirror element is not focused:

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

  4. Enjoy :)

Upvotes: 5

Morgan
Morgan

Reputation: 927

I figured out how to do this.

Initialise your CodeMirror object like this:

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

The line styleActiveLine: true is what you basically need. styleActiveSelected: true is optional and it makes it so active line styling persists when you select a line.

Upvotes: 2

Related Questions