如何使用ACE編輯器突出顯示代碼？

我想語法突出顯示十幾個小代碼片段，然後通過單擊它們使它們可以通過ACE Editor進行編輯，因爲我認爲它比爲每個編輯器設置完整編輯器要快得多。我看到有一個simple command for setting up an ACE editor：如何使用ACE編輯器突出顯示代碼？

有一個簡單的方法來調用到API只是亮點文本不設置編輯器？理想的API將採用一些文本並返回帶有可用於突出顯示的標籤的HTML。我知道JavaScript有專門的突出顯示庫，但我想嘗試使用相同的熒光筆顯示正在顯示的文本和正在編輯的文本。

來源

2012-01-12 Ben Atkin

你用什麼？ – Ari 2013-09-03 18:15:04

Ace Editor有一個只讀模式，它基本上只讓編輯器顯示，但你仍然會得到完整編輯器的開銷。速度雖然不是一個大問題 - 更多的是編輯器的大小。我用它在幾個網站上進行編輯和顯示，效果很好。 – 2016-04-12 09:22:31

有一個服務器端版本的熒光筆（它運行在node.js中）available，這可能很容易移植到基於web的javascript。

來源

2012-01-24 23:55:49

高亮顯示詞：

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

刪除突出兩個字：

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

來源

2012-02-21 10:47:54 megas

這似乎不再起作用了？ http://jsbin.com/acotuv/1/edit – alessioalex 2013-04-15 21:02:28

首先要聲明的行號作爲一個全局變量：行

editor.getSession().removeMarker(marker);

亮點。

var erroneousLine;

這是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"); 
}

請注意，我已經宣佈errorHighlight，這將如何突出顯示。在CSS的地方如下：

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

此功能unhighlights已經突出顯示的行

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

來源

2015-01-14 21:28:32 maudulus

一個想法：

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-明天主題）在給定的文本沒有加載整個編輯器和沒有陰溝。

來源

2015-08-24 10:02:51 trimstring

如何使用ACE編輯器突出顯示代碼？

回答

相關問題