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?

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?

• javascript
• codemirror

Share Improve this question Follow asked May 14, 2018 at 19:25 MorganMorgan 92711 gold badge1414 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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.