Search code examples
syntaxace-editor

Ace editor syntax highlighting not working. Why is the cssClass undefined?

I am getting the following error in the inspector. 

Uncaught TypeError: Cannot read property 'cssClass' of undefined ace.js:15750

The setTheme and setMode are in the same directory as the ace.js.

Here is the HTML markup: 

<!DOCTYPE html>
 <html>
   <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>
        Ace is the Place
    </title>
    <style type="text/css" media="screen">
        #editor { 
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        }
    </style>
    </head>
    <body>
        Hello World!
        <div id="editor"></div>
        <script src="bower_components/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var editor = ace.edit("editor");
                    editor.setTheme("bower_components/ace/build/src/monokai");
                    editor.getSession().setMode("bower_components/ace/build/src/html");
        </script>
    </body>
</html>
Solution

  • There is no file named "bower_components/ace/build/src/monokai" use

    editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");

    instead. This will work because Ace have a special mapping for paths starting with "ace".