[CodeMirror] Coder une colorisation syntaxique pour un langage maison

**Sylvain255** · 27/11/2023, 18h45

Bonjour,
je voudrais coder un colarateur syntaxique pour un langage maison en codemirror, mais la doc explique la procédure seulement en nodejs mais pas côté navigateur or je le veux côté navigateur. Pouvez-vous m'aider SVP ?
Merci
Bien cordialement

**ASCIIDEFOND** · 27/11/2023, 21h53

Salut Sylvain255,

Et en consultant le code source de cette page https://codemirror.net/5/demo/theme.html#default ?

**Sylvain255** · 27/11/2023, 22h10

ce n'est qu'un changement de thème pas la coloration syntaxique d'un langage que j'appelle maison c'est-à-dire que j'ai inventé

**ASCIIDEFOND** · 27/11/2023, 23h38

Tu as un lien pour l'exemple en nodeJs et un bout de code de ton langage que tu souhaites coloriser ?

**Sylvain255** · 28/11/2023, 14h43

la doc :
https://codemirror.net/examples/lang-package/

mon langage comprend du texte brut qui est affiché tel quel dans lequel sont insérés des bouts de codes entre accolades qui affichent du texte
il n'y a pas de boucles par mesure de sécurité
il y a par contre des IF qui sont des instructions spéciales {IF condition} {ELSE} {ENDIF}
il y a des fonctions avec des noms qui sont composés de lettres
il y a des tableaux enserrés de [ et de ] dont les valeurs sont séparées par des virgules
il y a des opérateurs (arithmétiques, de comparaison (>, <, =, <=, >=, <>) et logiques (NOT, AND, XOR, OR))
il n'y a pas de variables
il y a des chaînes des caractères enserrées de " (pour échapper le " on met \", pour les sauts de ligne on met \n et pour échapper le \ on met \\)
le langage est case unsensitive
il y des booléens dont les valeurs true et false
il y a enfin des nombres entiers ou flottants ex : 2 ou 3.65

un exemple de mon langage :
blabla blabla {IF maFonctionUn("aa",2,["a",2,"b"])>3} blablabla {ENDIF} {maFonctionDeux(3,5,"ee\n\n\"\"\\")}

**Pytet** · 28/11/2023, 16h06

Bonjour,

Il ne s'agit pas de code NodeJS mais de modules ES6 qui nécessite un bundler, la doc recommande l'utilisation de rollup ou Webpack.

https://codemirror.net/docs/guide/

The packages are distributed as ES6 modules. This means that it is not currently practical to run the library without some kind of bundler (which packages up a modular program into a single big JavaScript file) or module loader. If you are new to bundling, I recommend looking into rollup or Webpack.

**Sylvain255** · 28/11/2023, 16h20

OK je vais me débrouiller, avant pouvez-vous me dire qu'est-ce qu'un bundler et qu'est-ce qu'ES6 ?

**Sylvain255** · 28/11/2023, 16h52

résultat de ma discussion avec chatGPT OK moi je suis resté sur l'ancien JS et ne me suis jamais mis à jour, c'est l'occasion d'apprendre !

User
qu'est ce que es6 ?
ChatGPT
ES6, ou ECMAScript 2015, est la sixième version majeure de la norme ECMAScript. ECMAScript est la spécification sur laquelle JavaScript est basé, et il évolue au fil du temps pour inclure de nouvelles fonctionnalités et améliorations. ES6 a été publié en 2015 et a introduit de nombreuses nouvelles fonctionnalités pour améliorer la lisibilité et la maintenabilité du code JavaScript.

Certaines des fonctionnalités clés introduites par ES6 comprennent:

Let et Const: let et const ont été introduits pour déclarer des variables. let permet des réaffectations, tandis que const est utilisé pour déclarer des constantes.

Arrow Functions: Les fonctions fléchées offrent une syntaxe plus concise pour déclarer des fonctions.

Template Literals: Les littéraux de modèle permettent d'inclure des expressions variables dans des chaînes de caractères de manière plus propre.

Destructuring Assignment: Permet d'extraire des valeurs d'objets ou de tableaux de manière concise.

Classes: Introduit une syntaxe de classe plus simple pour créer des objets et des prototypes.

