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, y es el editor en línea.

Note

Los fragmentos de código, las iteraciones y cosas 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 manejamos el resaltado de sintaxis estático, consulta la documentación sobre resaltado de sintaxis estático.

Implementación

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

Cuando agregues soporte para tu lenguaje, tienes tres opciones:

  1. CodeMirror soporta el lenguaje de forma nativa (es decir, aparece en la lista de lenguajes soportados). Si es así, continúa con la sección habilitar el lenguaje.
  2. El lenguaje está soportado mediante un plugin de CodeMirror existente. Si es así, continúa con la sección usar un plugin existente.
  3. El lenguaje no está soportado. Ahora tienes tres opciones:
    1. Escribir un plugin de CodeMirror desde cero, como se describe en la sección crear un nuevo plugin.
    2. La sintaxis de tu lenguaje se parece (mucho) a la sintaxis de otro lenguaje (por ejemplo, la sintaxis de Unison se parece a la de Haskell), en cuyo caso podrías considerar 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 el soporte de CodeMirror para tu lenguaje, inicia un tema en el foro. Nosotros (Exercism) crearemos entonces un Pull Request que habilite el soporte de CodeMirror para tu lenguaje en el sitio web.

Usar un plugin existente

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

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

  1. Preguntarle al autor del plugin si quiere publicarlo en NPM.
  2. Bifurcar el repositorio y publicarlo tú mismo.
  3. Pedirnos a nosotros (Exercism) que bifurquemos el repositorio y que 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 nuevo plugin

Estos son los pasos para empezar:

  1. Revisa nuestra lista de repositorios para ver si ya existe un codemirror-lang-... para asegurarte de que todavía no haya uno.
  2. Inicia un tema nuevo en el foro de Exercism y cuéntanos para qué lenguaje te gustaría crear un plugin de CodeMirror.
  3. Una vez que 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 creó para ti contiene una gramática de ejemplo mínima que puedes tomar como base o ajustar.

¡Tenemos una comunidad increíblemente amable y solidaria que estará encantada de ayudarte mientras avanzas en esto! Si te atascas, inicia un tema nuevo en el foro de Exercism o crea nuevos 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 un lenguaje diferente

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