Resaltado de sintaxis dinámico

El resaltado de sintaxis dinámico es el resaltado del código que el usuario puede cambiar. Solo hay un lugar donde esto ocurre: el editor en línea.

Note

Los fragmentos de código, las iteraciones y similares son estáticos, ya que el usuario no puede cambiar su código sobre la marcha. Si quieres saber más sobre cómo gestionamos el resaltado de sintaxis estático, consulta la documentación sobre el resaltado de sintaxis estático.

Implementación

El resaltado de sintaxis dinámico se hace con la biblioteca CodeMirror.

Cuando añadas compatibilidad con tu lenguaje, tienes tres opciones:

  1. CodeMirror admite el lenguaje de serie (es decir, aparece en la lista de lenguajes compatibles). Si es así, continúa con la sección Habilitar el lenguaje.
  2. El lenguaje es compatible a través de un plugin de CodeMirror ya existente. Si es así, continúa con la sección Usar un plugin existente.
  3. El lenguaje no es compatible. Ahora tienes tres opciones:
    1. Escribe un plugin de CodeMirror desde cero, como se describe en la sección Crear un plugin nuevo.
    2. La sintaxis de tu lenguaje se parece (mucho) a la de otro lenguaje (por ejemplo, la sintaxis de Unison se parece a la de Haskell); en ese caso, podrías plantearte usar el resaltado de sintaxis de ese lenguaje para el tuyo. Consulta la sección Habilitar el lenguaje para más información.
    3. No tener resaltado de sintaxis dinámico.

Habilitar el lenguaje

Para habilitar la compatibilidad de CodeMirror con tu lenguaje, abre un tema en el foro. Nosotros (Exercism) crearemos entonces una Pull Request que habilita la compatibilidad de CodeMirror con tu lenguaje en el sitio web.

Usar un plugin existente

Para usar un plugin existente, este tiene que estar publicado en NPM.

Si el plugin no está publicado en NPM, puedes hacer una de estas cosas:

  1. Preguntar al autor del plugin si quiere publicarlo en NPM.
  2. Hacer un fork del repositorio y publicarlo tú mismo.
  3. Pedirnos (a Exercism) que hagamos un fork del repositorio y lo publiquemos nosotros. Para ello, abre un tema en el foro solicitándolo.
Note

El sitio web de CodeMirror tiene una lista de plugins de lenguajes creados por la comunidad.

El siguiente paso es habilitar el lenguaje.

Crear un plugin nuevo

Estos son los pasos para empezar:

  1. Comprueba nuestra lista de repositorios en busca de un codemirror-lang-... existente para asegurarte de que no exista ya uno.
  2. Abre un tema nuevo en el foro de Exercism diciéndonos para qué lenguaje te gustaría crear un plugin de CodeMirror.
  3. Cuando se haya creado un repositorio de plugin de CodeMirror para ti, implementa la gramática de tu track.
Note

Para ayudarte a empezar, el repositorio que se crea para ti contiene una gramática de ejemplo mínima sobre la que puedes construir y hacer ajustes.

Tenemos una comunidad increíblemente amable y solidaria que estará encantada de ayudarte mientras trabajas en esto. Si te quedas atascado, abre un tema nuevo en el foro de Exercism o crea nuevas issues en exercism/exercism según lo necesites 🙂

Después tendrás que publicar el plugin en NPM. El siguiente paso es habilitar el lenguaje.

Usar otro lenguaje

La sintaxis de tu lenguaje se parece (mucho) a la de otro lenguaje; en ese caso, podrías plantearte usar el resaltado de sintaxis de ese lenguaje para el tuyo. Para ello, configura el track usando el plugin de CodeMirror del otro lenguaje. Consulta la sección Habilitar el lenguaje para más información.