Promises: Fournit un moyen plus propre de gérer les opérations asynchrones.

Modules: Introduit un système de modules pour organiser le code en fichiers distincts et réutilisables.

Nouveaux objets et méthodes: ES6 a ajouté de nouveaux objets et méthodes, tels que Map, Set, et des méthodes Array utiles comme find et forEach.

L'adoption d'ES6 et des versions ultérieures a considérablement amélioré la qualité du code JavaScript en introduisant des fonctionnalités modernes et en rendant le langage plus puissant et expressif. Les versions ultérieures d'ECMAScript ont continué à ajouter de nouvelles fonctionnalités et améliorations, avec de nouvelles versions publiées chaque année.

User
est-il reconnu par les principaux navigateurs ?
ChatGPT
Oui, ES6 est largement reconnu et pris en charge par les principaux navigateurs web. Les versions modernes des navigateurs populaires comme Google Chrome, Mozilla Firefox, Microsoft Edge, Safari et d'autres prennent en charge la plupart, voire toutes, les fonctionnalités d'ES6. Cependant, il est important de noter que la prise en charge spécifique peut varier légèrement d'un navigateur à l'autre.

La compatibilité des navigateurs avec les fonctionnalités d'ES6 et des versions ultérieures est généralement bonne, surtout pour les versions de navigateurs publiées après 2015, date de sortie d'ES6. Les développeurs web peuvent consulter des ressources en ligne telles que MDN Web Docs (Mozilla Developer Network) pour obtenir des informations détaillées sur la compatibilité des fonctionnalités JavaScript spécifiques avec différents navigateurs.

Il est également courant de voir des projets utilisant des outils comme Babel lors du développement. Babel est un transpileur JavaScript qui convertit le code ES6 en une version antérieure d'ECMAScript (généralement ES5), ce qui permet de garantir une compatibilité avec les navigateurs plus anciens qui ne prennent pas en charge nativement les fonctionnalités d'ES6.

User
ok est qu'est-ce qu'un bundle js ?
ChatGPT
Un "bundle" JavaScript, souvent appelé simplement "bundle JS", est un fichier résultant de la combinaison de plusieurs fichiers JavaScript distincts en un seul fichier. L'objectif principal du regroupement (bundling) est de réduire le nombre de requêtes réseau nécessaires pour charger une application web. En d'autres termes, au lieu d'avoir plusieurs fichiers JavaScript distincts à télécharger séparément, un bundle permet de regrouper tout le code nécessaire dans un seul fichier.

Les outils de bundling, tels que Webpack, Browserify, Parcel, et d'autres, sont couramment utilisés dans le développement web moderne pour créer ces bundles. Ces outils analysent la structure de dépendance de votre application, rassemblent les fichiers nécessaires, les ordonnent de manière appropriée, et génèrent un seul fichier JavaScript (et éventuellement d'autres fichiers, comme des fichiers CSS) qui peut être chargé par le navigateur.

Les avantages du regroupement JavaScript incluent :

Réduction du nombre de requêtes réseau : Un seul fichier est chargé, ce qui peut accélérer le temps de chargement de la page.

Optimisation de la livraison de code : Les bundles peuvent être minifiés (réduction de la taille du code en supprimant les espaces et en raccourcissant les noms de variables) pour réduire la taille du fichier téléchargé.

Gestion des dépendances : Les outils de bundling facilitent la gestion des dépendances entre les différents modules de code.

Support des fonctionnalités modernes : Les bundlers peuvent être configurés pour transformer le code ES6+ en une version d'ECMAScript plus ancienne, assurant ainsi une compatibilité avec un large éventail de navigateurs.

En résumé, un bundle JS est un moyen efficace d'optimiser la livraison du code JavaScript dans le contexte du développement web, en réduisant le nombre de requêtes réseau et en facilitant la gestion des dépendances.

**melka one** · 28/11/2023, 23h05

jour

une base de code si ça peut aider

c'est pas parfait a améliorer

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
 
body{
        font-family: Verdana,sans-serif;
        font-size:15px;
        color:#222222;
        background :#CFC7BF;            /* #b2bdc6 */
}
 
 
.cde{
        background : #272822;
    color:white;
        padding:10px;
    max-height:400px;
    overflow:auto;
 
}
 
