Mercurial
comparison .cms/lib/codemirror/mode/cobol/index.html @ 0:78edf6b517a0 draft
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: COBOL mode</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="../../theme/neat.css"> | |
9 <link rel="stylesheet" href="../../theme/elegant.css"> | |
10 <link rel="stylesheet" href="../../theme/erlang-dark.css"> | |
11 <link rel="stylesheet" href="../../theme/night.css"> | |
12 <link rel="stylesheet" href="../../theme/monokai.css"> | |
13 <link rel="stylesheet" href="../../theme/cobalt.css"> | |
14 <link rel="stylesheet" href="../../theme/eclipse.css"> | |
15 <link rel="stylesheet" href="../../theme/rubyblue.css"> | |
16 <link rel="stylesheet" href="../../theme/lesser-dark.css"> | |
17 <link rel="stylesheet" href="../../theme/xq-dark.css"> | |
18 <link rel="stylesheet" href="../../theme/xq-light.css"> | |
19 <link rel="stylesheet" href="../../theme/ambiance.css"> | |
20 <link rel="stylesheet" href="../../theme/blackboard.css"> | |
21 <link rel="stylesheet" href="../../theme/vibrant-ink.css"> | |
22 <link rel="stylesheet" href="../../theme/solarized.css"> | |
23 <link rel="stylesheet" href="../../theme/twilight.css"> | |
24 <link rel="stylesheet" href="../../theme/midnight.css"> | |
25 <link rel="stylesheet" href="../../addon/dialog/dialog.css"> | |
26 <script src="../../lib/codemirror.js"></script> | |
27 <script src="../../addon/edit/matchbrackets.js"></script> | |
28 <script src="cobol.js"></script> | |
29 <script src="../../addon/selection/active-line.js"></script> | |
30 <script src="../../addon/search/search.js"></script> | |
31 <script src="../../addon/dialog/dialog.js"></script> | |
32 <script src="../../addon/search/searchcursor.js"></script> | |
33 <style> | |
34 .CodeMirror { | |
35 border: 1px solid #eee; | |
36 font-size : 20px; | |
37 height : auto !important; | |
38 } | |
39 .CodeMirror-activeline-background {background: #555555 !important;} | |
40 </style> | |
41 <div id=nav> | |
42 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png" alt=""></a> | |
43 | |
44 <ul> | |
45 <li><a href="../../index.html">Home</a> | |
46 <li><a href="../../doc/manual.html">Manual</a> | |
47 <li><a href="https://github.com/codemirror/codemirror5">Code</a> | |
48 </ul> | |
49 <ul> | |
50 <li><a href="../index.html">Language modes</a> | |
51 <li><a class=active href="#">COBOL</a> | |
52 </ul> | |
53 </div> | |
54 | |
55 <article> | |
56 <h2>COBOL mode</h2> | |
57 | |
58 <p> Select Theme <select onchange="selectTheme()" id="selectTheme"> | |
59 <option>default</option> | |
60 <option>ambiance</option> | |
61 <option>blackboard</option> | |
62 <option>cobalt</option> | |
63 <option>eclipse</option> | |
64 <option>elegant</option> | |
65 <option>erlang-dark</option> | |
66 <option>lesser-dark</option> | |
67 <option>midnight</option> | |
68 <option>monokai</option> | |
69 <option>neat</option> | |
70 <option>night</option> | |
71 <option>rubyblue</option> | |
72 <option>solarized dark</option> | |
73 <option>solarized light</option> | |
74 <option selected>twilight</option> | |
75 <option>vibrant-ink</option> | |
76 <option>xq-dark</option> | |
77 <option>xq-light</option> | |
78 </select> Select Font Size <select onchange="selectFontsize()" id="selectFontSize"> | |
79 <option value="13px">13px</option> | |
80 <option value="14px">14px</option> | |
81 <option value="16px">16px</option> | |
82 <option value="18px">18px</option> | |
83 <option value="20px" selected="selected">20px</option> | |
84 <option value="24px">24px</option> | |
85 <option value="26px">26px</option> | |
86 <option value="28px">28px</option> | |
87 <option value="30px">30px</option> | |
88 <option value="32px">32px</option> | |
89 <option value="34px">34px</option> | |
90 <option value="36px">36px</option> | |
91 </select> | |
92 <label for="checkBoxReadOnly">Read-only</label> | |
93 <input type="checkbox" id="checkBoxReadOnly" onchange="selectReadOnly()"> | |
94 <label for="id_tabToIndentSpace">Insert Spaces on Tab</label> | |
95 <input type="checkbox" id="id_tabToIndentSpace" onchange="tabToIndentSpace()"> | |
96 </p> | |
97 <textarea id="code" name="code"> | |
98 ---------1---------2---------3---------4---------5---------6---------7---------8 | |
99 12345678911234567892123456789312345678941234567895123456789612345678971234567898 | |
100 000010 IDENTIFICATION DIVISION. MODTGHERE | |
101 000020 PROGRAM-ID. SAMPLE. | |
102 000030 AUTHOR. TEST SAM. | |
103 000040 DATE-WRITTEN. 5 February 2013 | |
104 000041 | |
105 000042* A sample program just to show the form. | |
106 000043* The program copies its input to the output, | |
107 000044* and counts the number of records. | |
108 000045* At the end this number is printed. | |
109 000046 | |
110 000050 ENVIRONMENT DIVISION. | |
111 000060 INPUT-OUTPUT SECTION. | |
112 000070 FILE-CONTROL. | |
113 000080 SELECT STUDENT-FILE ASSIGN TO SYSIN | |
114 000090 ORGANIZATION IS LINE SEQUENTIAL. | |
115 000100 SELECT PRINT-FILE ASSIGN TO SYSOUT | |
116 000110 ORGANIZATION IS LINE SEQUENTIAL. | |
117 000120 | |
118 000130 DATA DIVISION. | |
119 000140 FILE SECTION. | |
120 000150 FD STUDENT-FILE | |
121 000160 RECORD CONTAINS 43 CHARACTERS | |
122 000170 DATA RECORD IS STUDENT-IN. | |
123 000180 01 STUDENT-IN PIC X(43). | |
124 000190 | |
125 000200 FD PRINT-FILE | |
126 000210 RECORD CONTAINS 80 CHARACTERS | |
127 000220 DATA RECORD IS PRINT-LINE. | |
128 000230 01 PRINT-LINE PIC X(80). | |
129 000240 | |
130 000250 WORKING-STORAGE SECTION. | |
131 000260 01 DATA-REMAINS-SWITCH PIC X(2) VALUE SPACES. | |
132 000261 01 RECORDS-WRITTEN PIC 99. | |
133 000270 | |
134 000280 01 DETAIL-LINE. | |
135 000290 05 FILLER PIC X(7) VALUE SPACES. | |
136 000300 05 RECORD-IMAGE PIC X(43). | |
137 000310 05 FILLER PIC X(30) VALUE SPACES. | |
138 000311 | |
139 000312 01 SUMMARY-LINE. | |
140 000313 05 FILLER PIC X(7) VALUE SPACES. | |
141 000314 05 TOTAL-READ PIC 99. | |
142 000315 05 FILLER PIC X VALUE SPACE. | |
143 000316 05 FILLER PIC X(17) | |
144 000317 VALUE 'Records were read'. | |
145 000318 05 FILLER PIC X(53) VALUE SPACES. | |
146 000319 | |
147 000320 PROCEDURE DIVISION. | |
148 000321 | |
149 000330 PREPARE-SENIOR-REPORT. | |
150 000340 OPEN INPUT STUDENT-FILE | |
151 000350 OUTPUT PRINT-FILE. | |
152 000351 MOVE ZERO TO RECORDS-WRITTEN. | |
153 000360 READ STUDENT-FILE | |
154 000370 AT END MOVE 'NO' TO DATA-REMAINS-SWITCH | |
155 000380 END-READ. | |
156 000390 PERFORM PROCESS-RECORDS | |
157 000410 UNTIL DATA-REMAINS-SWITCH = 'NO'. | |
158 000411 PERFORM PRINT-SUMMARY. | |
159 000420 CLOSE STUDENT-FILE | |
160 000430 PRINT-FILE. | |
161 000440 STOP RUN. | |
162 000450 | |
163 000460 PROCESS-RECORDS. | |
164 000470 MOVE STUDENT-IN TO RECORD-IMAGE. | |
165 000480 MOVE DETAIL-LINE TO PRINT-LINE. | |
166 000490 WRITE PRINT-LINE. | |
167 000500 ADD 1 TO RECORDS-WRITTEN. | |
168 000510 READ STUDENT-FILE | |
169 000520 AT END MOVE 'NO' TO DATA-REMAINS-SWITCH | |
170 000530 END-READ. | |
171 000540 | |
172 000550 PRINT-SUMMARY. | |
173 000560 MOVE RECORDS-WRITTEN TO TOTAL-READ. | |
174 000570 MOVE SUMMARY-LINE TO PRINT-LINE. | |
175 000571 WRITE PRINT-LINE. | |
176 000572 | |
177 000580 | |
178 </textarea> | |
179 <script> | |
180 var editor = CodeMirror.fromTextArea(document.getElementById("code"), { | |
181 lineNumbers: true, | |
182 matchBrackets: true, | |
183 mode: "text/x-cobol", | |
184 theme : "twilight", | |
185 styleActiveLine: true, | |
186 showCursorWhenSelecting : true, | |
187 }); | |
188 function selectTheme() { | |
189 var themeInput = document.getElementById("selectTheme"); | |
190 var theme = themeInput.options[themeInput.selectedIndex].innerHTML; | |
191 editor.setOption("theme", theme); | |
192 } | |
193 function selectFontsize() { | |
194 var fontSizeInput = document.getElementById("selectFontSize"); | |
195 var fontSize = fontSizeInput.options[fontSizeInput.selectedIndex].innerHTML; | |
196 editor.getWrapperElement().style.fontSize = fontSize; | |
197 editor.refresh(); | |
198 } | |
199 function selectReadOnly() { | |
200 editor.setOption("readOnly", document.getElementById("checkBoxReadOnly").checked); | |
201 } | |
202 function tabToIndentSpace() { | |
203 if (document.getElementById("id_tabToIndentSpace").checked) { | |
204 editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection(" ", "end"); }}); | |
205 } else { | |
206 editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection(" ", "end"); }}); | |
207 } | |
208 } | |
209 </script> | |
210 </article> |