5 <title>CodeMirror: COBOL mode</title>
6 <link rel="stylesheet" href="../../lib/codemirror.css">
7 <script src="../../lib/codemirror.js"></script>
8 <script src="../../addon/edit/matchbrackets.js"></script>
9 <script src="cobol.js"></script>
10 <link rel="stylesheet" href="../../theme/neat.css">
11 <link rel="stylesheet" href="../../theme/elegant.css">
12 <link rel="stylesheet" href="../../theme/erlang-dark.css">
13 <link rel="stylesheet" href="../../theme/night.css">
14 <link rel="stylesheet" href="../../theme/monokai.css">
15 <link rel="stylesheet" href="../../theme/cobalt.css">
16 <link rel="stylesheet" href="../../theme/eclipse.css">
17 <link rel="stylesheet" href="../../theme/rubyblue.css">
18 <link rel="stylesheet" href="../../theme/lesser-dark.css">
19 <link rel="stylesheet" href="../../theme/xq-dark.css">
20 <link rel="stylesheet" href="../../theme/xq-light.css">
21 <link rel="stylesheet" href="../../theme/ambiance.css">
22 <link rel="stylesheet" href="../../theme/blackboard.css">
23 <link rel="stylesheet" href="../../theme/vibrant-ink.css">
24 <link rel="stylesheet" href="../../theme/solarized.css">
25 <link rel="stylesheet" href="../../theme/twilight.css">
26 <link rel="stylesheet" href="../../theme/midnight.css">
27 <link rel="stylesheet" href="../../addon/dialog/dialog.css">
28 <script src="../../addon/selection/active-line.js"></script>
29 <script src="../../addon/search/search.js"></script>
30 <script src="../../addon/dialog/dialog.js"></script>
31 <script src="../../addon/search/searchcursor.js"></script>
34 border: 1px solid #eee;
36 height : auto !important;
38 .CodeMirror-activeline-background {background: #555555 !important;}
42 <p> Select Theme <select onchange="selectTheme()" id="selectTheme">
43 <option>default</option>
44 <option>ambiance</option>
45 <option>blackboard</option>
46 <option>cobalt</option>
47 <option>eclipse</option>
48 <option>elegant</option>
49 <option>erlang-dark</option>
50 <option>lesser-dark</option>
51 <option>midnight</option>
52 <option>monokai</option>
54 <option>night</option>
55 <option>rubyblue</option>
56 <option>solarized dark</option>
57 <option>solarized light</option>
58 <option selected>twilight</option>
59 <option>vibrant-ink</option>
60 <option>xq-dark</option>
61 <option>xq-light</option>
62 </select> Select Font Size <select onchange="selectFontsize()" id="selectFontSize">
63 <option value="13px">13px</option>
64 <option value="14px">14px</option>
65 <option value="16px">16px</option>
66 <option value="18px">18px</option>
67 <option value="20px" selected="selected">20px</option>
68 <option value="24px">24px</option>
69 <option value="26px">26px</option>
70 <option value="28px">28px</option>
71 <option value="30px">30px</option>
72 <option value="32px">32px</option>
73 <option value="34px">34px</option>
74 <option value="36px">36px</option>
76 <label for="checkBoxReadOnly">Read-only</label>
77 <input type="checkbox" id="checkBoxReadOnly" onchange="selectReadOnly()">
78 <label for="id_tabToIndentSpace">Insert Spaces on Tab</label>
79 <input type="checkbox" id="id_tabToIndentSpace" onchange="tabToIndentSpace()">
81 <textarea id="code" name="code">
82 ---------1---------2---------3---------4---------5---------6---------7---------8
83 12345678911234567892123456789312345678941234567895123456789612345678971234567898
84 000010 IDENTIFICATION DIVISION. MODTGHERE
85 000020 PROGRAM-ID. SAMPLE.
86 000030 AUTHOR. TEST SAM.
87 000040 DATE-WRITTEN. 5 February 2013
89 000042* A sample program just to show the form.
90 000043* The program copies its input to the output,
91 000044* and counts the number of records.
92 000045* At the end this number is printed.
94 000050 ENVIRONMENT DIVISION.
95 000060 INPUT-OUTPUT SECTION.
97 000080 SELECT STUDENT-FILE ASSIGN TO SYSIN
98 000090 ORGANIZATION IS LINE SEQUENTIAL.
99 000100 SELECT PRINT-FILE ASSIGN TO SYSOUT
100 000110 ORGANIZATION IS LINE SEQUENTIAL.
102 000130 DATA DIVISION.
104 000150 FD STUDENT-FILE
105 000160 RECORD CONTAINS 43 CHARACTERS
106 000170 DATA RECORD IS STUDENT-IN.
107 000180 01 STUDENT-IN PIC X(43).
110 000210 RECORD CONTAINS 80 CHARACTERS
111 000220 DATA RECORD IS PRINT-LINE.
112 000230 01 PRINT-LINE PIC X(80).
114 000250 WORKING-STORAGE SECTION.
115 000260 01 DATA-REMAINS-SWITCH PIC X(2) VALUE SPACES.
116 000261 01 RECORDS-WRITTEN PIC 99.
118 000280 01 DETAIL-LINE.
119 000290 05 FILLER PIC X(7) VALUE SPACES.
120 000300 05 RECORD-IMAGE PIC X(43).
121 000310 05 FILLER PIC X(30) VALUE SPACES.
123 000312 01 SUMMARY-LINE.
124 000313 05 FILLER PIC X(7) VALUE SPACES.
125 000314 05 TOTAL-READ PIC 99.
126 000315 05 FILLER PIC X VALUE SPACE.
127 000316 05 FILLER PIC X(17)
128 000317 VALUE 'Records were read'.
129 000318 05 FILLER PIC X(53) VALUE SPACES.
131 000320 PROCEDURE DIVISION.
133 000330 PREPARE-SENIOR-REPORT.
134 000340 OPEN INPUT STUDENT-FILE
135 000350 OUTPUT PRINT-FILE.
136 000351 MOVE ZERO TO RECORDS-WRITTEN.
137 000360 READ STUDENT-FILE
138 000370 AT END MOVE 'NO' TO DATA-REMAINS-SWITCH
140 000390 PERFORM PROCESS-RECORDS
141 000410 UNTIL DATA-REMAINS-SWITCH = 'NO'.
142 000411 PERFORM PRINT-SUMMARY.
143 000420 CLOSE STUDENT-FILE
147 000460 PROCESS-RECORDS.
148 000470 MOVE STUDENT-IN TO RECORD-IMAGE.
149 000480 MOVE DETAIL-LINE TO PRINT-LINE.
150 000490 WRITE PRINT-LINE.
151 000500 ADD 1 TO RECORDS-WRITTEN.
152 000510 READ STUDENT-FILE
153 000520 AT END MOVE 'NO' TO DATA-REMAINS-SWITCH
156 000550 PRINT-SUMMARY.
157 000560 MOVE RECORDS-WRITTEN TO TOTAL-READ.
158 000570 MOVE SUMMARY-LINE TO PRINT-LINE.
159 000571 WRITE PRINT-LINE.
164 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
167 mode: "text/x-cobol",
169 styleActiveLine: true,
170 showCursorWhenSelecting : true,
172 function selectTheme() {
173 var themeInput = document.getElementById("selectTheme");
174 var theme = themeInput.options[themeInput.selectedIndex].innerHTML;
175 editor.setOption("theme", theme);
177 function selectFontsize() {
178 var fontSizeInput = document.getElementById("selectFontSize");
179 var fontSize = fontSizeInput.options[fontSizeInput.selectedIndex].innerHTML;
180 editor.getWrapperElement().style["font-size"] = fontSize;
183 function selectReadOnly() {
184 editor.setOption("readOnly", document.getElementById("checkBoxReadOnly").checked);
186 function tabToIndentSpace() {
187 if (document.getElementById("id_tabToIndentSpace").checked) {
188 editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection(" ", "end"); }});
190 editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection(" ", "end"); }});