/* Coloration syntaxique */
 
        .coode{
                color:#4fd9b8;
        }
        
        .crochet{
                color:yellow;
        }
        
 
</style>
 
<script>
var un_objet={
        
   
   "abstract" : "<span class='coode'>abstract</span>",
   "async function" : "<span class='coode'>async function</span>",
   "await" : "<span class='coode'>await</span>",
   "boolean" : "<span class='coode'>boolean</span>",
   "break" : "<span class='coode'>break</span>",
   "byte" : "<span class='coode'>byte</span>",
   "case" : "<span class='coode'>case</span>",
   "catch" :"<span class='coode'>catch</span>",
   "char" : "<span class='coode'>char</span>",
   "class" : "<span class='coode'>class</span>",
   "const" :"<span class='coode'>const</span>",
   "continue" : "<span class='coode'>continue</span>",
   "debugger" : "<span class='coode'>debugger</span>",
   "default" : "<span class='coode'>default</span>",
   "delete" : "<span class='coode'>delete</span>",
   "alert" : "<span class='coode'>alert</span>",
   "console." : "<span class='coode'>console</span>.",
   "  do" : "<span class='coode'> do</span>",
   "double" : "<span class='coode'>double</span>",
   "else" : "<span class='coode'>else</span>",
   "export" : "<span class='coode'>export</span>",
   "extend" : "<span class='coode'>extend</span>",
   "false" : "<span class='coode'>false</span>",
   "finally" : "<span class='coode'>finally</span>",
   "float" : "<span class='coode'>float</span>",
   "for [(]" :"<span class='coode'> for (</span>",
   "for[(]" :"<span class='coode'> for(</span>",
   "function" :"<span class='coode'>function</span>",
   "if [(]" :"<span class='coode'>if (</span>",
    "if[(]" :"<span class='coode'>if </span>",
   " in " : "<span class='coode'> in</span>",
   "instanceof" : "<span class='coode'>instanceof</span>",
   "int" : "<span class='coode'>int</span>",
   "let" : "<span class='coode'>let</span>",
   "long" : "<span class='coode'>long</span>",
   "length" : "<span class='coode'>length</span>",
   "native" : "<span class='coode'>native</span>",
   "new" : "<span class='coode'>new</span>",
   "null" : "<span class='coode'>null</span>",
   "Object " : "<span class='coode'>Object</span>",
   "prototype" : "<span class='coode'>prototype</span>",
   "return" : "<span class='coode'>return</span>",
   "short" : "<span class='coode'>short</span>",
   "static" : "<span class='coode'>static</span>",
   "super" : "<span class='coode'>super</span>",
   "synchronized" : "<span class='coode'>synchronized</span>",
   "switch" : "<span class='coode'>switch</span>",
   "this" : "<span class='coode'>this</span>",
   "throw" : "<span class='coode'>throw</span>",
   "throws" : "<span class='coode'>throws</span>",
   "transcient" : "<span class='coode'>transcient</span>",
   "true" : "<span class='coode'>true</span>",
   "try" :"<span class='coode'>try</span>",
   "typeof" : "<span class='coode'>typeof</span>",
   "var" : "<span class='coode'>var</span>",
   "void" : "<span class='coode'>void</span>",
   "while" : "<span class='coode'>while</span>",
   "with" : "<span class='coode'>with</span>",
   "void" : "<span class='coode'>void</span>",
   "with" : "<span class='coode'>with</span>",
   "this" : "<span class='coode'>this</span>",
   "throw" : "<span class='coode'>throw</span>",
   "{" : "<span class='crochet'>{</span>",
   "}" : "<span class='crochet'>}</span>",
   "[)]" : "<span class='crochet'>)</span>",
   "[(]" : "<span class='crochet'>(</span>",
   "[\\]]" : "<span class='crochet'>]</span>",
   "[\\[]" : "<span class='crochet'>[</span>",
   "[\\;]" : "<span class='crochet'>;</span>",
   "[\\,]" : "<span class='crochet'>,</span>"
   
 };
 
 // "<" : "&lt span class='crochet'>&lt &lt/span>",
 
