Syntax highlighting basics

javascript/src/CodeCorrection.js

@@ -8,6 +8,7 @@
 /* @depend Alert.js */
 /* @depend Comment.js */
 /* @depend CommentController */
+/* @depend SyntaxHighlighter */
 
 /**
  * Qfq Namespace
@@ -41,6 +42,7 @@ var QfqNS = QfqNS || {};
         this.users = [];
         this.currentUser = currentUser;
         this.language = language;
+        this.syntaxHighlight = {};
     };
 
     /**
@@ -63,16 +65,24 @@ var QfqNS = QfqNS || {};
         if (this.data.url) {
             // Get data of a file and write it to data.text
             $.get(this.data.url, function(response) {
-                that.data.text =  response;
-                that._buildEditor();
+                that.data.text = response;
+                that._prepareBuild();
             });
         } else if (this.data.text) {
-            this._buildEditor();
+            this._prepareBuild();
         } else {
             console.error("[CodeCorrection] No Code to correct passed to the object.");
         }
     };
 
+    n.CodeCorrection.prototype._prepareBuild = function() {
+        var that = this;
+        this.syntaxHighlight = new n.SyntaxHighlighter();
+        this.syntaxHighlight.importInstructions(this.language, function() {
+            that._buildEditor();
+        });
+    };
+
     /**
      * Breaks up the String by line and returns it as an Array
      * @param text Unix formatted text of the Code File
@@ -149,6 +159,7 @@ var QfqNS = QfqNS || {};
         var cLine = line.replace(/\s/g, ' ')
             .replace('<', '&lt;')
             .replace('>', '&gt;');
+        cLine = this.syntaxHighlight.highlightLine(cLine);
         var htmlCodeLine = $('<div/>', {
             class: 'pull-right qfqCode'
         });
@@ -169,7 +180,6 @@ var QfqNS = QfqNS || {};
         var commentController = new n.CommentController();
         commentController.buildContainer($hook);
         commentController.setCurrentUser(this.currentUser);
-        console.log(this.currentUser.name);
         return commentController;
     };
 

javascript/src/SyntaxHighlighter.js

@@ -20,23 +20,38 @@ var QfqNS = QfqNS || {};
      */
     n.SyntaxHighlighter = function () {
         this.highlightInstructions = {};
+        this.uri = "";
+        this.importDone = false;
         this.waitingForEnd = false;
         this.multiLineClass = "";
         this.line = '';
     };
 
-    n.SyntaxHighlighter.prototype.importInstructions = function(json) {
-          $.getJSON(json, function( data ) {
-              this.highlightInstructions = data;
-          });
+    n.SyntaxHighlighter.prototype.importInstructions = function(json, callbackFn) {
+        var that = this;
+        console.log("Import instructions: " + json);
+        $.getJSON(json, function(data) {
+            that.highlightInstructions = data;
+            that.importDone = true;
+            if (callbackFn && typeof(callbackFn) === "function") {
+                console.log("callback found");
+                callbackFn();
+            }
+        });
+    };
+
+    n.SyntaxHighlighter.prototype.setLanguageUri = function(uri) {
+        this.uri = uri;
     };
 
+
     n.SyntaxHighlighter.prototype.highlightLine = function(line) {
         this.line = line;
         if(!this.waitingForEnd) {
             if (this._multiLineHighlight()) {
                 return this.line;
             }
+            this._wordHighlight();
         } else {
             if (this._multiLineHighlight()) {
                 return this.line;
@@ -45,6 +60,16 @@ var QfqNS = QfqNS || {};
                 return this.line;
             }
         }
+        return this.line;
+    };
+
+    n.SyntaxHighlighter.prototype._wordHighlight = function() {
+        for (var i = 0; i < this.highlightInstructions.singleWord.length; i++) {
+            var word = this.highlightInstructions.singleWord[i];
+            var regex = new RegExp(word.regex, "g");
+            var wrapClass = this.highlightInstructions.classes[word.styleId].name;
+            this.line = this.wrapMatch(wrapClass, regex, this.line);
+        }
     };
 
     n.SyntaxHighlighter.prototype._multiLineHighlight = function() {
@@ -59,12 +84,12 @@ var QfqNS = QfqNS || {};
 
             if (regex.test(this.line)) {
                 if(this.waitingForEnd) {
-                    this.endWrap(regex, this.line);
+                    this.line = this.endWrap(this.multiLineClass, regex, this.line);
                     this.waitingForEnd = false;
                     this.multiLineClass = "";
                 } else {
-                    this.multiLineClass = this.highlightInstructions.classes[multiLine.styleId];
-                    this.startWrap(this.multiLineClass, regex, this.line);
+                    this.multiLineClass = this.highlightInstructions.classes[multiLine.styleId].name;
+                    this.line = this.startWrap(this.multiLineClass, regex, this.line);
                     this.waitingForEnd = true;
                 }
                 return true;
@@ -79,18 +104,18 @@ var QfqNS = QfqNS || {};
     };
 
     n.SyntaxHighlighter.prototype.startWrap = function(spanClass, regex, line) {
-        line.replace(regex, "<span class=\"" + spanClass + "\">$1$2</span>");
-        return line;
+        var newLine = line.replace(regex, "<span class=\"" + spanClass + "\">$1$2</span>");
+        return newLine;
     };
 
     n.SyntaxHighlighter.prototype.endWrap = function(spanClass, regex, line) {
-        line.replace(regex, "<span class=\"" + spanClass + "\">$1</span>$2");
-        return line;
+        var newLine = line.replace(regex, "<span class=\"" + spanClass + "\">$1</span>$2");
+        return newLine;
     };
 
     n.SyntaxHighlighter.prototype.wrapMatch = function (spanClass, regex, line) {
-        line.replace(regex, "$1<span class=\"" + spanClass + "\">$2</span>$3")
-        return line;
+        var newLine = line.replace(regex, "$1<span class=\"" + spanClass + "\">$2</span>$3");
+        return newLine;
     };
 
 })(QfqNS);
