Resaltado de sintaxis estático

El resaltado de sintaxis estático es el resaltado del código que el usuario no puede cambiar. Esto incluye fragmentos de código, iteraciones y más.

Note

El editor en línea no usa el resaltado de sintaxis estático, ya que el usuario puede cambiar el código sobre la marcha. Si quieres saber más sobre cómo manejamos el resaltado de sintaxis en el editor en línea, consulta la documentación sobre el resaltado de sintaxis dinámico.

Implementación

El resaltado de sintaxis estático se hace con la biblioteca highlightjs.

Cuando agregas compatibilidad con tu lenguaje, hay tres opciones:

  1. El lenguaje es compatible con highlightjs de forma predeterminada (es decir, aparece en la lista de lenguajes compatibles). Si es así, continúa con la sección Configurar el track.
  2. El lenguaje es compatible mediante un plugin existente de highlightjs. Si es así, continúa con la sección Usar un plugin existente.
  3. El lenguaje no es compatible. Ahora hay tres opciones:
    1. Escribir un plugin de highlightjs 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 considerar usar el resaltado de sintaxis de ese lenguaje para el tuyo. Consulta la sección Configurar el track para más información.
    3. No tener resaltado de sintaxis estático.

Configurar el track

Para habilitar la compatibilidad de highlightjs con el lenguaje de tu track, tienes que modificar el archivo config.json del track. Dentro del archivo config.json, agrega o establece la clave online_editor.highlightjs_language con el identificador de lenguaje de highlightjs correspondiente (lo puedes encontrar en la documentación).

Ejemplo

{
  "online_editor": {
    "highlightjs_language": "csharp"
  }
}

Usar un plugin existente

Para usar un plugin existente, este debe estar publicado en NPM. Si el plugin no está publicado en NPM, tienes estas opciones:

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

El siguiente paso es habilitar el plugin.

Habilitar el plugin

Para habilitar un plugin (que debe estar publicado en NPM), abre un tema en el foro pidiéndonos que agreguemos compatibilidad con el plugin al sitio web. Nosotros (Exercism) crearemos entonces un Pull Request que agrega el plugin al sitio web. Una vez que se fusione el PR, puedes habilitar la compatibilidad con highlightjs siguiendo las instrucciones de la sección Configurar el track.

Crear un plugin nuevo

Si quieres crear un plugin, tienes dos opciones para alojarlo:

  1. Crear un repositorio en tu cuenta personal y publicarlo tú mismo.
  2. Pedirnos a nosotros (Exercism) que creemos un repositorio y nos dejes publicarlo. Para eso, abre un tema en el foro solicitándolo.

Una vez que tengas un repositorio, sigue las instrucciones para contribuir con un lenguaje para implementar el plugin.

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

Usar un lenguaje diferente

La sintaxis de tu lenguaje se parece (mucho) a la de otro lenguaje; en ese caso, podrías considerar usar el resaltado de sintaxis de ese lenguaje para el tuyo. Para eso, configura el track para que use el identificador de lenguaje de highlightjs del otro lenguaje. Consulta la sección Configurar el track para más información.