purescript
diff --git a/‎css/index.css
Lines changed: 8 additions & 2 deletions b/‎css/index.css
Lines changed: 8 additions & 2 deletions
diff --git a/‎index.html
Lines changed: 12 additions & 11 deletions b/‎index.html
Lines changed: 12 additions & 11 deletions
@@ -173,8 +173,14 @@ body {
   border-bottom: 2px dotted red;
 }
 
-.gutter-error {
-  background-color: red;
+.warning {
+  position: absolute;
+  z-index: 20;
+  border-bottom: 2px dotted #c4953a;
+}
+
+.ace_gutter-tooltip {
+  white-space: pre-wrap;
 }
 
 .error-banner {
 
@@ -6,10 +6,6 @@
   <meta content="utf-8" http-equiv="encoding">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,600">
-  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto+Slab:300,600">
-  <link rel="stylesheet" type="text/css" href="css/index.css">
-
   <link rel="icon" type="image/png" href="./img/favicon_clear-16.png" sizes="16x16">
   <link rel="icon" type="image/png" href="./img/favicon_clear-32.png" sizes="32x32">
   <link rel="icon" type="image/png" href="./img/favicon_clear-256.png" sizes="256x256">
@@ -19,6 +15,10 @@
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" charset="utf-8"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/mode-haskell.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/theme-dawn.js"></script>
+
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,600">
+  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto+Slab:300,600">
+  <link rel="stylesheet" type="text/css" href="css/index.css">
 </head>
 <body>
   <div id="wrapper">
@@ -157,7 +157,11 @@
       cleanupActions = [];
     }
 
-    function addErrorMarker(startLine, startColumn, endLine, endColumn) {
+    function setAnnotations(annotations) {
+      editor.session.setAnnotations(annotations);
+    }
+
+    function addMarker(type, startLine, startColumn, endLine, endColumn) {
       if (startLine === endLine && endColumn <= startColumn) {
         // Make sure the range is at least one character wide.
         if (startColumn > 0) {
@@ -171,16 +175,13 @@
       var range = new(ace.require("ace/range").Range)
         (startLine - 1, startColumn - 1, endLine - 1, endColumn - 1);
 
-      var marker = editor.session.addMarker(range, "error", "text", true);
-
-      editor.session.addGutterDecoration(startLine - 1, "gutter-error");
+      var marker = editor.session.addMarker(range, type, "text", true);
 
-      cleanupActions.push((function(marker, line) {
+      cleanupActions.push((function(marker) {
         return function() {
           editor.session.removeMarker(marker);
-          editor.session.removeGutterDecoration(line, "gutter-error");
         };
-      })(marker, startLine - 1));
+      })(marker));
     }
 
     function setupIFrame($ctr, html, js, onReady) {