\ No newline at end of file

less/qfq-bs.css.less

@@ -608,4 +608,17 @@ i.@{spinner_class} {
 
 .qfqCodeList {
   top: 35px;
+}
+
+.qfqSyntaxDoc {
+  color: #888;
+}
+
+.qfqSyntaxWord {
+  font-weight: bold;
+  color: #31708f;
+}
+
+.qfqSyntaxData {
+  color: #5cb85c;
 }
\ No newline at end of file

mockup/codeCorrection.html

@@ -102,7 +102,7 @@
             uid: 5,
             name: "Definitely not an AI",
             avatar: "mockData/avatar1.png"
-        }, 'mockData/javascript.json');
+        }, 'http://localhost:63342/qfq/mockup/mockData/javascript.json');
         codeCorrection.initialize();
 
     });

mockup/mockData/javascript.json

 {
-  "language": "javascript",s
+  "language": "javascript",
   "classes": [
     {
       "position": 0,
-      "name": "qfqHLComment",
-      "description": "Highlighting for Comments"
+      "name": "qfqSyntaxDoc",
+      "description": "jsDoc"
+    },
+    {
+      "position": 1,
+      "name": "qfqSyntaxWord",
+      "description": "Reserved Words"
+    },
+    {
+      "position": 2,
+      "name": "qfqSyntaxData",
+      "description": "Datatypes"
     }
   ],
   "multiLine": [
     {
-      "start": "(\/\*\*)(.*)$",
-      "end": "(\*\/)(.*)$",
+      "start": "(\/\\*\\*)(.*)$",
+      "end": "(\\*\/)(.*)$",
       "styleId": 0
     }
+  ],
+  "singleWord": [
+    {
+      "regex": "^(.*)(\\\".*\\\")(.*)$",
+      "styleId": 2
+    },
+    {
+      "regex": "(.*)(function)(.*)",
+      "styleId": 1
+    },
+    {
+      "regex": "^(.*)( if )(.*)$",
+      "styleId": 1
+    },
+    {
+      "regex": "^(.*)( for )(.*)$",
+      "styleId": 1
+    },
+    {
+      "regex": "^(.*)(this)(.*)$",
+      "styleId": 1
+    },
+    {
+      "regex": "^(.*)( var )(/*)$",
+      "styleId": 1
+    },
+    {
+      "regex": "^(.*)([0-9]+)(.*)$",
+      "styleId": 2
+    }
   ]
 }
\ No newline at end of file