Как я могу выделить код с помощью редактора ACE?

Question

Я хотел бы выделить в синтаксисе более десятка небольших фрагментов кода, а затем сделать их редактируемыми с помощью редактора ACE, щелкнув по ним, поскольку я думаю, что это будет намного быстрее, чем настраивать полный редактор для каждого.Я вижу, что есть простая команда для настройки редактора ACE :

родовое слово

Есть ли простой способ вызвать API, чтобы просто выделить текст, не настраивая редактор?Идеальный API будет принимать некоторый текст и возвращать HTML с тегами, которые можно использовать для выделения.Я знаю, что существуют специализированные библиотеки подсветки для JavaScript, но я хотел бы попробовать использовать один и тот же маркер как для отображаемого, так и для редактируемого текста.

Answer 1

Существует серверная версия подсветки (которая работает в node.js) доступен , который, вероятно, будет довольно легко переносить на веб-JavaScript.

Answer 2

Выделите слово:

родовое слово

Удалить выделенное слово:

родовое слово

Выделите строку:

родовое слово

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.