File modules/editor/codemirror/mode/cobol/index.html

Last commit: Sun Dec 17 01:14:09 2017 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.


     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>



Download modules/editor/codemirror/mode/cobol/index.html


History
Sun, 17 Dec 2017 01:14:09 +0100	Jan Dankert	Integration eines weiteren Code-Editors: Codemirror. Demnächst müssen wir hier mal aufräumen und andere Editoren rauswerfen.