Search code examples
javascriptace-editor

ACE Editor Custom Highlighting Rule

I can't seem to find how to create a custom syntax highlighting rule for the ACE code editor.

My editor is configured for PHP mode as follows (and is working perfectly);

    var phpeditor = ace.edit("php_inc");
    phpeditor.setTheme("ace/theme/dreamweaver");
    phpeditor.getSession().setMode("ace/mode/php");
    phpeditor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: false,
    });

What I would like the editor to do is to treat all instances of %%variable%% (with any text between the percent signs) to be highlighted with a custom rule and treated as a variable.

For example;

<?php echo %%my_variable_name%%; ?>

Is there a way of extending the editor to allow this functionality?

Solution

  • Easiest way is to modify php_highlight_rules file and add https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/php_highlight_rules.js#L900 a rule

    {
    token: "variable",
    regex: "%%\\w+%%"
}

    doing this dynamically instead, is a bit harder as ace doesn't provide convenient way to hook into mode creation, if you need to do that, perhaps you should open an issue on ace site on github.