CodeMirror un editor de código Open Source para el navegador

CodeMirror es un editor de código fuente que funciona en el navegador , ya que está implementado en JavaScript . Trae soporte para numerosos lenguajes de programación y addons para añadirle funcionalidades de edición más avanzadas. Tienes disponible una API de programación y temas CSS para personalizar CodeMirror a tu aplicación, y extenderlas para añadirles nueva funcionalidad.  Puedes ver una demo de CodeMirror en su web oficial: https://codemirror.net/ CodeMirror es Open Source , está liberado bajo una licencia MIT . El desarrollo y el seguimiento de los bugs se realizan a través de la página del proyecto en Github Para implementarlo en tu proyecto solo debes descargar la última versión y echar un vistazo al siguiente código:

<!-- Create a simple CodeMirror instance --><script src="lib/codemirror.js"></script><script>// <![CDATA[
var editor = CodeMirror.fromTextArea(myTextarea, {     mode: "text/html"   });
// ]]></script>

Principales Carácteristicas de CodeMirror

CodeMirror está soportado por todos los navegadores actuales que soporten HTML5: Firefox desde la versión 3, Chrome en cualquiera de sus versiones, Safari desde la versión 5.2, Internet Explorer desde la versión 8, Opera desde la versión 9.

A continuación te dejo una lista de sus principales características:

• Soporta hasta 60 lenguajes de programación por defecto.
• Autocompletado (XML).
• Replegado de Código.
• Asociaciones de teclas configurables.
• Asociaciones de Vim , Emacs y Sublime Text soportadas.
• Interfaz de buscar y reemplazar.
• Emparejamiento de llaves y etiquetas.
• Integración con Linter .
• Posibilidad de usar distintos estilos de letra y tamaño s en el mismo editor.
• Varios temas .
• Posibilidad de redimensión para ajustarse al contenido.
• Widgets Inline y Block
• Interfaz completamente programable .
• Posibilidad de crear zonas de texto de solo lectura.
• y muchos otros métodos y addons ...

¿Quién lo está usando?

CodeMirror  es el editor usado en las herrmaienta para desarrolladores de Firefox y Chrome . También es el edito usado por Light Table , Adobe Brackets , Bitbucket y otros proyectos que seguramente conocerás, como por ejemplo:

• CodeSchool
• CodeAcademy
• Codepen.io
• jsfiddle.net
• Emmet
• y muchos más..

Comunidad

Como anteriormente te comenté, el proyecto se encuentra  en GitHub , donde puedes realizar tus aportaciones. Además dispone de una lista de correo y de noticias , asi como una wiki donde poder añadir tu proyecto.

Conclusiones

Se me ocurren multitud de usos para este editor de código. Solo debes dejar que tu imaginación y tu creatividad se encargue de encontrarle el uso adecuado. Por ejemplo podrías crear una interfaz de programación en la nube para tu equípo de desarrolladores, testeadores de código online, y muchas otras ideas que seguro se te ocurrirán.

Si te ha gustado el artículo no olvides compartirlo y suscribirte a nuestras novedades!