javascript - library - CodeMirror 2-Solo resaltado(sin editor)

javascript code editor library

Question

¿ Se puede usar CodeMirror 2 para resaltar el código de una etiqueta DIV o PRE (sin el editor)?

Como CodeMirror 1 solía ser capaz de hacer con la función hightlightText ()? Por ejemplo, aquí: http://codemirror.net/1/highlight.html , después de presionar ejecutar resaltar (el texto resaltado a continuación)

¿También puede resaltar el código de un elemento en línea, como <code> , y mantener los resultados en línea, como hace Prettify de Google?

Answer 1

Aquí hay una solución más simple usando codemirror runmode y 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]);
    });
});

Answer 2

CM2 no admite directamente la función que está buscando. Sin embargo, utilicé un truco relacionado con el controlador onFocus que admiten para onFocus que el usuario se centre en el elemento Codemirror y, por lo tanto, no permita la edición. Mi explicación que sigue presupone que has revisado aquí: http://codemirror.net/manual.html . Probablemente querrá usar jQuery para esta técnica, pero no es obligatorio. Está hablando de tener código en un div así que asumo que sabe cómo adjuntar Codemirror a un elemento div .

1. Cree un campo de texto <input id="tricky"> de algún tipo que esté oculto. Puedes usar cualquier técnica para "esconderlo" lo que desees, pero puedo decirte que configurar CSS para "display:none" no funcionará. visibility:hidden podría funcionar, pero probablemente sea mejor colocar el div fuera de la página en algún lugar.
2. Configure un controlador onFocus acuerdo con la documentación de Codemirror2 en el enlace anterior,
3. Dentro de su onFocus eventos onFocus , haga algo como:
   
   $("tricky").focus();
   o sin jQuery:
   document.getElementById("tricky").focus();

e instantáneamente redirecciona el enfoque a un campo invisible y nadie puede editar el código que se muestra. Probablemente haya alguna forma inteligente de derrotar este método, pero funcionará en el 99% de los casos. Es un poco complicado, pero al menos no tienes que jugar con las entrañas de Codemirror.

Answer 3

CodeMirror V2 contiene un runmode.js.

He escrito un ejemplo usando runmode con gutter.

cheque: http://jsfiddle.net/lyhcode/37vHL/2/

Answer 4

Como una actualización algo tardía, CodeMirror 2 recientemente ganó esta habilidad. Consulte http://codemirror.net/demo/runmode.html

Answer 5

Debería usar un resaltador de sintaxis de código independiente: SyntaxHighlighter 3 funciona realmente bien.

Si realmente desea CodeMirror, hay una opción de solo readOnly :

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

Answer 6

En realidad no puedes. Codemirror2 está escrito de manera que toda la implementación está oculta en los cierres. Los métodos públicos que se pueden usar se describen en la documentación http://codemirror.net/manual.html
Las únicas opciones disponibles son usar otros resaltadores de sintaxis o sumergirse en el código de CodeMirror2 para eliminar las partes necesarias.
Si elige la última opción, preste atención a

function refreshDisplay(from, to) method

Recorre las líneas y las resalta.

Answer 7

Una solución mucho más fácil y sencilla es simplemente establecer la propiedad readOnly de la instancia de CodeMirror en true, como esto:

$(''.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
    });

});

Simplemente agregue la clase .code a la etiqueta que contiene el código y se resaltará la sintaxis. También he agregado soporte para código en línea, usando la clase .inline .

Ejemplo en jsfiddle

Answer 8

Editar
Acabo de darse cuenta de que existe un método más simple. Lea el método 2 a continuación. Mantengo el método antiguo y sus explicaciones intactas y solo incluyo el código jQuery mejorado.

Si está preguntando acerca de un método nativo del paquete, la respuesta es no, solo funciona con textarea . Pero si está abierto a utilizar soluciones provisionales, aquí hay una que funciona (probada).

He usado jQuery aquí, pero su uso no es obligatorio y se puede lograr lo mismo con el código js puro, aunque sería más largo y no tan claro como el código jQuery.

Ahora, vamos a la solución.

Supongamos que tiene un <pre> con código interno, que desea convertir en un contenedor de código de código sin resaltado de sintaxis:

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

Lo que haces es

1. cambia el <pre> a <textarea> ,
2. adjuntar codemirror al área de texto,
3. oculta el cursor falso y mantenlo oculto, y
4. no permita que el área de texto del código de voz oculto capte el foco (y lo retire cuando lo haga).

Para la última acción he usado el método sugerido por Travis Webb . Aquí está el código jQuery que hace estas cuatro cosas:

$(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();
    });

});

Método dos

En lugar de luchar con el cursor y todo eso, podemos eliminar los elementos que hacen que el editor funcione. Aquí está el código:

$(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();
});