CODEWITHSUNDEEP
ace-editor
mattd
mattd

Reputation: 57

How to change the theme in an Ace editor?

I've been trying to add syntax highlighting to my web app and found ace. However, after working at the solution provided in the documentation, I am still unable to change the editor theme. Does anyone know how to go about this?

So far I've just initialized the element with the following code

var editor = ace.edit("editor");
editor.getSession().setUseWrapMode(true);
editor.setHighlightActiveLine(true);
editor.setShowPrintMargin(false);
editor.setTheme('ace-builds-master/theme/tomorrow_night.css');
editor.getSession().setMode("ace/mode/javascript");

Upvotes: 3

Views: 11133

Answers (1)

a user
a user

Reputation: 24094

In the build mode argument to setTheme() is not a path but an id of the theme so you need to call .setTheme('ace/theme/tomorrow_night') instead

Note that you also can set all the options in one call using

editor.setOptions({
    useWrapMode: true,
    highlightActiveLine: true,
    showPrintMargin: false,
    theme: 'ace/theme/tomorrow_night',
    mode: 'ace/mode/javascript'
})

or in newer version of ace pass object with options to ace.edit

var editor = ace.edit("editor"{
    useWrapMode: true,
    ...
})

Upvotes: 6

Related Questions