Search code examples
javascriptace-editor

temporarily disable/toggle syntax highlighting in ace

Is there a way to toggle syntax-highlighting in ace.js?

I know you can switch between syntax-highlighting modes with editor.setMode(), but what about just straight turning the syntax-highlighting off?

I can't seem to find any docs on this

Solution

  • You can toggle it with css, let's say the class of your ACE editor is .ace-xcode, here you can toggle a class monochrome on it:

    function toggleSyntaxHighlighting() {
  document.querySelector('.ace-xcode').classList.toggle('monochrome');
}

    In your css code. If the class .monochrome is on, disable the color of the spans by assigning this rule:

    .ace-xcode.monochrome span {
    color: initial !important;
}