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