Éditeur XML avec coloration syntaxique et numérotation des lignes

Bonjour,
je cherche un champ de formulaire type textarea qui serve à rentrer du XML. Je veux la coloration syntaxique du XML et la numérotation des lignes.
Merci de me dire si vous connaissez un composant le faisant.
Bien cordialement

Bonjour,
regarde du côté de CodeMirror.

Merci cela dépasse mes espérances !

ah mince !:aie: c'est du nodejs ! je n'utilise pas nodejs je voulais du javascript côté client SVP

Bonjour,

il vous faut le compiler pour les navigateurs.

https://codemirror.net/examples/bundle/

Bonne journée.

Pas nécessairement, on peut utiliser cdnjs ou encore télécharger les fichiers.

Exemple :

Code:

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
<!DOCTYPE html>
<html lang="fr">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeMirror: Theme Demo</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d-------">
<meta name="category" content="JS">
<!--
<base href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/">
-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/mdn-like.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/active-line.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #666;}
main {display: block;margin: auto;max-width: 60em;}
section {position: relative;margin: 0 1em 1em;}
section > :not(h2) {margin-left: 1em !important;}
.CodeMirror {border: 1px solid black;font-size:1rem;height: 15rem;}
</style>
<body>
<main>
  <h1>CodeMirror exemples</h1>
  <section>
    <h2>Code XML</h2>
    <form>
      <textarea id="code-xml">
&lt;phrase titre-livre=&quot;XML idiot&quot;&gt;
  &lt;paragraphe&gt;
    &lt;chapitre&gt;
      &lt;toto&gt;
        &lt;livre&gt;
          &lt;titi&gt;Informatique sans bon sens n’est que ruine de l&apos;âme et
            perte de temps.&lt;/titi&gt;
        &lt;/livre&gt;
      &lt;/toto&gt;
    &lt;/chapitre&gt;
  &lt;/paragraphe&gt;
&lt;/phrase&gt;</textarea>
    </form>
  </section>
 
  <section>
  <h2>Code CSS</h2>
  <form><textarea id="code-css">
.CodeMirror {
  font-family: monospace;
  height: 300px;
  color: #000;
  direction: ltr
}
.CodeMirror-lines {
  padding: 4px 0
}
.CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px
}
.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler {
  background-color: #fff
}</textarea>
    </form>
  </section>
 
  <section>
  <h2>Code JS</h2>
  <form><textarea id="code-js">
function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start > goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
        find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}</textarea>
    </form>
  </section>
  <section>
    <h2>Ressources</h2>
    <ul>
      <li><a target="codemiror" href="https://codemirror.net/doc/5/manual.html">Documentation (v5)</a>
      <li><a target="codemiror" href="https://codemirror.net/5/demo/theme.html">Theme Demo</a>
      <li><a target="codemiror" href="https://cdnjs.com/libraries/codemirror">Tous les fichiers sont sur cdnjs</a>
    </ul>
  </section>
  </main>
<script>
"use strict";
const editorXML = CodeMirror.fromTextArea(document.getElementById("code-xml"), {
  lineNumbers: true,
  styleActiveLine: true,
  selectionPointer: true,
  mode: "text/html",
});
 
const editorJS = CodeMirror.fromTextArea(document.getElementById("code-js"), {
  lineNumbers: true,
  styleActiveLine: true,
  selectionPointer: true,
  mode: "javascript",
});
 
const editorCSS = CodeMirror.fromTextArea(document.getElementById("code-css"), {
  lineNumbers: true,
  styleActiveLine: true,
  selectionPointer: true,
  theme: "mdn-like",
  mode: "css",
});
</script>
</article>

parfait NoSmoking ton exemple marche parfaitement !