Added highligtingjs to the snippets and modal

buchanaf · buchanaf · commit 747598a01085 · 2014-07-09T12:55:14.000-04:00
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -5,7 +5,8 @@ angular.module('codeSearchApp', [
   'ngResource',
   'ngSanitize',
   'ui.bootstrap',
-  'ngRoute'
+  'ngRoute',
+  'hljs'
 ])
   .config(function ($routeProvider, $locationProvider, $httpProvider) {
     $routeProvider
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
@@ -45,7 +45,11 @@ angular.module('codeSearchApp')
       $scope.loading = false;
       $scope.codeSnippits = data.codeSnippits;
       $scope.pageArray = data.pageArray;
-      console.log($scope.codeSnippits[1].snippitVoters[$rootScope.currentUser.github_id])
+
+
+
+
+      // console.log($scope.codeSnippits[1].snippitVoters[$rootScope.currentUser.github_id])
 
      })
     };
diff --git a/app/scripts/controllers/modal.js b/app/scripts/controllers/modal.js
@@ -24,6 +24,10 @@ angular.module('codeSearchApp')
       console.log('anchor scrolling!');
       $location.hash('snip-highlight');
       $anchorScroll();
+      $timeout(function(){
+        hljs.initHighlighting();
+      });
+      console.log('test')
     };
 
     $scope.snippitObj = data.snippitObj;
@@ -39,6 +43,9 @@ angular.module('codeSearchApp')
     $scope.preSnippitBody = content.substring(0, snippitStartIdx);
     $scope.postSnippitBody = content.substring(snippitEndIdx);
 
-    $timeout( $scope.goToSnippit, 200 );
+    $timeout( function(){
+      $scope.goToSnippit()
+    }, 200 );
+
   });
 
diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -339,6 +339,13 @@ div.snippit pre:hover {
 
 }
 
+span > pre {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
 .votepick {
   color:#ff003f;
 }
@@ -361,12 +368,3 @@ div.snippit pre:hover {
 .cat:hover{
   opacity:0.5;
 }
-
-/*.loginlink p {
-  line-height: 10px;
-  margin-bottom: 10px;
-}
-
-.navbar-nav > li > a {
-  padding-top: 10px
-}*/
diff --git a/app/views/index.html b/app/views/index.html
@@ -13,11 +13,16 @@
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
     <!-- build:css(app) styles/vendor.css -->
     <!-- bower:css -->
+    <link rel="stylesheet" href="bower_components/highlightjs/styles/default.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css({.tmp,app}) styles/main.css -->
     <link rel="stylesheet" href="styles/main.css">
     <link href='http://fonts.googleapis.com/css?family=Lato:300,400,900' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.0/styles/rainbow.min.css
+">
+
+
     <!-- endbuild -->
   </head>
   <body ng-app="codeSearchApp">
@@ -53,10 +58,12 @@
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+    <script src="bower_components/highlightjs/highlight.pack.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
         <!-- build:js({.tmp,app}) scripts/scripts.js -->
+        <script src="bower_components/angular-highlightjs/angular-highlightjs.js"></script>
         <script src="scripts/app.js"></script>
         <script src="scripts/controllers/main.js"></script>
         <script src="scripts/controllers/navbar.js"></script>
@@ -72,6 +79,7 @@
         <script src="scripts/filters/startpagefrom.js"></script>
         <script src="scripts/filters/paginatefrom.js"></script>
         <script src="scripts/controllers/modal.js"></script>
+        <script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
         <!-- endbuild -->
 </body>
 </html>
diff --git a/app/views/partials/codesnippetmodal.html b/app/views/partials/codesnippetmodal.html
@@ -12,9 +12,9 @@
       </div>
     </div>
   </div>
-  <div class="modal-body">
-      <pre>{{preSnippitBody}}<span id="snip-highlight" style="color: red; background-color: yellow">{{snippitSubStr}}</span>{{postSnippitBody}}</pre>
-  </div>
+ <div class="modal-body">
+     <span hljs source="preSnippitBody"></span><span id="snip-highlight" hljs source="snippitSubStr"></span><span hljs source="postSnippitBody">{{postSnippitBody}}</span>
+ </div>
   <div class="modal-footer">
     <button class="btn btn-small pull-right" ng-click="dismissModal()">X</button>
   </div>
diff --git a/app/views/partials/main.html b/app/views/partials/main.html
@@ -1,5 +1,7 @@
 
 <div ng-include="'partials/navbar'"></div>
+
+
 <!-- <div class="jumbotron">
 >>>>>>> upstream/master
   <div class="form-group">
@@ -95,12 +97,13 @@ <h3>Results:</h3>
       ng-click="page.currPage = page.currPage+1" class="btn btn-info">Next</button>
     {{page.currPage + 1}} / {{ getNumPages() }}
   </div>
+
   <br>
   <div class="snippit" ng-repeat="snippitObj in codeSnippits |
                                   startPageFrom : page.currPage*page.resultsPerPage |
                                   limitTo : page.resultsPerPage track by $index">
     <div class="row">
-      <pre class="col-md-10 change-cursor" ng-click="openModal('lg', snippitObj)" >{{snippitObj.snippit}}</pre>
+      <div class="col-md-10" ng-click="openModal('lg', snippitObj)" hljs source='snippitObj.snippit' language='javascript'></div>
       <div class="col-md-2">
       <i class="change-cursor glyphicon glyphicon-thumbs-up" ng-click="snippitVote(1, snippitObj)" ng-class='{votepick: snippitObj.snippitVoters[currentUser.github_id] === 1}'></i>
       {{snippitObj.snippitScore}}
@@ -128,3 +131,4 @@ <h3>Results:</h3>
   <p>♥ from aa.js</p>
 </div>
 
+
diff --git a/bower.json b/bower.json
@@ -11,7 +11,8 @@
     "angular-cookies": ">=1.2.*",
     "angular-sanitize": ">=1.2.*",
     "angular-route": ">=1.2.*",
-    "angular-bootstrap": "~0.11.0"
+    "angular-bootstrap": "~0.11.0",
+    "angular-highlightjs": "~0.3.0"
   },
   "devDependencies": {
     "angular-mocks": ">=1.2.*",
