amber
/
amber


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!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>