ACEエディタでコードを強調表示するにはどうすればよいですか？

Question

私は10個以上の小さなコードスニペットをシンタックスで強調表示し、それをクリックしてACEエディタで編集できるようにしたいと思っています。それぞれのエディタ全体を設定するよりもはるかに速いと思います。私はあります参照simple command for setting up an ACE editor：

​​

エディタを設定せずに、単にハイライトテキストへのAPIを呼び出すための簡単な方法はありますか？理想的なAPIはテキストを取り込み、強調表示に使用できるタグをHTMLに返します。私はJavaScriptのための特化したハイライトライブラリがあることを知っていますが、表示されているテキストと編集中のテキストの両方で同じハイライターを使用してみたいと思います。

Answer 1

サーバー側のハイライト（node.jsで実行されています）availableがあります。これは、Webベースのjavascriptに移植するのはかなり簡単です。

Answer 2

ハイライトの単語：

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

Answer 3

まずあなたはグローバル変数として、あなたの行番号を宣言したい：行が

editor.getSession().removeMarker(marker); 

ハイライト：

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

強調表示された単語を削除します。

var erroneousLine; 

これは、パラメータとして行番号（lineNumber）を取り込むhighlightError関数です。エラーメッセージや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の代わりに、以下：

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構文（ACE-明日のテーマ）をハイライトする必要があります

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

この機能は、すでに強調表示された行

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

Answer 4

アイデアがunhighlightsエディター全体を読み込むことなく、ガターを使わずにテキストを編集することができます。