Create Custom Language On Codemirror 6 And Lezer

13 October 2021 - 3 mins read time

CodeMirror 6

Es un proyecto open-source el cual persigue la idea de tener en la WEB un editor de texto con las mismas caracteristicas de un IDE completo.

Tiene una gran comunidad y hay muchos addons para otorgarle diferentes caracteristicas y diferentes modos o lenguages.

Pero no siempre se ajusta a nuestras necesidades, por eso implementaron una forma de que la comunidad pueda modificar o crear desde 0 un lenguage y poder definir la sintaxis de este.

Esta basado en la documentacion oficial de CodeMirror 6.

Plantilla

Primero vamos a comenzar a clonar una plantilla que viene preparada con todo lo necesario para iniciar nuestro language. Para ello ir al repositorio plantilla, una vez alli en vez de clonarlo nos dara la opcion de utilizar la plantilla y esto hara que github nos cree nuestro repositorio, dadle un nombre y comenzamos.

Una vez creado seguimos las indicaciones del fichero README.md

git clone URL_REPOSITORIO

Nombrar nuestro lenguaje/modo

Después con el siguiente comando podemos sustituir EXAMPLE por el idioma, en este caso sera regex:

git grep -l "EXAMPLE" | xargs sed -i "" -e "s/EXAMPLE/regex/g"

Parser

Lo primero para definir nuestro lenguaje es utilizar un parser, este se encarga de identificar la sintaxis de nuestro lenguaje, pudiendo ver cada palabra clave con diferentes estilos, colores, auto-identacion, code folding y syntax-aware selection.

Segun la documentacion oficial existen diferentes parsers y formas de definirlos:

la Gramatica Lezer es la que se utilizara de ejemplo

  • Gramatica Lezer
    • Conversor de descripcion declarativa a un parser eficiente.
  • Utilizando la forma de stream parser de CodeMirror 5 para esta version.
    • Es un tokenizador.
    • Para remarcado basico.
    • No produce arbol sintactico
    • Limitado si se quiere mas que tokenizar

      Por ej. distingir nombres tipados de nombres de variables)

  • Escribiendo un parser completamente custom.
    • Recomendado UNICAMENTE como recurso para algunos leguajes como Markdown, pero implica muchas horas de duro trabajo.

Si se quiere ahondar mas en el entendimiento del parser, en su finalidad, y mejoras de rendimiento, se puede ir a la documentacion de Lezer para entender un poquito mas las tripas del asunto.

Se recomienda encarecidamente echar un vistazo a la guia definida en Lezer.

Definir la gramatica

Para empezar podemos echar un vistazo como esta definida en un lenguaje del repositorio de CodeMirror 6, por ejemplo javascript. Con esta informacion y la guia de Lezer podemos empezar a editar el fichero src/syntax.grammar de forma que se adapte a nuestro lenguaje, en esta caso usaremos de ejemplo regex.

Unos pocos metadatos