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

**Sylvain255** · 22/11/2023, 14h23

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

**NoSmoking** · 22/11/2023, 18h15

Bonjour,
regarde du côté de CodeMirror.

**Sylvain255** · 22/11/2023, 18h39

Merci cela dépasse mes espérances !

**Sylvain255** · 22/11/2023, 23h02

ah mince !

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

**unanonyme** · 22/11/2023, 23h08

Bonjour,

il vous faut le compiler pour les navigateurs.

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

Bonne journée.

**NoSmoking** · 23/11/2023, 09h14

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

Exemple :

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
<!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>

**Sylvain255** · 23/11/2023, 11h43

parfait NoSmoking ton exemple marche parfaitement !

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

JavaScript

Discussions similaires

Partager

Partager