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