Mercurial

comparison .cms/lib/codemirror/demo/lint.html @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:78edf6b517a0
1 <!doctype html>
2
3 <title>CodeMirror: Linter Demo</title>
4 <meta charset="utf-8"/>
5 <link rel=stylesheet href="../doc/docs.css">
6
7 <link rel="stylesheet" href="../lib/codemirror.css">
8 <link rel="stylesheet" href="../addon/lint/lint.css">
9 <script src="../lib/codemirror.js"></script>
10 <script src="../mode/javascript/javascript.js"></script>
11 <script src="../mode/css/css.js"></script>
12 <script src="https://unpkg.com/jshint@2.13.2/dist/jshint.js"></script>
13 <script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>
14 <script src="https://unpkg.com/csslint@1.0.5/dist/csslint.js"></script>
15 <script src="../addon/lint/lint.js"></script>
16 <script src="../addon/lint/javascript-lint.js"></script>
17 <script src="../addon/lint/json-lint.js"></script>
18 <script src="../addon/lint/css-lint.js"></script>
19 <style>
20 .CodeMirror {border: 1px solid black;}
21 </style>
22 <div id=nav>
23 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
24
25 <ul>
26 <li><a href="../index.html">Home</a>
27 <li><a href="../doc/manual.html">Manual</a>
28 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
29 </ul>
30 <ul>
31 <li><a class=active href="#">Linter</a>
32 </ul>
33 </div>
34
35 <article>
36 <h2>Linter Demo</h2>
37
38
39 <p><textarea id="code-js">var widgets = []
40 function updateHints() {
41 editor.operation(function(){
42 for (var i = 0; i < widgets.length.; ++i)
43 editor.removeLineWidget(widgets[i]);
44 widgets.length = 0;
45
46 JSHINT(editor.getValue());
47 for (var i = 0; i < JSHINT.errors.length; ++i) {
48 var err = JSHINT.errors[i];
49 if (!err) continue;
50 var msg = document.createElement("div");
51 var icon = msg.appendChild(document.createElement("span"));
52 icon.innerHTML = "!!";
53 icon.className = "lint-error-icon";
54 msg.appendChild(document.createTextNode(err.reason));
55 msg.className = "lint-error";
56 widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
57 }
58 });
59 var info = editor.getScrollInfo();
60 var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
61 if (info.top + info.clientHeight < after)
62 editor.scrollTo(null, after - info.clientHeight + 3);
63 }
64 </textarea></p>
65
66 <p><textarea id="code-json">[
67 {
68 _id: "post 1",
69 "author": "Bob",
70 "content": "...",
71 "page_views": 5
72 },
73 {
74 "_id": "post 2",
75 "author": "Bob",
76 "content": "...",
77 "page_views": 9
78 },
79 {
80 "_id": "post 3",
81 "author": "Bob",
82 "content": "...",
83 "page_views": 8
84 }
85 ]
86 </textarea></p>
87
88 <p><textarea id="code-css">@charset "UTF-8";
89
90 @import url("booya.css") print, screen;
91 @import "whatup.css" screen;
92 @import "wicked.css";
93
94 /*Error*/
95 @charset "UTF-8";
96
97
98 @namespace "http://www.w3.org/1999/xhtml";
99 @namespace svg "http://www.w3.org/2000/svg";
100
101 /*Warning: empty ruleset */
102 .foo {
103 }
104
105 h1 {
106 font-weight: bold;
107 }
108
109 /*Warning: qualified heading */
110 .foo h1 {
111 font-weight: bold;
112 }
113
114 /*Warning: adjoining classes */
115 .foo.bar {
116 zoom: 1;
117 }
118
119 li.inline {
120 width: 100%; /*Warning: 100% can be problematic*/
121 }
122
123 li.last {
124 display: inline;
125 padding-left: 3px !important;
126 padding-right: 3px;
127 border-right: 0px;
128 }
129
130 @media print {
131 li.inline {
132 color: black;
133 }
134 }
135
136 @page {
137 margin: 10%;
138 counter-increment: page;
139
140 @top-center {
141 font-family: sans-serif;
142 font-weight: bold;
143 font-size: 2em;
144 content: counter(page);
145 }
146 }
147 </textarea></p>
148 <script>
149 var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
150 lineNumbers: true,
151 mode: "javascript",
152 gutters: ["CodeMirror-lint-markers"],
153 lint: {options: {esversion: 2021}},
154 });
155
156 var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
157 lineNumbers: true,
158 mode: "application/json",
159 gutters: ["CodeMirror-lint-markers"],
160 lint: true
161 });
162
163 var editor_css = CodeMirror.fromTextArea(document.getElementById("code-css"), {
164 lineNumbers: true,
165 mode: "css",
166 gutters: ["CodeMirror-lint-markers"],
167 lint: true
168 });
169 </script>
170
171 </article>