openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

lint.html (4080B)

      1 <!doctype html>
      2 
      3 <title>CodeMirror: Linter Demo</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="../addon/lint/lint.css">
      9 <script src="../lib/codemirror.js"></script>
     10 <script src="../mode/javascript/javascript.js"></script>
     11 <script src="../mode/css/css.js"></script>
     12 <script src="//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
     13 <script src="https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
     14 <script src="http://csslint.net/js/csslint.js"></script>
     15 <script src="../addon/lint/lint.js"></script>
     16 <script src="../addon/lint/javascript-lint.js"></script>
     17 <script src="../addon/lint/json-lint.js"></script>
     18 <script src="../addon/lint/css-lint.js"></script>
     19 <style type="text/css">
     20       .CodeMirror {border: 1px solid black;}
     21     </style>
     22 <div id=nav>
     23   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
     24 
     25   <ul>
     26     <li><a href="../index.html">Home</a>
     27     <li><a href="../doc/manual.html">Manual</a>
     28     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     29   </ul>
     30   <ul>
     31     <li><a class=active href="#">Linter</a>
     32   </ul>
     33 </div>
     34 
     35 <article>
     36 <h2>Linter Demo</h2>
     37 
     38 
     39     <p><textarea id="code-js">var widgets = []
     40 function updateHints() {
     41   editor.operation(function(){
     42     for (var i = 0; i < widgets.length; ++i)
     43       editor.removeLineWidget(widgets[i]);
     44     widgets.length = 0;
     45 
     46     JSHINT(editor.getValue());
     47     for (var i = 0; i < JSHINT.errors.length; ++i) {
     48       var err = JSHINT.errors[i];
     49       if (!err) continue;
     50       var msg = document.createElement("div");
     51       var icon = msg.appendChild(document.createElement("span"));
     52       icon.innerHTML = "!!";
     53       icon.className = "lint-error-icon";
     54       msg.appendChild(document.createTextNode(err.reason));
     55       msg.className = "lint-error";
     56       widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
     57     }
     58   });
     59   var info = editor.getScrollInfo();
     60   var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
     61   if (info.top + info.clientHeight < after)
     62     editor.scrollTo(null, after - info.clientHeight + 3);
     63 }
     64 </textarea></p>
     65 
     66     <p><textarea id="code-json">[
     67  {
     68   _id: "post 1",
     69   "author": "Bob",
     70   "content": "...",
     71   "page_views": 5
     72  },
     73  {
     74   "_id": "post 2",
     75   "author": "Bob",
     76   "content": "...",
     77   "page_views": 9
     78  },
     79  {
     80   "_id": "post 3",
     81   "author": "Bob",
     82   "content": "...",
     83   "page_views": 8
     84  }
     85 ]
     86 </textarea></p>
     87 
     88     <p><textarea id="code-css">@charset "UTF-8";
     89 
     90 @import url("booya.css") print, screen;
     91 @import "whatup.css" screen;
     92 @import "wicked.css";
     93 
     94 /*Error*/
     95 @charset "UTF-8";
     96 
     97 
     98 @namespace "http://www.w3.org/1999/xhtml";
     99 @namespace svg "http://www.w3.org/2000/svg";
    100 
    101 /*Warning: empty ruleset */
    102 .foo {
    103 }
    104 
    105 h1 {
    106     font-weight: bold;
    107 }
    108 
    109 /*Warning: qualified heading */
    110 .foo h1 {
    111     font-weight: bold;
    112 }
    113 
    114 /*Warning: adjoining classes */
    115 .foo.bar {
    116     zoom: 1;
    117 }
    118 
    119 li.inline {
    120     width: 100%;  /*Warning: 100% can be problematic*/
    121 }
    122 
    123 li.last {
    124   display: inline;
    125   padding-left: 3px !important;
    126   padding-right: 3px;
    127   border-right: 0px;
    128 }
    129 
    130 @media print {
    131     li.inline {
    132       color: black;
    133     }
    134 }
    135 
    136 @page {
    137   margin: 10%;
    138   counter-increment: page;
    139 
    140   @top-center {
    141     font-family: sans-serif;
    142     font-weight: bold;
    143     font-size: 2em;
    144     content: counter(page);
    145   }
    146 }
    147 </textarea></p>
    148 <script>
    149   var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
    150     lineNumbers: true,
    151     mode: "javascript",
    152     gutters: ["CodeMirror-lint-markers"],
    153     lint: true
    154   });
    155 
    156   var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
    157     lineNumbers: true,
    158     mode: "application/json",
    159     gutters: ["CodeMirror-lint-markers"],
    160     lint: true
    161   });
    162   
    163   var editor_css = CodeMirror.fromTextArea(document.getElementById("code-css"), {
    164     lineNumbers: true,
    165     mode: "css",
    166     gutters: ["CodeMirror-lint-markers"],
    167     lint: true
    168   });
    169 </script>
    170 
    171   </article>