basic COS syntax highlighting feature

README.md

@@ -6,7 +6,7 @@ An UML Class explorer for InterSystems Caché.
 + Build diagrams for any package or subpackage;
 + Edit diagrams after build;
 + Export diagrams as an image;
-+ View class methods code;
++ View class methods code with syntax highlighting;
 + Zoom in and out, explore big packages and more.
 
 ## Screenshots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CacheUMLExplorer",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "An UML Class explorer for InterSystems Caché",
   "directories": {
     "test": "test"

web/css/syntax.css

@@ -0,0 +1,27 @@
+.syntax-comment {
+    color: green;
+}
+
+.syntax-string {
+    color: #394;
+}
+
+.syntax-vars, .syntax-keyword {
+    color: #00b;
+}
+
+.syntax-names {
+    color: #299;
+}
+
+.syntax-functions {
+    color: #986;
+}
+
+.syntax-global {
+    color: #800;
+}
+
+.syntax-other {
+    color: red;
+}

web/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="css/interface.css"/>
     <link rel="stylesheet" href="css/treeView.css"/>
     <link rel="stylesheet" href="css/extras.css"/>
+    <link rel="stylesheet" href="css/syntax.css"/>
     <link rel="stylesheet" href="css/classView.css"/>
     <link rel="stylesheet" href="css/joint.min.css"/>
     <link rel="stylesheet" href="css/methodCodeView.css"/>

web/js/ClassView.js

@@ -340,7 +340,7 @@ ClassView.prototype.showMethodCode = function (className, methodName) {
             + (data["arguments"] || "").replace(/,/g, ", ").replace(/:/g, ": ") + ")"
             + (data["returns"] ? ": " + data["returns"] : "");
         els.methodDescription.innerHTML = data["description"] || "";
-        els.methodCode.textContent = data["code"] || "";
+        els.methodCode.innerHTML = lib.highlightCOS(data["code"] || "");
         els.methodViewBounds.style.height =
             els.classView.offsetHeight - els.methodViewBounds.offsetTop + "px";
         els.methodCodeView.classList.add("active");