function obj_key(){
 
        var all=document.getElementsByClassName("cde")
        
   for (var i= 0 ;i<all.length;i++) {
 
      var txt=all[i].textContent
 
      for (var x in un_objet){
 
         var regex = new RegExp(x,'g');
         txt=txt.replace(regex,un_objet[x])
 
      }
      
 
      all[i].innerHTML=txt
   }
}
 
addEventListener("load", obj_key, false)
 
</script>
</head>
<body>
 
<br>
<pre class="cde">
function deplacer(chemin,nt,teno){
 
var element=document.getElementById("element")
 
 element.style.left=element.offserLeft+10+"px";
 
 if(element.offserLeft<500){
 
  setTimeout(deplacer,50)
 }
}
</pre>
 
<pre class="cde">
 
var un_objet = {"nom":"lolo", "age":8, "voiture":null};
 
	 for (var nom_clee inun_objet){
 
		console.log(nom_clee);
 
	}
</pre>
 
</body></html>

**Sylvain255** · 23/12/2023, 18h12

Merci pour ton exemple mais ça ne m'aide pas beaucoup car moi je veux que le code soit dans un textarea avec codemirror et toi tu me fais ça sur du texte brut. Je ne comprends pas la doc officielle notamment "Lezer" : https://codemirror.net/examples/lang-package/
Pourriez-vous SVP m'orienter pour mon langage ?

Je vous joins les spécs de mon langage :

La difficulté est notamment que tout code est entre accolades et le reste ne doit pas être colorié

**melka one** · 23/12/2023, 21h06

le problème c'est qu'avec un textarea il est impossible de faire une mise en page ça ne sert qu'a afficher du texte au mieux on choisi la police sa couleur et quelques paramètres simple et c'est tout c'est comme ça il faut faire avec.

https://developer.mozilla.org/fr/doc...ement/textarea

**Sylvain255** · 23/12/2023, 21h08

oui d'où l'intérêt de codemirror ou de tinymce qui écrasent le textarea avec un ensemble complexe de balises de façon transparente et qui rendent l'édition possible (contrairement à ton code) tout en gardant un champ de formulaire

**melka one** · 23/12/2023, 23h14

tout a fait

du coup j'ai un peut observe le fonctionnement et apparement il y a un ecouteur qui vas ajouter du html associé a des class css en fonction des mots ou des carracteres affiché même les saut de ligne ont droit a l'ajout d'un span

**Sylvain255** · 24/12/2023, 11h39

ok maintenant que tu as compris l'intérêt de codemirror peux-tu regarder la doc et me dire si tu peux m'aider STP ?

**Sylvain255** · 08/01/2024, 19h09

personne ?

**NoSmoking** · 09/01/2024, 11h57

Bonjour,
tout est dit ici : Example: Writing a Language Package, c'est du boulot en perspective

.

**Sylvain255** · 09/01/2024, 12h33

la doc est incomplète par exemple dans le cas :

Envoyé par English

Writing a completely custom parser. This can be the only recourse for some awkward languages like Markdown, but tends to be quite a lot of work.

Envoyé par Français

Écrire un analyseur entièrement personnalisé. Cela peut être le seul recours pour certains langages difficiles comme Markdown, mais cela demande généralement beaucoup de travail.

qui semble aller pour mon cas aucune doc n'est donnée

**NoSmoking** · 10/01/2024, 11h13

Prend un langage existant et « proche » et modifie son lexique, cela reste du boulot !

**Sylvain255** · 10/01/2024, 13h30

Merci je pense que le langage le plus proche est PHP car le code est uniquement entre des balises données et certains tokens comme les ifs sont communs

Mais je n'arrive pas à trouver les codes des différents langage notamment le PHP

**Sylvain255** · 10/01/2024, 14h20

bon j'ai trouvé ça : https://github.com/codemirror/lang-php/tree/main mais il n'y a qu'un malheureux petit fichier TS dans src qui à mon avis ne suffit pas à parser tout le PHP/HTML/JS des idées ?
Edit : j'ai trouvé ça : https://github.com/codemirror/codemi...ode/php/php.js plus complet, donc ce que je dois faire est créer mon dossier "mode" avec le nom de mon langage en l'occurence "LDT" et après je bundle le tout et je l'insère c'est ça ?

[CodeMirror] Coder une colorisation syntaxique pour un langage maison

JavaScript

Discussions similaires

Partager

Partager