2

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?

4

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 :)

2

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.

2
  • 2
    styleActiveSelected: true doesn't work. Instead you need to provide an object to styleActiveLine. I.e. styleActiveLine: {nonEmpty: true}.
    – nick
    Mar 16, 2019 at 12:23
  • Neither of these two (setting 'true' or ''{nonEmpty: true}') works for me with jupyterLab 2.1.5. In both cases the line is not highlighted. Jul 15, 2020 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.