CodeMirror 2-하이라이트만 (편집기 없음)

CodeMirror 2-하이라이트 만 (편집기 없음)

---

CodeMirror 2 를 사용하여 DIV또는 PRE태그 에서 코드를 강조 표시 할 수 있습니까 (편집기없이)?

hightlightText () 함수로 할 수 있었던 CodeMirror 1처럼? 예 : http://codemirror.net/1/highlight.html , 실행 강조 표시 (아래 강조 표시된 텍스트)를 누른 후

또한과 같은 인라인 요소의 코드를 강조 표시 <code>하고 Google의 Prettify처럼 결과를 인라인으로 유지할 수 있습니까?

---

훨씬 더 좋고 쉬운 해결책은 다음과 같이 CodeMirror 인스턴스의 readOnly 속성을 true로 설정하는 것입니다.

$('.code').each(function() {

    var $this = $(this),
        $code = $this.html();

    $this.empty();

    var myCodeMirror = CodeMirror(this, {
        value: $code,
        mode: 'javascript',
        lineNumbers: !$this.is('.inline'),
        readOnly: true
    });

});

.code코드가 포함 된 태그에 클래스 를 추가하면 구문이 강조 표시됩니다. 또한 클래스를 사용하여 인라인 코드에 대한 지원을 추가했습니다 .inline.

jsfiddle의 예

---

다소 늦은 업데이트로 CodeMirror 2는 최근이 기능을 얻었습니다. http://codemirror.net/demo/runmode.html 참조

---

사실 당신은 할 수 없습니다. Codemirror2는 모든 구현이 클로저에 숨겨지는 방식으로 작성됩니다. 사용할 수있는 공용 메서드는 http://codemirror.net/manual.html 문서에 설명되어 있습니다. 사용
가능한 유일한 옵션은 구문 형광펜을 사용하거나 CodeMirror2 코드를 살펴보고 필요한 부분을 제거하는 것입니다.
마지막 옵션을 선택하려면 다음 사항에주의하십시오.

function refreshDisplay(from, to) method

선을 반복하고 강조 표시합니다.

---

편집
더 간단한 방법이 존재한다는 것을 깨달았습니다. 아래 방법 2를 읽으십시오. 이전 방법과 설명을 그대로 유지하고 개선 된 jQuery 코드 만 포함합니다.

---

패키지의 기본 방법에 대해 묻는 경우 대답은 아니오이며textarea . 그러나 해결 방법을 사용할 수 있다면 여기에 작동하는 (테스트 된) 해결 방법이 있습니다.

여기에서 jQuery를 사용했지만 사용이 필수는 아니며 jQuery 코드만큼 길고 깔끔하지는 않지만 순수한 js 코드로 동일한 결과를 얻을 수 있습니다.

이제 해결 방법을 살펴 보겠습니다.

당신이 있다고 가정 <pre>하면 편집기가없는 구문 강조 codemirror 컨테이너로 전환 할 것인지, 코드 내부에 :

<pre id="mycode">
<?php
  echo 'hi';
  $a = 10;
  if($a == 5) echo 'too small';
?>
</pre>

당신이하는 일은

1. 변화 <pre>에를 <textarea>,
2. textarea에 codemirror를 붙이고,
3. 가짜 커서를 숨기고 숨긴 상태로 유지합니다.
4. 숨겨진 codemirror의 텍스트 영역이 초점을 잡도록 허용하지 마십시오 (그렇다면 다시 잡으십시오).

마지막 작업을 위해 Travis Webb이 제안한 방법 을 사용했습니다 . 다음은이 네 가지 작업을 수행하는 jQuery 코드입니다.

