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

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

<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>

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

Ответы

Ответ 1

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

Ответ 2

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

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

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

editor.getSession().removeMarker(marker);

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

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

Ответ 3

Сначала вы хотите объявить свой номер строки как глобальную переменную.

var erroneousLine;

Это функция highlightError, которая принимает номер строки (lineNumber) в качестве ее параметра. который может быть вызван из сообщения об ошибке или с помощью editor.selection.getCursor().row, чтобы получить текущую строку или что-то еще.

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

Обратите внимание, что я объявил errorHighlight, как это будет выделено. В вашем css укажите следующее:

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

Эта функция выделяет уже выделенную строку

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

Ответ 4

Идея:

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>';
}

Эта функция должна выделять синтаксис SQL (тема туза-завтра) в данном тексте без загрузки всего редактора и без желоба.