Как я могу выделить код с помощью редактора ACE?
-
27-10-2019 - |
Вопрос
Я хотел бы выделить в синтаксисе более десятка небольших фрагментов кода, а затем сделать их редактируемыми с помощью редактора ACE, щелкнув по ним, поскольку я думаю, что это будет намного быстрее, чем настраивать полный редактор для каждого.Я вижу, что есть простая команда для настройки редактора ACE :
родовое словоЕсть ли простой способ вызвать API, чтобы просто выделить текст, не настраивая редактор?Идеальный API будет принимать некоторый текст и возвращать HTML с тегами, которые можно использовать для выделения.Я знаю, что существуют специализированные библиотеки подсветки для JavaScript, но я хотел бы попробовать использовать один и тот же маркер как для отображаемого, так и для редактируемого текста.
Решение
Существует серверная версия подсветки (которая работает в node.js) доступен , который, вероятно, будет довольно легко переносить на веб-JavaScript.
Другие советы
Выделите слово:
родовое словоУдалить выделенное слово:
родовое словоВыделите строку:
родовое слово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);
}
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.