Search code examples
javascriptjqueryhtmlcsscodemirror

Code Mirror - Make a given line completely greyed out

I'm working with Code Mirror and I'm trying to make a given line completely greyed out (so it looks like a comment usually looks like in code editors). So far I've come up with this:

editorDiv = this;

var editor = CodeMirror(function(elt) {
  editorDiv.parentNode.replaceChild(elt, editorDiv);
}, {
  value:       "function myScript(){\n\treturn 100; \n}\n",
  lineNumbers: true,
  readOnly:    "nocursor",
  theme:       "monokai"
});

console.log(editor);

var line = editor.getLineHandle(1);
console.log(line);

editor.addLineClass(line, "text", "greyed-out");

Let's say I want the return 100; line to be greyed out (which is line 2 in the editor and line 1 as per the API). My idea was to add the greyed-out class to this line and having the class be something like:

.greyed-out { color: grey; }

However, this does not work since there are other classes from Code Mirror which have higher priority and overwrite the greyed-out class.

I'm not sure if there's a specific way to do this through Code Mirror's API, or a general way to remove the unwanted attributes from the higher priority classes.

Could someone give me some help with this?

Solution

  • The best way to over-ride a rule from another class is to give your selector a higher specificity, for example:

    #container .foo-list li .greyed-out { color: grey; }

    Alternatively, you could use !important on the rule, but this is considered bad practice and should be avoided where at all possible.

    .greyed-out { color: grey !important; }