Peut-on étendre prettify.js pour prendre en charge Mathematica ?

Question

Le site mathematica.SE est actuellement en version bêta privée et sera ouvert au public dans quelques jours. Stack Overflow et les sites connexes utilisent prettify.js mais Mathematica n'est pas un langage supporté. Il serait assez impressionnant d'avoir un script de mise en évidence personnalisé pour notre site, et je demande l'aide de la communauté JavaScript et CSS pour développer un tel script et le CSS qui l'accompagne.

J'ai énuméré ci-dessous quelques exigences de base, de manière à ce qu'il capture la plupart des caractéristiques du système de surlignage par défaut de Mathematica (en ignorant les éléments que seul l'analyseur interne connaît). J'ai également nommé les couleurs de manière générique - les codes de couleur hexadécimaux peuvent être choisis à partir des captures d'écran que j'ai fournies (plus loin). J'ai également ajouté des exemples de code pour accompagner les captures d'écran afin que les gens puissent le tester.

Exigences de base

1. Commentaires
   Ceux-ci sont saisis comme (* comment *) . Tout ce qui se situe entre les deux doit donc être mis en évidence en gris.

2. Cordes
   Ceux-ci sont saisis comme "string" (les guillemets simples ne sont pas pris en charge), et doivent être mis en évidence en rose.

3. Opérateurs/notations abrégées
   Outre la norme +, -, *, /, ^, == Mathematica possède plusieurs autres opérateurs et notations abrégées. Les plus couramment rencontrés sont :

   @, @@, @@@, /@, //@, //, ~, /., //., ->, :>, /:, /;, :=, :^=, =., 
   &, |, ||, &&, _, __, ___, ;;, [[, ]], <<, >>, ~~, <>

   Ces derniers, ainsi que les parenthèses, les crochets et les accolades, doivent tous être mis en évidence en noir.

4. Modèles d'objets et de créneaux
   Les objets de type Pattern commencent par une lettre et ont soit _ o __ o ___ attaché, comme par exemple, x_ , x__ y x___ . Ces derniers peuvent également comporter des lettres supplémentaires après le trait de soulignement, par exemple x_abc etc. Tous ces éléments doivent être mis en évidence en vert.

   Les machines à sous sont # y ## et peut également être suivi d'un nombre entier comme #1 , ##4 etc., et devraient également être en vert.

   Ces deux éléments (objets de motif et slots) sont généralement terminés par un opérateur/une parenthèse/une forme courte du point 3 ci-dessus.

5. Fonctions/variables
   Fonctions et variables est une terminologie plutôt vague ici, mais elle sert aux fins de cet article. Tout ce qui n'entre pas dans les 4 catégories ci-dessus peut être surligné en noir. Mathematica utilise souvent des backticks ` dans le code et doivent être considérés comme faisant partie du nom de la fonction/variable. Par exemple, abcd`defg . Les signes du dollar $ n'importe où dans un nom de variable doit être traité comme une lettre (c'est-à-dire, rien de spécial).

Pour tous les éléments ci-dessus, s'ils apparaissent à l'intérieur de chaînes de caractères, ils doivent être traités comme tels, à savoir "@~# doivent être mis en évidence en rose.

Autres avantages :

1. Dans les objets du modèle du point 3 ci-dessus, si le(s) trait(s) de soulignement est(sont) suivi(s) d'un ? et ensuite quelques lettres, puis la partie qui suit le _ devrait être en noir. Par exemple, en x__?abc El x__ doit être en vert et la partie ?abc en noir.
2. si une fonction/variable commence par une majuscule, elle est mise en évidence en noir. Si elle commence par une lettre minuscule, elle est mise en évidence en bleu. En interne, cela permet de distinguer les fonctions intégrées des fonctions définies par l'utilisateur. Cependant, la communauté mathematica (à peu près partout) s'en tient assez bien à cette convention de dénomination, de sorte qu'il serait utile de distinguer les deux.

Captures d'écran et échantillons de code :

1. Des exemples simples

Voici un petit ensemble d'exemples, avec une capture d'écran à la fin montrant comment cela se présente dans 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 exemple concret

Voici un exemple tiré de cette réponse de ma part cela indique également mon point 2 dans la section "Additional nice to haves", c'est-à-dire que les choses en minuscules sont surlignées en bleu.

Vous remarquerez également que certaines variables sont surlignées en orange. Je n'ai volontairement pas inclus cette exigence, car je pense que cela sera beaucoup plus difficile à réaliser sans un analyseur syntaxique qui connaît 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]

Est-ce faisable ? C'est trop ? Trop difficile ? Impossible ?

Très franchement, je ne connais pas la réponse à aucune de ces questions. J'ai juste listé quelques fonctionnalités de base que tout le monde sur mathematica.SE aimerait avoir et quelques trucs supplémentaires qui seraient une cerise sur le gâteau. Cependant, faites-moi savoir si elles sont trop difficiles à mettre en œuvre. Nous pourrons alors travailler sur un sous-ensemble plus restreint de fonctionnalités.

En reconnaissance de cette aide, vous avez tous la gratitude éternelle de la communauté Mathematica et en plus, J'attribuerai une prime de 500 à chaque personne qui contribuera de manière significative à ce projet. (si c'est fait en plusieurs parties par différentes personnes) - je compterai sur vos votes/commentaires/sorties sur les réponses pour décider ce qui est significatif (peut-être plus d'une prime à une personne si elle fait tout le travail). La mise en œuvre de l'option "Autres avantages" donne droit à un bonus automatique de 500 euros, indépendamment des primes précédentes. Vous pouvez donc vous appuyer sur le travail des autres, même si vous ne faites pas la première moitié. Je pourrais également placer périodiquement des primes plus petites pour attirer les utilisateurs qui n'auraient pas vu cette question, donc si vous gagnez ces primes, elles s'ajouteront à la "prime pour récompenser une réponse existante" qui sera décidée vers la fin.

Enfin, je ne suis pas pressé. Veuillez donc prendre votre temps pour répondre à cette question. La prime est toujours une option jusqu'à ce qu'elle soit mise en œuvre par SE (ou s'il a été déterminé que les réponses existantes répondent complètement aux exigences). Idéalement, j'espère que cela sera mis en œuvre aux deux tiers du chemin vers la bêta, c'est-à-dire dans deux mois.

Answer 1

Préface

Depuis le Support Mathematica pour google-code-prettify a été principalement développée pour la nouvelle Mathematica.Stackexchange veuillez également consulter la discussion aquí .

Introduction

Je n'ai pas une connaissance approfondie de tout cela, mais il m'est arrivé d'écrire un plugin cweb pour Idea afin que mon code y soit mis en évidence. Dans un IDE, tout ceci ne se fait pas en une seule étape. Il est divisé en plusieurs étapes et chaque étape a plus de possibilités de mise en évidence. Permettez-moi d'expliquer un peu cela pour donner plus tard quelques raisons pour lesquelles certaines choses ne sont (à mon avis) pas possibles pour un surligneur de code dont nous avons besoin ici.

Le code est d'abord divisé en jetons, qui sont les parties individuelles d'un langage de programmation. Après ce lexer, vous pouvez catégoriser les intervalles de votre code en espace blanc, littéral, chaîne de caractères, commentaire, et ainsi de suite. Ce lexer mange le code source en testant les expressions régulières, en stockant le type de jeton pour un espace de texte et en avançant dans le code.

Après ce balayage lexical, le code source peut être analysé en utilisant les règles du langage de programmation, les tokens et le code sous-jacent. Par exemple, si nous avons un jeton Plus qui est de type Keyword alors nous savons que les parenthèses et le paramètre doivent suivre. Si ce n'est pas le cas, la syntaxe n'est pas correcte. Ce que vous pouvez construire avec cette analyse syntaxique s'appelle un AST (abstract syntax tree) et ressemble à l'image suivante TreeForm de la syntaxe Mathematica.

Avec un langage bien conçu, comme Java par exemple, il est possible de vérifier le code tout en le tapant et de rendre presque impossible l'écriture d'un code syntaxiquement incorrect.

prettify.js et code Mathematica

Premièrement, prettify.js n'implémente qu'un scanner lexical, mais pas d'analyseur syntaxique. Je suis presque sûr que ce serait impossible de toute façon, compte tenu des contraintes de temps pour l'affichage d'une page web. Laissez-moi donc vous expliquer quelles sont les fonctionnalités qui ne sont pas possibles/faisables avec prettify.js :

Vous pouvez aussi remarquer que certaines variables sont surlignées en orange. n'ai volontairement pas inclus cela comme une exigence, car je pense que c'est car je pense que ce sera beaucoup plus difficile à faire sans un analyseur syntaxique qui connaît Mathematica.

Exact, car la mise en évidence de ces variables dépend du contexte. Vous devez savoir, que vous êtes à l'intérieur d'une Table construire ou quelque chose comme ça.

Piratage de prettify.js

Je pense que pirater une extension pour prettify.js n'est pas si difficile. Je suis un noob absolu des expressions régulières, donc soyez préparé à ce qui suit.

Nous n'avons pas besoin de tant de choses pour un simple lexer Mathematica. Nous disposons d'espaces blancs, de commentaires, de littéraux de chaînes de caractères, d'accolades, de nombreux opérateurs, de littéraux habituels comme les variables et d'une liste géante de mots-clés.

Commençons par les mots-clés de la forme regexp java-script :

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

L'expression régulière pour les espaces et les chaînes littérales peut être copiée d'un autre langage. Les commentaires sont pris en compte par quelque chose comme

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

Cela ne fonctionne pas si nous avons des commentaires à l'intérieur de commentaires, mais pour l'instant je ne m'en soucie pas. Nous avons des accolades et des crochets

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

Nous avons quelque chose comme blub_boing qui doivent être appariés séparément.

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

Nous avons les emplacements #, ##, #1, ##9 (actuellement un seul chiffre peut suivre)

/^#+[0-9]?/

Nous avons des noms de variables et d'autres littéraux. Ils doivent commencer par une lettre ou un $ et peuvent ensuite être suivis de lettres, de chiffres et de $. Actuellement, les noms de variables et autres littéraux sont les suivants \[Gamma] ne correspond pas à un littéral, mais pour l'instant, c'est bon.

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

Et nous avons des opérateurs (je ne suis pas sûr que cette liste soit complète).

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

Mise à jour

J'ai nettoyé un peu le matériel, fait un peu de débogage et créé un style de couleur qui me semble magnifique. Pour autant que je sache, les éléments suivants fonctionnent correctement :

• Tous les symboles du système qui peuvent être trouvés par Names[RegularExpression["[A-Z].*"]] sont appariés et surlignés en bleu
• Les accolades et les crochets sont noirs mais en gras. Il s'agit d'une suggestion de Szabolcs et j'aime beaucoup cette idée, car elle ajoute définitivement un peu d'élégance à l'image. énergie à l'apparence du code
• Les motifs, tels qu'ils apparaissent dans les définitions de fonctions et les créneaux des fonctions pures, sont mis en évidence en vert. Ceci a été suggéré par Yoda et va de pair avec le surligneur de l'interface Mathematica. Les motifs ne sont verts qu'en combinaison avec une variable comme dans blub__Integer , a1_ ou dans b34_Integer32 . Fonctions de test pour le modèle comme dans num_?NumericQ sont seulement verts devant le point d'interrogation.
• Les commentaires et les chaînes de caractères ont la même couleur. Les commentaires et les chaînes de caractères peuvent s'étendre sur plusieurs lignes. Les chaînes de caractères peuvent inclure des guillemets. Les commentaires ne peuvent pas être imbriqués.
• Pour la coloration, j'ai utilisé systématiquement le ColorData[1] pour s'assurer que les couleurs sont jolies côte à côte.

Actuellement, ça ressemble à ça :

Test et débogage

Szabolcs demande si et comment il est possible de tester cela. C'est facile : vous avez besoin de ma source google-code-prettify ( Où puis-je le mettre, pour que tout le monde y ait accès ? ). Décompressez les sources et ouvrez le fichier tests/mathematica_test.html dans un navigateur web. Ce fichier charge par lui-même les fichiers src/prettify.js , src/lang-mma.js y src/prettify-mma-1.css .

• sur lang-mma.js vous trouvez l'expression régulière que le lexer utilise pour diviser le code en tokens.
• sur prettify-mma-1.css vous trouverez les définitions de style que j'utilise

Pour tester votre propre code, il suffit d'ouvrir mathematica_test.html dans un éditeur et collez votre truc entre les pre balises. Rechargez la page et votre code devrait apparaître.

Débogage : Si le surligneur ne fonctionne pas correctement, vous pouvez déboguer avec un IDE ou avec Google-Chrome. Dans Chrome, vous marquez le mot où le surligneur commence à échouer et faites un clic droit et un Inspect Element . Ce que vous voyez alors est le code de mise en évidence html sous-jacent. Vous pouvez y voir chaque jeton et le type de jeton. Cela ressemble donc à

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

Vous voyez que la parenthèse ouverte est de type tag . Cela correspond à la définition de la regexp que j'ai faite dans lang-mma.js . Dans Chrome, il est même possible de parcourir le code JS, de définir des points d'arrêt et de le déboguer tout en rechargeant votre page.

---

Installation locale pour Google Chrome et Firefox

Tim Stone a eu la gentillesse d'écrire un script qui injecte le surligneur lors du chargement des sites sous http://stackoverflow.com/questions/ . Dès que google-code-prettify est activé pour mathematica.stackexchange.com cela devrait fonctionner là aussi. J'ai adapté ce script pour utiliser mes règles de balayage lexical et mes couleurs. J'ai entendu dire que dans Firefox le script ne fonctionne pas toujours, mais voici comment l'installer :

• Chrome : Suivez ce lien https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.js et il vous sera demandé si vous souhaitez installer cette extension.
• Firefox : assurez-vous que le plugin Greasemonkey est installé. Téléchargez ensuite le même lien que pour Chrome.
• Vous êtes maintenant configuré et lorsque vous rechargez cette page, les commentaires, les fonctions du noyau, les chaînes de caractères et les motifs devraient être mis en évidence correctement.

Versions

Sous https://github.com/halirutan/Mathematica-Source-Highlighting/raw/master/mathematica-source-highlighter.user.js vous trouverez toujours la version la plus récente. Voici l'historique des modifications.   - 02/23/2013 Mise à jour des listes de symboles et de mots-clés Mathematica version 9.0.1 - 09/02/2012 quelques problèmes mineurs concernant la coloration des modèles Mathematica ont été corrigés. Pour un aperçu détaillé des fonctionnalités avec Pattern -opérateur : voir aussi le discussion ici

• 02/02/2012 prise en charge de nombreux formats d'entrée de nombres comme .123`10.2 o 1.2`100.3*^-12 la mise en évidence de In[23] y Out[4] , ::usage ou d'autres messages comme blub::boing la mise en évidence de motifs tels que ProblemTest[prob:(findp_[pfun_, pvars_, {popts___}, ___]), opts___] des corrections de bogues (j'ai vérifié l'analyseur syntaxique par rapport à 3500 lignes de code de paquet du répertoire AddOns. Il a pris environ 3-4 sec pour s'exécuter, ce qui devrait être plus que suffisamment rapide pour nos besoins).
• 01/30/2012 Correction du '?' manquant dans la liste des opérateurs. Inclusion des caractères nommés comme \\[Gamma] pour donner une correspondance complète pour de tels symboles. Ajout de $variables dans la liste des mots-clés. Amélioration de la correspondance des motifs. Ajout de la correspondance des constructions contextuelles comme Developer`PackedArrayQ. Changement du schéma de couleurs suite à de nombreuses demandes. Maintenant c'est comme dans le frontend Mathematica. Mots clés noirs, variables bleues.
• 01/29/2012 Tim a été piraté pour injecter du code. Maintenant, la mise en évidence fonctionne aussi sur mathematica.stackexchange.
• 01/25/2012 Ajout de la reconnaissance des nombres Mathematica. Cela devrait maintenant mettre en évidence des choses comme {1, 1.0, 1., .12, 16^^1.34f, ...} . De plus, il devrait reconnaître le backtick derrière un nombre. J'ai mis les commentaires et les chaînes de caractères en gris et j'utilise un rouge foncé pour les chiffres.
• 01/23/2012 Version initiale. Les capacités sont décrites dans la section Mise à jour .

Answer 2

Ce n'est pas exactement ce que vous demandez, mais j'ai créé une extension similaire pour MATLAB (sur la base de l'excellent travail déjà réalisé ici). Le projet est hébergé sur github .

Le script devrait résoudre certains des problèmes courants pour le code MATLAB sur Stack Overflow :

• (pas besoin d'utiliser des astuces comme %# .. )
• l'opérateur de transposition (guillemet simple) est correctement reconnu comme tel (confondu avec les chaînes entre guillemets par le prétracteur par défaut)
• mise en évidence des fonctions intégrées les plus populaires

Gardez à l'esprit que la coloration syntaxique n'est pas parfaite ; entre autres, elle échoue dans les cas suivants emboîté bloquer les commentaires (je peux vivre avec cela pour l'instant). Comme toujours, les commentaires/réparations/problèmes sont les bienvenus.

Un userscript séparé est inclus, il permet de changer la langue utilisée comme on le voit dans la capture d'écran ci-dessous :

--- avant ---

--- après ---

Pour ceux qui sont intéressés, un troisième usercript est fourni, adapté pour fonctionner sur "Réponses MATLAB" site web.

---

TL;DR

Installez le script utilisateur pour SO directement à partir de :

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