$(document).ready(function() {

    // (1) replace pre with textarea
    $('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>');

    // (2) attach codemirror 
    var editor = CodeMirror.fromTextArea($("#code"), {
        lineNumbers: true,
        mode: "application/x-httpd-php"
    });

    // (3) hide the fake cursor    
    $('pre.CodeMirror-cursor').hide();

    // [4] textarea to grab and keep the focus
    $('body').append('<textarea id="tricky" style="height: 1px; position: fixed; width: 1px; top: 0; margin-top: -100px;" wrap="off"></textarea>');

    // (4) grab focus
    $('#tricky').focus();

    // [4] if focus is lost (probably to codemirror)
    $('#tricky').blur(function() {

            // (4) re-claim focus
            $('#tricky').focus();

            // (3) keep the fake cursor hidden
            $('pre.CodeMirror-cursor').hide();
    });

});

---

방법 2

커서 등으로 씨름하는 대신 편집기를 틱하게 만드는 요소를 제거 할 수 있습니다. 다음은 코드입니다.

$(document).ready(function() {
    $('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>'); 
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        mode: "application/x-httpd-php"
    });

    $('pre.CodeMirror-cursor').remove();
    $('div.CodeMirror').find('textarea').blur().parent().remove();
    $('div.CodeMirror').find('pre:first').remove();
    $('textarea#code').remove();
});

---

독립형 코드 구문 하이 라이터를 사용해야합니다. SyntaxHighlighter 3 은 정말 잘 작동합니다.

CodeMirror를 정말로 원한다면 readOnly옵션이 있습니다.

var myCodeMirror = CodeMirror(function(elt) {
    myElement.parentNode.replaceChild(myElement, elt); // myElement is your <pre> or <div>
  }, {
    value: myElement.value,
    readOnly: true
  });

---

CodeMirror V2에는 runmode.js가 포함되어 있습니다.

나는 거터와 함께 실행 모드를 사용하는 예제를 작성했습니다.

확인 : http://jsfiddle.net/lyhcode/37vHL/2/

---

다음은 codemirror runmode 및 jquery를 사용하는 더 간단한 솔루션입니다.

<pre class='code'>{:message => 'sample code'}</pre>

$(document).ready(function() {
    $('.code').each(function(index, e) {
        $(e).addClass('cm-s-default'); // apply a theme class
        CodeMirror.runMode($(e).text(), "javascript", $(e)[0]);
    });
});

---

CM2는 찾고있는 기능을 직접 지원하지 않습니다. 그러나 onFocus사용자가 Codemirror 요소에 집중하지 못하도록하여 편집을 허용하지 않도록 지원 하는 처리기 와 관련된 트릭을 사용했습니다 . 이어지는 내 설명은 http://codemirror.net/manual.html에서 살펴본 것으로 가정합니다 . 이 기술에 jQuery를 사용하고 싶겠지 만 필수는 아닙니다. 당신은 코드를 갖는 것에 대해 이야기하고 div있으므로 Codemirror를 div요소 에 부착하는 방법을 알고 있다고 가정합니다 .

1. <input id="tricky">숨겨진 일종의 텍스트 필드를 만듭니다 . 원하는 "숨기기"기술을 사용할 수 있지만 CSS를로 설정해도 "display:none"작동하지 않는다고 말씀 드릴 수 있습니다 . visibility:hidden작동하지만 페이지 어딘가에 div를 배치하는 것이 더 좋습니다.
2. onFocus위 링크의 Codemirror2 문서에 따라 핸들러를 설정합니다 .
3. onFocus이벤트 핸들러 내에서 다음과 같은 작업을 수행 하십시오 .
   
   $("tricky").focus();
   jQuery없이 :
   document.getElementById("tricky").focus();

포커스를 보이지 않는 필드로 즉시 리디렉션하고 아무도 표시하는 코드를 편집 할 수 없습니다. 이 방법을 이길 수있는 영리한 방법이있을 수 있지만 99 %의 경우에 효과가 있습니다. 약간 까다로울 수 있지만 적어도 Codemirror의 내부에 신경 쓸 필요는 없습니다.

ReferenceURL : https://stackoverflow.com/questions/5521137/codemirror-2-highlight-only-no-editor