scripts/CodeMirror/mode/cobol/index.html (view raw)
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"><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/codemirror">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
9912345678911234567892123456789312345678941234567895123456789612345678971234567898
100000010 IDENTIFICATION DIVISION. MODTGHERE
101000020 PROGRAM-ID. SAMPLE.
102000030 AUTHOR. TEST SAM.
103000040 DATE-WRITTEN. 5 February 2013
104000041
105000042* A sample program just to show the form.
106000043* The program copies its input to the output,
107000044* and counts the number of records.
108000045* At the end this number is printed.
109000046
110000050 ENVIRONMENT DIVISION.
111000060 INPUT-OUTPUT SECTION.
112000070 FILE-CONTROL.
113000080 SELECT STUDENT-FILE ASSIGN TO SYSIN
114000090 ORGANIZATION IS LINE SEQUENTIAL.
115000100 SELECT PRINT-FILE ASSIGN TO SYSOUT
116000110 ORGANIZATION IS LINE SEQUENTIAL.
117000120
118000130 DATA DIVISION.
119000140 FILE SECTION.
120000150 FD STUDENT-FILE
121000160 RECORD CONTAINS 43 CHARACTERS
122000170 DATA RECORD IS STUDENT-IN.
123000180 01 STUDENT-IN PIC X(43).
124000190
125000200 FD PRINT-FILE
126000210 RECORD CONTAINS 80 CHARACTERS
127000220 DATA RECORD IS PRINT-LINE.
128000230 01 PRINT-LINE PIC X(80).
129000240
130000250 WORKING-STORAGE SECTION.
131000260 01 DATA-REMAINS-SWITCH PIC X(2) VALUE SPACES.
132000261 01 RECORDS-WRITTEN PIC 99.
133000270
134000280 01 DETAIL-LINE.
135000290 05 FILLER PIC X(7) VALUE SPACES.
136000300 05 RECORD-IMAGE PIC X(43).
137000310 05 FILLER PIC X(30) VALUE SPACES.
138000311
139000312 01 SUMMARY-LINE.
140000313 05 FILLER PIC X(7) VALUE SPACES.
141000314 05 TOTAL-READ PIC 99.
142000315 05 FILLER PIC X VALUE SPACE.
143000316 05 FILLER PIC X(17)
144000317 VALUE 'Records were read'.
145000318 05 FILLER PIC X(53) VALUE SPACES.
146000319
147000320 PROCEDURE DIVISION.
148000321
149000330 PREPARE-SENIOR-REPORT.
150000340 OPEN INPUT STUDENT-FILE
151000350 OUTPUT PRINT-FILE.
152000351 MOVE ZERO TO RECORDS-WRITTEN.
153000360 READ STUDENT-FILE
154000370 AT END MOVE 'NO' TO DATA-REMAINS-SWITCH
155000380 END-READ.
156000390 PERFORM PROCESS-RECORDS
157000410 UNTIL DATA-REMAINS-SWITCH = 'NO'.
158000411 PERFORM PRINT-SUMMARY.
159000420 CLOSE STUDENT-FILE
160000430 PRINT-FILE.
161000440 STOP RUN.
162000450
163000460 PROCESS-RECORDS.
164000470 MOVE STUDENT-IN TO RECORD-IMAGE.
165000480 MOVE DETAIL-LINE TO PRINT-LINE.
166000490 WRITE PRINT-LINE.
167000500 ADD 1 TO RECORDS-WRITTEN.
168000510 READ STUDENT-FILE
169000520 AT END MOVE 'NO' TO DATA-REMAINS-SWITCH
170000530 END-READ.
171000540
172000550 PRINT-SUMMARY.
173000560 MOVE RECORDS-WRITTEN TO TOTAL-READ.
174000570 MOVE SUMMARY-LINE TO PRINT-LINE.
175000571 WRITE PRINT-LINE.
176000572
177000580
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>