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
| <link href="/path/codemirror/css/codemirror.css" rel="stylesheet">
<link href="/path/codemirror/css/foldgutter.css" rel="stylesheet">
<link href="/path/codemirror/css/isotope.css" rel="stylesheet">
<style>
h4 {
color: #abb2bf;
}
.CodeMirror {
height: auto;
font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.CodeMirror-vscrollbar {
overflow-y: auto !important;
}
.cm-tag {
cursor: pointer;
}
.CodeMirror-cursors {
display: none;
}
.CodeMirror-scroll {
background-color: #282c34 !important;
}
.CodeMirror-scroll::before {
content: "";
display: block;
width: 100%;
height: 30px;
background-color: #384548;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.CodeMirror-scroll::after {
content: "";
position: absolute;
top: 0;
left: 35px;
width: 60px;
height: 30px;
background: url({{asset('falcon/assets/img/sd.png')}});
background-size: 40px;
background-repeat: no-repeat;
background-position: 15px 10px;
transform: rotate(-3deg);
}
.cm-s-isotope span.cm-tag {
color: #e06c75 !important;
}
.cm-s-isotope span.cm-bracket {
color: #ffffff !important;
}
.cm-s-isotope span.cm-attribute {
color: #d19a66 !important;
}
.cm-s-isotope span.cm-string {
color: #98c379 !important;
}
.cm-s-isotope span.cm-meta {
color: #61aeee !important;
}
</style>
<div>
<textarea id="code-xml" name="code" class="d-none">xml文本</textarea>
</div>
<script src="/path/codemirror/js/codemirror.js"></script>
<script src="/path/codemirror/js/foldcode.js"></script>
<script src="/path/codemirror/js/foldgutter.js"></script>
<script src="/path/codemirror/js/xml-fold.js"></script>
<script src="/path/codemirror/js/xml.js"></script>
<script type="module">
function initCode() {
return CodeMirror.fromTextArea(document.getElementById("code-xml"), {
mode: "text/xml",
lineNumbers: true,
readOnly: true,
cursorBlinkRate: 0,
theme: "isotope",
// extraKeys: {
// "Ctrl-Q": function (cm) {
// cm.foldCode(cm.getCursor());
// }
// },
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
}
var editor = initCode();
</script>
|