javascript - online - js-beautify example

¿Se puede ampliar prettify.js para admitir Mathematica? (2)

The Mathematica.SE se encuentra actualmente en versión beta privada y se abrirá al público en unos días. Stack Overflow y los sitios relacionados usan prettify.js , sin embargo, Mathematica no es un lenguaje compatible. Sería increíble tener un script de resaltado personalizado para nuestro sitio, y solicito la ayuda de la comunidad de JavaScript y CSS para desarrollar dicho script y el CSS que lo acompaña.

He enumerado a continuación algunos requisitos básicos que capturan la mayoría de las características del esquema de resaltado predeterminado de Mathematica (ignorando cosas que solo el analizador interno conocería). También he nombrado los colores de forma genérica: los códigos de color hexadecimales se pueden seleccionar de las capturas de pantalla que he proporcionado (más abajo). También he añadido ejemplos de código para acompañar las capturas de pantalla para que la gente pueda probarlo.

Requerimientos básicos

Comentarios
Estos se introducen como (* comment *) . Así que cualquier cosa entre estos debe ser resaltada en gris.
Instrumentos de cuerda
Estos se ingresan como "string" (las comillas simples no son compatibles), y se deben resaltar en rosa.
Operadores / notaciones de mano corta.
Además del estándar +, -, *, /, ^, == , etc., Mathematica tiene varios otros operadores y notaciones de mano corta. Los más comunes son:
@, @@, @@@, /@, //@, //, ~, /., //., ->, :>, /:, /;, :=, :^=, =., &, |, ||, &&, _, __, ___, ;;, [[, ]], <<, >>, ~~, <>
Estos, y paréntesis, corchetes y llaves deben estar resaltados en negro.
Patrones de objetos y ranuras.
Los objetos de patrón comienzan con una letra y tienen _ o __ o ___ adjuntos, como por ejemplo, x_ , x__ y x___ . Estos también pueden tener letras adicionales después del subrayado, como x_abc , etc. Todos estos deben resaltarse en verde.
Las ranuras son # y ## y también pueden ir seguidas de un entero como #1 , ##4 , etc., y también deben estar en verde.
Ambos de estos (objetos de patrón y ranuras) usualmente son terminados por un operador / soporte / forma corta desde el punto 3 anterior.
Funciones / variables
Funciones y variables es una terminología bastante flexible aquí, pero sirve para los propósitos de este post. Cualquier cosa que no caiga en los 4 anteriores se puede resaltar en negro. Mathematica a menudo usa backticks ` en el código y debe considerarse parte del nombre de la función / variable. Por ejemplo, abcd`defg . Los signos de dólar $ en cualquier parte del nombre de una variable deben tratarse como una letra (es decir, nada especial).

Por todo lo anterior, si aparecen dentro de las cadenas, deben tratarse como tales, es decir, "@~# debe estar resaltado en rosa.

Adicional agradable para los que tienen:

En los objetos de patrón en el punto 3 anterior, si los guiones bajos están seguidos por un ? y luego algunas letras, luego la parte que sigue a la _ debe estar en negro. Por ejemplo, en x__?abc , la parte x__ debe estar en verde y la ?abc en negro.
Si una función / variable comienza con una letra mayúscula, se resalta en negro. Si comienza con una letra pequeña, se resalta en azul. Internamente, esto diferencia funciones incorporadas frente a funciones definidas por el usuario. Sin embargo, la comunidad matemática (casi en todas partes) se adhiere bastante bien a esta convención de nomenclatura, por lo que distinguir los dos serviría para algún propósito.

Capturas de pantalla y ejemplos de código:

1. ejemplos simples

Aquí hay un pequeño conjunto de ejemplos, con una captura de pantalla al final que muestra cómo se ve en Mathematica:

(*simple pattern objects & operators*) f[x_, y__] := x Times @@ y (*pattern objects with chars at the end and strings*) f[x_String] := x <> "hello@world" (*pattern objects with ?xxx at the end*) f[x_?MatrixQ] := x + Transpose@x << Combinatorica` (*example with backticks and inline comment*) (*Slightly more complicated example with a mix of stuff*) Developer`PartitionMap[Total, Range@1000, 3][[3 ;; -3]]~Partition~2 // Times @@@ # &

2. Un ejemplo del mundo real.

Aquí hay un ejemplo de esta respuesta mía que también indica mi punto 2 en la sección "Agradezco adicional para los demás", es decir, las cosas en minúsculas se resaltan en azul.

