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
Version imprimable
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
Salut Sylvain255,
Et en consultant le code source de cette page https://codemirror.net/5/demo/theme.html#default ?
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é
Tu as un lien pour l'exemple en nodeJs et un bout de code de ton langage que tu souhaites coloriser ?
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\"\"\\")}
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/
Citation:
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.
OK je vais me débrouiller, avant pouvez-vous me dire qu'est-ce qu'un bundler et qu'est-ce qu'ES6 ?
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.
jour
une base de code si ça peut aider
c'est pas parfait a améliorer
Code:
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
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é
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
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
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
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 ?
personne ?
Bonjour,
tout est dit ici : Example: Writing a Language Package, c'est du boulot en perspective :(.
la doc est incomplète par exemple dans le cas :
Citation:
Envoyé par English
qui semble aller pour mon cas aucune doc n'est donnéeCitation:
Envoyé par Français
Prend un langage existant et « proche » et modifie son lexique, cela reste du boulot !
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
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 ?
j'ai finalement trouvé aidé de chatGPT je poste ici mon code pour ceux intéressés :
Code:
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
169