Robochat 3 hihghlight

client/bower.json

@@ -15,7 +15,9 @@
     "angular-toastr": "~1.5.0",
     "moment": "~2.10.6",
     "animate.css": "~3.4.0",
-    "angular": "~1.4.2"
+    "angular": "~1.4.2",
+    "highlightjs": "~8.8.0",
+    "angular-highlightjs": "~0.4.3"
   },
   "devDependencies": {
     "angular-mocks": "~1.4.2"

client/src/app/index.module.js

@@ -9,16 +9,24 @@ import { WebDevTecService } from '../app/components/webDevTec/webDevTec.service'
 import { NavbarDirective } from '../app/components/navbar/navbar.directive';
 import { MalarkeyDirective } from '../app/components/malarkey/malarkey.directive';
 import { roboChatMessagesDirective } from './main/robochat.messages.directive';
+import { highlightMessageDirective } from './main/highlight.message.directive';
 
-angular.module('client', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'ui.bootstrap', 'toastr'])
+angular.module('client', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'ui.bootstrap', 'toastr', 'hljs'])
   .constant('malarkey', malarkey)
   .constant('moment', moment)
   .config(config)
   .config(routerConfig)
+  .config(function (hljsServiceProvider) {
+      hljsServiceProvider.setOptions({
+        // replace tab with 4 spaces
+        tabReplace: '    '
+      });
+    })
   .run(runBlock)
   .service('githubContributor', GithubContributorService)
   .service('webDevTec', WebDevTecService)
   .controller('MainController', MainController)
   .directive('acmeNavbar', NavbarDirective)
   .directive('acmeMalarkey', MalarkeyDirective)
-  .directive('robochatMessages', roboChatMessagesDirective);
+  .directive('robochatMessages', roboChatMessagesDirective)
+  .directive('highlightMessage',['$compile', highlightMessageDirective]);

client/src/app/main/highlight.message.directive.js

@@ -0,0 +1,33 @@
+export function highlightMessageDirective( $compile ) {
+
+  return {
+    scope: { },
+    link: function(scope, el, attr) {             
+        var onlyRunOne = scope.$watch(
+            function(scope) {               
+              return scope.$eval(attr.compile);
+            },
+            function(value) {              
+                var content = el.text();   
+                var codeParts = content.split("```").filter(function(el) {return el.length != 0});
+                var startCode = (content.indexOf("```")==0)
+                if(codeParts.length>1 || startCode){
+                    el.html("");
+
+                    codeParts.forEach(function(part, it){
+                        if(startCode != (it%2)){
+                          console.log("is Code");
+                            el.append("<hljs no-scape>"+part+"</hljs>");    
+                        }else{
+                            el.append(part);
+                        } 
+                        console.log(it, part);
+                    });                    
+                     $compile(el.contents())(scope);                  
+                }
+                // Angular un-watch 
+                onlyRunOne();
+            });
+    }
+  };
+}

client/src/app/main/main.jade

@@ -22,7 +22,7 @@ div
           header
             span.member(data-ng-bind="message.member")
             span.timestamp(data-ng-bind="message.ts | date:'HH:mm:ss'")
-          div(data-ng-bind="message.text")
+          div(ng-bind="message.text" highlight-message="")
           footer
     footer
         textarea(data-ng-model="main.message" ng-keyup="$event.keyCode == 13 && main.post()")