Además, es posible que note algunas de las variables resaltadas en naranja. A propósito, no lo incluí como un requisito, ya que creo que será mucho más difícil de hacer sin un analizador que sepa Mathematica.

prob = MapIndexed[#1/#2 &, Accumulate[ EuclideanDistance[{0, 0}, #] < 1 & /@ arrows // Boole]]~N~4; Manipulate[ Graphics[{White, Rectangle[{-5, -5}, {5, 5}], Red, Disk[{0, 0}, 1], Black, Point[arrows[[;; i]]], Text[Style[First@prob[[i]], Bold, 18, "Helvetica"], {-4.5, 4.5}]}, ImageSize -> 200], {i, Range[2, 20000, 1]}, ControlType -> Manipulator, SaveDefinitions -> True]

¿Es esto factible? ¿Demasiado? ¿Demasiado duro? ¿Imposible?

Francamente, no sé la respuesta a ninguno de esos. Acabo de enumerar algunas características básicas que a todos en matemática.SE les encantaría tener y algunas cosas adicionales que serían una guinda en la parte superior. Sin embargo, avíseme si son demasiado difíciles de implementar. Podemos trabajar un subconjunto más pequeño de características.

En reconocimiento a esta ayuda, todos tienen la gratitud eterna de la comunidad de Mathematica y, además, otorgaré una recompensa de 500 a cada persona que contribuya significativamente a esto (si se hace en partes con diferentes personas). Confiaré en su Votos / comentarios / resultados sobre las respuestas para decidir qué es significativo (quizás más de una recompensa para una persona si hacen todo el trabajo). La implementación del "Adicional agradable para los que tienen" obtiene un +500 automático independientemente de las recompensas anteriores , por lo que también puede aprovechar el trabajo de otros, incluso si no hace la primera mitad. También podría colocar periódicamente recompensas más pequeñas para atraer a los usuarios que no hayan visto esta pregunta, por lo que si gana esas recompensas, serán una adición a la "recompensa por recompensar una respuesta existente" que se decidirá hacia el final. .

Por último, no tengo prisa. Así que por favor tómate tu tiempo con esta pregunta. La recompensa es siempre una opción hasta que sea implementada por SE (o si se ha determinado que las respuestas existentes satisfacen completamente los requisitos). Idealmente, espero poder implementar esto en dos tercios de nuestro camino hacia la beta, que es de 2 meses a partir de ahora.

Prefacio

Dado que el soporte de Mathematica para google-code-prettify se desarrolló principalmente para el nuevo sitio de Mathematica.Stackexchange , consulte también la discusión here .

Introducción

No tengo un conocimiento profundo de todo esto, pero hubo ocasiones en que escribí un complemento de cweb para que Idea destacara mi código allí. En un IDE todo esto no es un proceso de un solo paso. Se divide en varios pasos y cada paso tiene más habilidades de resaltado. Permítanme explicar esto un poco para dar más adelante algunas razones por las cuales algunas cosas no son posibles para un resaltador de código que necesitamos aquí.

Al principio, el código se divide en tokens que son las partes individuales de un lenguaje de programación. Después de este lexer, puede clasificar los intervalos de su código en, por ejemplo, espacio en blanco, literal, cadena, comentario, etc. Este lexer come el código fuente probando expresiones regulares, almacenando el tipo de token para un intervalo de texto y avanzando en el código.

Después de este escaneo léxico, se puede analizar el código fuente utilizando las reglas del lenguaje de programación, los tokens y el código subyacente. Por ejemplo, si tenemos un token Plus que es de tipo Keyword entonces sabemos que los paréntesis y el parámetro deben seguir. Si no, la sintaxis no es correcta. Lo que puede construir con este análisis se llama AST, árbol de sintaxis abstracta, y se parece básicamente a la TreeForm de TreeForm of Mathematica.

Con un lenguaje bien diseñado, como Java, por ejemplo, es posible verificar el código mientras se escribe y hacer casi imposible escribir código sintácticamente incorrecto.

Código prettify.js y mathematica

Primero, prettify.js implementa solo un escáner léxico, pero no un analizador. Estoy bastante seguro de que esto sería imposible de todos modos con respecto a las limitaciones de tiempo para mostrar una página web. Entonces, permítanme explicar qué características no son posibles / factibles con prettify.js:

Además, es posible que note algunas de las variables resaltadas en naranja. A propósito, no lo incluí como un requisito, ya que creo que será mucho más difícil de hacer sin un analizador que sepa Mathematica.

Correcto, porque el resaltado de estas variables depende del contexto. Tienes que saber que estás dentro de una construcción de Table o algo así.

Hacking prettify.js

Creo que hackear una extensión para prettify.js no es tan difícil. Soy un noob de expresión regular absoluta, así que prepárate de lo que sigue.

No necesitamos tantas cosas para un simple lexer de Mathematica. Tenemos espacios en blanco, comentarios, literales de cadenas, llaves, muchos operadores, literales habituales como variables y una lista gigante de palabras clave.

Vamos a empezar, con las palabras clave en java-script regexp-form:

Export["google-code-prettify/keywordsmma.txt", StringJoin @@ Riffle[Apply[StringJoin, Partition[Riffle[Names[RegularExpression["[A-Z].*"]], "|"], 100], {1}], "''+ /n ''"], "TEXT"]

La expresión regular para espacios en blanco y literales de cadena se puede copiar desde otro idioma. Los comentarios son emparejados por algo como

/^/(/*[/s/S]*?/*/)/

Esto funciona mal si tenemos comentarios dentro de los comentarios, pero por el momento no me importa. Disponemos de tirantes y brackets.

/^(?:/[|/]|{|}|/(|/))/

Tenemos algo como blub_boing que debe emparejarse por separado.

/^[a-zA-Z$]+[a-zA-Z0-9$]*_+([a-zA-Z$]+[a-zA-Z0-9$]*)*/

Tenemos las ranuras #, ##, # 1, ## 9 (actualmente solo puede seguir un dígito)

/^#+[0-9]?/

Tenemos nombres de variables y otros literales. Deben comenzar con una letra o $ y luego pueden seguir letras, números y $. Actualmente /[Gamma] no se compara como un literal, pero por el momento está bien.

/^[a-zA-Z$]+[a-zA-Z0-9$]*/

Y tenemos operadores (no estoy seguro de que esta lista esté completa).

/^(?:/+|/-|/*|//|,|;|/.|:|@|~|=|/>|/<|&|/||_|`|/^)/

Actualizar

Limpié las cosas un poco, hice algunas tareas de depuración y creé un estilo de color que me parece hermoso. Las siguientes cosas funcionan hasta donde puedo ver correctamente:

Todos los símbolos del sistema que se pueden encontrar a través de Names[RegularExpression["[AZ].*"]] Se comparan y se resaltan en azul
Los tirantes y los soportes son de color negro pero en negrita. Esta fue una sugerencia de Szabolcs y me gusta mucho ya que definitivamente agrega algo de energía a la apariencia del código.
Los patrones, tal como aparecen en las definiciones de funciones y las ranuras de funciones puras se resaltan en verde. Esto fue sugerido por Yoda y va junto con el resaltador en la interfaz de Mathematica. Los patrones solo son verdes en combinación con una variable como en blub__Integer , a1_ o en b34_Integer32 . Las funciones de prueba para el patrón como en num_?NumericQ solo están en verde delante del signo de interrogación.
Comentarios y cuerdas tienen el mismo color. Los comentarios y las cadenas pueden ir a través de varias líneas. Las cadenas pueden incluir comillas con barras invertidas. Los comentarios no pueden ser anidados.
Para la coloración utilicé constantemente el ColorData[1] para garantizar que los colores se vean bien uno al lado del otro.

Actualmente se ve así:

Pruebas y depuración

Szabolcs preguntó si y cómo es posible probar esto. Esto es fácil: necesita mi fuente de Google-code-prettify ( ¿Dónde puedo colocar esto para que todos tengan acceso? ). Descomprima las fuentes y abra el archivo tests/mathematica_test.html en un navegador web. Este archivo carga por sí mismo los archivos src/prettify.js , src/lang-mma.js y src/prettify-mma-1.css .

en lang-mma.js encuentra la expresión regular que usa el lexer al dividir el código en tokens.
en prettify-mma-1.css encuentras las definiciones de estilo que utilizo

Para probar su propio código, simplemente abra mathematica_test.html en un editor y pegue sus cosas entre las etiquetas pre . Recargue la página y su código debería aparecer.

Depuración: si el resaltador no funciona correctamente, puede realizar la depuración con un IDE o con Google-Chrome. En Chrome, marca la palabra donde el resaltador comienza a fallar y hace clic derecho e Inspect Element . Lo que ves entonces es el código de resaltado html subyacente. Allí puede ver cada token y ver qué tipo de token es. Esto se ve entonces como

<span class="tag">[</span>

Verá que el soporte abierto es de tipo tag . Esto coincide con la definición lang-mma.js que hice en lang-mma.js . En Chrome, incluso es posible explorar el código JS, establecer puntos de interrupción y depurarlo mientras se vuelve a cargar la página.

Instalación local para Google Chrome y Firefox.

Tim Stone fue tan amable de escribir un script que inyecta el resaltador durante la carga de sitios en http://.com/questions/ . Tan pronto como se active google-code-prettify para mathematica.stackexchange.com también debería funcionar allí. Adapté este script para usar mis reglas y colores de escaneo léxico. Escuché que en Firefox el script no siempre funciona, pero esta es la forma de instalarlo:

Chrome: siga este enlace https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.js y se le preguntará si desea instalar esta extensión.
Firefox: asegúrate de que tienes el complemento Greasemonkey instalado. Luego descarga el mismo enlace que para Chrome.
Ahora ya está configurado y cuando vuelva a cargar esta página, los comentarios, las funciones del kernel, las cadenas y los patrones se deben resaltar correctamente.

Versiones

En https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.js siempre encontrará la versión más reciente. Aquí hay algunos cambios en la historia. - 23/02/2013 Se actualizaron las listas de símbolos y palabras clave de la versión 9.0.1 - 09/02/2012 de Mathematica. Se solucionaron algunos problemas menores relacionados con la coloración de los patrones de Mathematica. Para una descripción detallada de las características con Pattern operador de Pattern : vea también la discusión aquí

02/02/2012 compatibilidad con muchos formatos de entrada .123`10.2 como .123`10.2 o 1.2`100.3*^-12 , resaltado de In[23] y Out[4] , ::usage u otros mensajes como blub::boing , resaltado de patrones como ProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___] , correcciones de errores (verifiqué el analizador contra 3500 líneas de código de paquete del directorio AddOns. Tomé aproximadamente 3-4 segundo para ejecutar, que debería ser más que lo suficientemente rápido para nuestros propósitos.)
30/01/2012 Se ha corregido la falta ''?'' en la lista de operadores. Se incluyen caracteres nombrados como //[Gamma] para dar una coincidencia completa para tales símbolos. Se agregaron $ variables en la lista de palabras clave. Mejora la coincidencia de patrones. Se agregó la coincidencia de construcciones de contexto como Developer`PackedArrayQ. Cambio del esquema de color debido a muchas peticiones. Ahora es como en el frontend de Mathematica. Palabras clave negro, variables azul.
29/01/2012 Tim hackeado a código de inyección. Ahora el resaltado también funciona en mathematica.stackexchange.
25/01/2012 Añadido el reconocimiento de los números matemáticos. Esto ahora debería resaltar cosas como {1, 1.0, 1., .12, 16^^1.34f, ...} . Además, debe reconocer el backtick detrás de un número. Cambié los comentarios y las cadenas a gris y uso un rojo oscuro para los números.
23/01/2012 Versión inicial. Las capacidades se describen en la sección Actualización .

No es exactamente lo que está pidiendo, pero creé una extensión similar para MATLAB (basado en el excelente trabajo que ya se hizo aquí). El proyecto se encuentra alojado en github .

El script debe resolver algunos de los problemas comunes para el código MATLAB en el Desbordamiento de pila:

comentarios (no es necesario utilizar trucos como %# .. )
el operador de transposición (comilla simple) se reconoce correctamente como tal (confundido con cadenas entre comillas por el prettificador predeterminado)
resaltado de las funciones incorporadas populares

Tenga en cuenta que el resaltado de sintaxis no es perfecto; entre otras cosas, falla en los comentarios de bloques anidados (puedo vivir con eso por ahora). Como siempre, los comentarios / arreglos / problemas son bienvenidos.

Se incluye un script de usuario separado, que permite cambiar el idioma utilizado como se ve en la siguiente captura de pantalla:

--- antes de ---

--- después ---

Para aquellos interesados, se proporciona un tercer script de usuario, adaptado para trabajar en el sitio web de "Respuestas de MATLAB" .

TL; DR

Instale el script de usuario para SO directamente desde:

https://github.com/amroamroamro/prettify-matlab/raw/master/js/prettify-matlab.user.js