--- /dev/null
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>CodeMirror: COBOL mode</title>
+ <link rel="stylesheet" href="../../lib/codemirror.css">
+ <script src="../../lib/codemirror.js"></script>
+ <script src="../../addon/edit/matchbrackets.js"></script>
+ <script src="cobol.js"></script>
+ <link rel="stylesheet" href="../../theme/neat.css">
+ <link rel="stylesheet" href="../../theme/elegant.css">
+ <link rel="stylesheet" href="../../theme/erlang-dark.css">
+ <link rel="stylesheet" href="../../theme/night.css">
+ <link rel="stylesheet" href="../../theme/monokai.css">
+ <link rel="stylesheet" href="../../theme/cobalt.css">
+ <link rel="stylesheet" href="../../theme/eclipse.css">
+ <link rel="stylesheet" href="../../theme/rubyblue.css">
+ <link rel="stylesheet" href="../../theme/lesser-dark.css">
+ <link rel="stylesheet" href="../../theme/xq-dark.css">
+ <link rel="stylesheet" href="../../theme/xq-light.css">
+ <link rel="stylesheet" href="../../theme/ambiance.css">
+ <link rel="stylesheet" href="../../theme/blackboard.css">
+ <link rel="stylesheet" href="../../theme/vibrant-ink.css">
+ <link rel="stylesheet" href="../../theme/solarized.css">
+ <link rel="stylesheet" href="../../theme/twilight.css">
+ <link rel="stylesheet" href="../../theme/midnight.css">
+ <link rel="stylesheet" href="../../addon/dialog/dialog.css">
+ <script src="../../addon/selection/active-line.js"></script>
+ <script src="../../addon/search/search.js"></script>
+ <script src="../../addon/dialog/dialog.js"></script>
+ <script src="../../addon/search/searchcursor.js"></script>
+ <style>
+ .CodeMirror {
+ border: 1px solid #eee;
+ font-size : 20px;
+ height : auto !important;
+ }
+ .CodeMirror-activeline-background {background: #555555 !important;}
+ </style>
+ </head>
+ <body>
+ <p> Select Theme <select onchange="selectTheme()" id="selectTheme">
+ <option>default</option>
+ <option>ambiance</option>
+ <option>blackboard</option>
+ <option>cobalt</option>
+ <option>eclipse</option>
+ <option>elegant</option>
+ <option>erlang-dark</option>
+ <option>lesser-dark</option>
+ <option>midnight</option>
+ <option>monokai</option>
+ <option>neat</option>
+ <option>night</option>
+ <option>rubyblue</option>
+ <option>solarized dark</option>
+ <option>solarized light</option>
+ <option selected>twilight</option>
+ <option>vibrant-ink</option>
+ <option>xq-dark</option>
+ <option>xq-light</option>
+ </select> Select Font Size <select onchange="selectFontsize()" id="selectFontSize">
+ <option value="13px">13px</option>
+ <option value="14px">14px</option>
+ <option value="16px">16px</option>
+ <option value="18px">18px</option>
+ <option value="20px" selected="selected">20px</option>
+ <option value="24px">24px</option>
+ <option value="26px">26px</option>
+ <option value="28px">28px</option>
+ <option value="30px">30px</option>
+ <option value="32px">32px</option>
+ <option value="34px">34px</option>
+ <option value="36px">36px</option>
+ </select>
+<label for="checkBoxReadOnly">Read-only</label>
+<input type="checkbox" id="checkBoxReadOnly" onchange="selectReadOnly()">
+<label for="id_tabToIndentSpace">Insert Spaces on Tab</label>
+<input type="checkbox" id="id_tabToIndentSpace" onchange="tabToIndentSpace()">
+</p>
+<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 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 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
+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 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.
+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 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 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
+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.
+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>
+ <script>
+ var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
+ lineNumbers: true,
+ matchBrackets: true,
+ mode: "text/x-cobol",
+ theme : "twilight",
+ styleActiveLine: true,
+ showCursorWhenSelecting : true,
+ });
+ function selectTheme() {
+ var themeInput = document.getElementById("selectTheme");
+ var theme = themeInput.options[themeInput.selectedIndex].innerHTML;
+ editor.setOption("theme", theme);
+ }
+ function selectFontsize() {
+ var fontSizeInput = document.getElementById("selectFontSize");
+ var fontSize = fontSizeInput.options[fontSizeInput.selectedIndex].innerHTML;
+ editor.getWrapperElement().style["font-size"] = fontSize;
+ editor.refresh();
+ }
+ function selectReadOnly() {
+ editor.setOption("readOnly", document.getElementById("checkBoxReadOnly").checked);
+ }
+ function tabToIndentSpace() {
+ if (document.getElementById("id_tabToIndentSpace").checked) {
+ editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection(" ", "end"); }});
+ } else {
+ editor.setOption("extraKeys", {Tab: function(cm) { cm.replaceSelection(" ", "end"); }});
+ }
+ }
+ </script>
+ </body>
+</html>
git://git.onelab.eu / myslice.git / blobdiff