ACE editörüyle kodu nasıl vurgulayabilirim?

Question

Bir düzine küçük kod parçasından daha fazlasını vurgulamak ve daha sonra ACE Editör ile bunları düzenlenebilir hale getirmek istiyorum, çünkü her biri için tam düzenleyiciyi kurmaktan çok daha hızlı olacağını düşünüyorum. Ben orada bkz 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> 

editörü ayarlamadan sadece vurgulamak metin için API içine çağırmak için basit bir yolu var mı? İdeal API bazı metinlerde yer alacak ve HTML'yi vurgulamak için kullanılabilecek etiketlerle döndürecektir. JavaScript için özel vurgulayıcı kütüphanelerin olduğunun farkındayım, ancak hem görüntülenmekte olan metin için hem de düzenlenmiş olan metin için aynı vurgulayıcıyı kullanmayı denemek istiyorum.

Answer 1

Vurgulayıcıya ait bir sunucu tarafı sürümü (node.js'de çalışır) available, büyük olasılıkla web tabanlı javascript için taşınabilir olacak oldukça kolaydır.

Answer 2

vurgulayın kelime:

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

Answer 3

Önce bir genel değişken olarak satır numarasını bildirmek istiyorum: çizgi

editor.getSession().removeMarker(marker); 

Vurgu:

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

vurgulanan kelimeyi kaldır .

var erroneousLine; 

Bu

parametresi olarak bir satır numarası ( lineNumber) alır highlightError fonksiyonudur. Bu, bir hata mesajından tetiklenebilir veya geçerli satırı veya başka bir şeyi almak için editor.selection.getCursor().row'u kullanabilir. Bu vurgulanır nasıl bir errorHighlight ilan ettiler

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

Bildirimi. senin css yerine aşağıdaki:

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

Bu fonksiyon, SQL sözdizimi vurgulamak gerekir

(as-yarın teması):

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

Bu fonksiyon zaten vurgulanmış hattını oluşturmak

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

Answer 4

bir fikir unhighlights Verilen metinde tüm editörü yüklemeden ve oluk olmadan.