How can I highlight code with ACE editor?

Question

I'd like to syntax highlight more than a dozen small snippets of code and then make them editable with ACE Editor by clicking on them, since I think it would be much faster than setting up the full editor for each. I see there's a simple command for setting up an ACE editor:

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
};
</script>

Is there a simple way to call into the API to just highlight the text without setting up the editor? The ideal API would take in some text and return HTML with tags that could be used for highlighting. I'm aware there are specialized highlighting libraries for JavaScript, but I would like to try using the same highlighter both for text that's being displayed and text that's being edited.

Answer 1

There is a server side version of the highlighter (which runs in node.js) available, that'll probably be portable to webbased javascript fairly easy.

Answer 2

Highlight the word:

var range = new Range(rowStart, columnStart, rowEnd, columnEnd);
var marker = editor.getSession().addMarker(range,"ace_selected_word", "text");

Remove the highlighted word:

editor.getSession().removeMarker(marker);

Highlight the line:

editor.getSession().addMarker(range,"ace_active_line","background");

Answer 3

First you want to declare your line number as a global variable.

var erroneousLine;

This is the highlightError function, which takes in a line number (lineNumber) as its parameter. which could be triggered from an error message or using editor.selection.getCursor().row to get the current row, or something else.

function highlightError(lineNumber) {
  unhighlightError();
  var Range = ace.require("ace/range").Range
  erroneousLine = editor.session.addMarker(new Range(lineNumber, 0, lineNumber, 144), "errorHighlight", "fullLine");
}

Notice that I have declared a errorHighlight, which is how this will be highlighted. In your css place the following:

.errorHighlight{
  position:absolute;
  z-index:20;
  background-color:#F4B9B7;
}

This function unhighlights the already highlighted line

function unhighlightError(){
  editor.getSession().removeMarker(erroneousLine);
}

Answer 4

An idea:

function highlightSyntax(text) {
    var res = [];

    var Tokenizer = ace.require('ace/tokenizer').Tokenizer;
    var Rules = ace.require('ace/mode/sql_highlight_rules').SqlHighlightRules;
    var Text = ace.require('ace/layer/text').Text;

    var tok = new Tokenizer(new Rules().getRules());
    var lines = text.split('\n');

    lines.forEach(function(line) {
      var renderedTokens = [];
      var tokens = tok.getLineTokens(line);

      if (tokens && tokens.tokens.length) {
        new Text(document.createElement('div')).$renderSimpleLine(renderedTokens, tokens.tokens);
      }

      res.push('<div class="ace_line">' + renderedTokens.join('') + '</div>');
    });

    return '<div class="ace_editor ace-tomorrow"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
}

This function should highlight SQL syntax (ace-tomorrow theme) in the given text without loading the whole editor and without the gutter.