javascript 如何使用 ACE 编辑器突出显示代码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8832320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I highlight code with ACE editor?
提问by Benjamin Atkin
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:
我想在语法上突出显示十多个小代码片段，然后通过单击它们使它们可以使用 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>
Is there a simple way to call into the API to just highlightthe 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.
有没有一种简单的方法可以调用 API 来突出显示文本而不设置编辑器？理想的 API 将接收一些文本并返回带有可用于突出显示的标签的 HTML。我知道有专门的 JavaScript 高亮库，但我想尝试对正在显示的文本和正在编辑的文本使用相同的荧光笔。
采纳答案by Jan Jongboom
回答by megas
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");
回答by maudulus
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().rowto get the current row, or something else.
这是 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");
}
Notice that I have declared a errorHighlight, which is how this will be highlighted. In your css place the following:
请注意，我已经声明了 a errorHighlight，这是突出显示的方式。在您的 css 中放置以下内容：
.errorHighlight{
position:absolute;
z-index:20;
background-color:#F4B9B7;
}
This function unhighlights the already highlighted line
此功能取消突出显示已突出显示的行
function unhighlightError(){
editor.getSession().removeMarker(erroneousLine);
}
回答by trimstring
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.
此函数应在给定文本中突出显示 SQL 语法（ace-tomorrow 主题），而无需加载整个编辑器和装订线。
