github.com/elliott5/community@v0.14.1-0.20160709191136-823126fb026a/app/public/codemirror/mode/cobol/index.html (about) 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="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../../doc/logo.png"></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 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>