ACE 편집기로 코드를 강조 표시하려면 어떻게해야합니까?

12 개 이상의 작은 코드 스 니펫을 구문 강조하고 ACE Editor를 클릭하여 편집 할 수 있습니다. 각 편집기마다 전체 편집기를 설정하는 것보다 훨씬 빠를 것이라고 생각합니다. 나는 거기에 참조하십시오 simple command for setting up an ACE editor :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>

편집기를 설정하지 않고 단지 강조 텍스트에 대한 API를 호출하는 간단한 방법이 있나요? 이상적인 API는 텍스트를 사용하고 강조 표시에 사용할 수있는 태그가있는 HTML을 반환합니다. 자바 스크립트 용으로 특화된 라이브러리가 있다는 것을 알고 있지만 표시되는 텍스트와 편집중인 텍스트 모두에 대해 동일한 형광펜을 사용하려고합니다.

출처

2012-01-12 Ben Atkin

무엇을 사용하셨습니까? – Ari

에이스 에디터는 기본적으로 에디터 디스플레이 만하는 읽기 전용 모드를 가지고 있지만 전체 에디터의 오버 헤드는 여전히 발생합니다. 스피드는 커다란 문제는 아니지만 에디터의 크기는 더 크다. 나는 그것을 편집과 몇몇 사이트에서의 디스플레이 모두에 사용하며 잘 작동한다. –

노드 라이저 (node.js에서 실행 됨) available의 서버 측 버전이 있는데, 웹 기반의 자바 스크립트로 쉽게 이식 할 수 있습니다.

출처

2012-01-24 23:55:49

강조 단어 :

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

출처

2012-02-21 10:47:54 megas

더 이상 작동하지 않는 것 같습니다. http://jsbin.com/acotuv/1/edit – alessioalex

먼저 전역 변수로 줄 번호를 선언 할 : 라인이

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을 사용하여 현재 행이나 다른 것을 가져올 수 있습니다. 이 강조 표시됩니다 어떻게 내가 errorHighlight을 선언 한

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

공지 사항. 당신의 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); 
}

출처

2015-01-14 21:28:32 maudulus

생각 강조 표시를 해제 주어진 텍스트에서 전체 편집기를로드하지 않고 거터없이.

출처

2015-08-24 10:02:51 trimstring

ACE 편집기로 코드를 강조 표시하려면 어떻게해야합니까?

답변

관련 문제