Tôi làm cách nào để đánh dấu mã bằng trình chỉnh sửa ACE?

Question

Tôi muốn cú pháp làm nổi bật hơn một chục đoạn mã nhỏ và sau đó làm cho chúng có thể chỉnh sửa bằng Trình chỉnh sửa ACE bằng cách nhấp vào chúng, vì tôi nghĩ rằng nó sẽ nhanh hơn nhiều so với việc thiết lập trình chỉnh sửa đầy đủ cho mỗi. Tôi thấy có một 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> 

Có một cách đơn giản để gọi vào API để chỉ nổi bật văn bản mà không thành lập các biên tập viên? API lý tưởng sẽ lấy một số văn bản và trả về HTML với các thẻ có thể được sử dụng để làm nổi bật. Tôi biết có các thư viện làm nổi bật chuyên biệt cho JavaScript, nhưng tôi muốn thử sử dụng cùng một highlighter cho cả văn bản đang được hiển thị và văn bản đang được chỉnh sửa.

Answer 1

Có phiên bản phía máy chủ của công cụ đánh dấu (chạy ở node.js) available, có thể sẽ được chuyển sang webbased javascript khá dễ dàng.

Answer 2

Highlight từ:

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

Tháo từ được đánh dấu:

editor.getSession().removeMarker(marker); 

Highlight dòng:

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

Answer 3

Trước tiên, bạn muốn khai báo số dòng của bạn như là một biến toàn cầu .

var erroneousLine; 

Đây là hàm đánh dấuMỗi hàm nhận một số dòng (lineNumber) làm thông số của nó. có thể được kích hoạt từ một thông báo lỗi hoặc sử dụng editor.selection.getCursor().row để nhận hàng hiện tại hoặc một thứ khác.

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

Lưu ý rằng tôi đã tuyên bố là errorHighlight, là cách đánh dấu này. Ở vị trí css của bạn như sau:

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

Chức năng này unhighlights dòng được đánh dấu

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

Answer 4

Một ý tưởng:

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

Chức năng này nên làm nổi bật cú pháp SQL (ace-mai theme) trong văn bản đã cho mà không tải toàn bộ trình chỉnh sửa và không có máng xối.