Switched to bower to pull highlight.js, dynamic switching of style in…

… notebook setting

- bower highlight.js package is no good, even when forced to pull latest release, and is not supported (highlightjs/highlight.js#182)
- fortunately someone has done the work to folk and create a different package (highlight.js vs highlightjs)
- add switching of style through a dropdown in notebook setting - apply immediately to visualize change, revert if not save
- add fetching list of style .css
- change style by updating stylesheet link
- grunt changes to copy highlightjs css and to run cssmin (+ also for looknfeel/*.css)
- stylesheets need to remain individual links, on the right path, to switch so they have a separate steps to copy and cssmin without being concat'd
- get wiredep to exclude default.css from the bower package since they are handled separately and have different path (not under bower_components when in yeoman.dist)
- small change to md exception handling from cr feedback

Possible issue? Sometimes the setting panel shows up without the correct style name selected, need to track down the repro steps still.

markdown/src/main/java/com/nflabs/zeppelin/markdown/Markdown.java

@@ -49,9 +49,7 @@ public InterpreterResult interpret(String st, InterpreterContext interpreterCont
     String html;
     try {
       html = md.process(st);
-    } catch (IOException e) {
-      return new InterpreterResult(Code.ERROR, e.getMessage());
-    } catch (java.lang.RuntimeException e) {
+    } catch (IOException | java.lang.RuntimeException e) {
       return new InterpreterResult(Code.ERROR, e.getMessage());
     }
     return new InterpreterResult(Code.SUCCESS, "%html " + html);

zeppelin-web/Gruntfile.js

@@ -58,6 +58,7 @@ module.exports = function (grunt) {
         files: [
           '<%= yeoman.app %>/{,*/}*.html',
           '.tmp/styles/{,*/}*.css',
+          '.tmp/styles_noncocat/{,*/}*.css',
           '<%= yeoman.app %>/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
         ]
       }
@@ -167,6 +168,7 @@ module.exports = function (grunt) {
       },
       app: {
         src: ['<%= yeoman.app %>/index.html'],
+        exclude: [ 'bower_components/highlightjs/styles/default.css' ],
         ignorePath:  /\.\.\//
       }
     },
@@ -215,15 +217,19 @@ module.exports = function (grunt) {
     // By default, your `index.html`'s <!-- Usemin block --> will take care of
     // minification. These next options are pre-configured if you do not wish
     // to use the Usemin blocks.
-    // cssmin: {
-    //   dist: {
-    //     files: {
-    //       '<%= yeoman.dist %>/styles/main.css': [
-    //         '.tmp/styles/{,*/}*.css'
-    //       ]
-    //     }
-    //   }
-    // },
+
+    // Explicit processing for special css directories
+    cssmin: {
+       dist: {
+         files: [{
+           expand: true,
+           dot: true,
+           cwd: '.tmp/styles_nonconcat/',
+           dest: '<%= yeoman.dist %>',
+           src: 'styles/{,*/}*.css'
+         }]
+       }
+    },
     // uglify: {
     //   dist: {
     //     files: {
@@ -302,7 +308,7 @@ module.exports = function (grunt) {
           expand : true,
           dot : true,
           cwd: '<%= yeoman.app %>',
-          dest: '<%= yeoman.dist %>',
+          dest: '.tmp/styles_nonconcat/',
           src: ['styles/looknfeel/*']
         }, {
           expand: true,
@@ -319,6 +325,16 @@ module.exports = function (grunt) {
           cwd: 'bower_components/jquery-ui/themes/base/images',
           src: '{,*/}*.{png,jpg,jpeg,gif}',
           dest: '<%= yeoman.dist %>/styles/images'
+        }, {
+          expand: true,
+          cwd: 'bower_components/highlightjs/styles',
+          src: '{,*/}*.css',
+          dest: '.tmp/styles_nonconcat/styles/highlightjs'
+        }, {
+          expand: true,
+          cwd: 'bower_components/highlightjs/styles',
+          src: '{,*/}*.{png,jpg,jpeg,gif}',
+          dest: '<%= yeoman.dist %>/styles/highlightjs'
         }]
       },
       styles: {

zeppelin-web/app/index.html

@@ -48,7 +48,55 @@
     <link rel="stylesheet" href="styles/simple-line-icons.css">
     <!-- endbuild -->
     <link rel="stylesheet" ng-href="styles/looknfeel/{{looknfeel}}.css">
-    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/googlecode.min.css">
+    <link rel="stylesheet" title="Default" href="styles/highlightjs/default.css" />
+    <link rel="alternate stylesheet" title="Arta" href="styles/highlightjs/arta.css" disabled />
+    <link rel="alternate stylesheet" title="Ascetic" href="styles/highlightjs/ascetic.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Dun - Dark" href="styles/highlightjs/atelier-dune.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Dun - Light" href="styles/highlightjs/atelier-dune.light.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Forest - Dark" href="styles/highlightjs/atelier-forest.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Forest - Light" href="styles/highlightjs/atelier-forest.light.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Heath - Dark" href="styles/highlightjs/atelier-heath.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Heath - Light" href="styles/highlightjs/atelier-heath.light.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Lakeside - Dark" href="styles/highlightjs/atelier-lakeside.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Lakeside - Light" href="styles/highlightjs/atelier-lakeside.light.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Seaside - Dark" href="styles/highlightjs/atelier-seaside.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Atelier Seaside - Light" href="styles/highlightjs/atelier-seaside.light.css" disabled />
+    <link rel="alternate stylesheet" title="Brown Paper" href="styles/highlightjs/brown_paper.css" disabled />
+    <link rel="alternate stylesheet" title="Codepen.io Embed" href="styles/highlightjs/codepen-embed.css" disabled />
+    <link rel="alternate stylesheet" title="Colorbrewer" href="styles/highlightjs/color-brewer.css" disabled />
+    <link rel="alternate stylesheet" title="Dark" href="styles/highlightjs/dark.css" disabled />
+    <link rel="alternate stylesheet" title="Docco" href="styles/highlightjs/docco.css" disabled />
+    <link rel="alternate stylesheet" title="FAR" href="styles/highlightjs/far.css" disabled />
+    <link rel="alternate stylesheet" title="Foundation" href="styles/highlightjs/foundation.css" disabled />
+    <link rel="alternate stylesheet" title="IDEA" href="styles/highlightjs/idea.css" disabled />
+    <link rel="alternate stylesheet" title="GitHub" href="styles/highlightjs/github.css" disabled />
+    <link rel="alternate stylesheet" title="Google Code" href="styles/highlightjs/googlecode.css" disabled />
+    <link rel="alternate stylesheet" title="Hybrid" href="styles/highlightjs/hybrid.css" disabled />
+    <link rel="alternate stylesheet" title="IR Black" href="styles/highlightjs/ir_black.css" disabled />
+    <link rel="alternate stylesheet" title="Kimbie - Dark" href="styles/highlightjs/kimbie.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Kimbie - Light" href="styles/highlightjs/kimbie.light.css" disabled />
+    <link rel="alternate stylesheet" title="Magula" href="styles/highlightjs/magula.css" disabled />
+    <link rel="alternate stylesheet" title="Mono Blue" href="styles/highlightjs/mono-blue.css" disabled />
+    <link rel="alternate stylesheet" title="Monokai" href="styles/highlightjs/monokai.css" disabled />
+    <link rel="alternate stylesheet" title="Monokai Sublime" href="styles/highlightjs/monokai_sublime.css" disabled />
+    <link rel="alternate stylesheet" title="Obsidian" href="styles/highlightjs/obsidian.css" disabled />
+    <link rel="alternate stylesheet" title="Paraíso - Dark" href="styles/highlightjs/paraiso.dark.css" disabled />
+    <link rel="alternate stylesheet" title="Paraíso - Light" href="styles/highlightjs/paraiso.light.css" disabled />
+    <link rel="alternate stylesheet" title="Pojoaque" href="styles/highlightjs/pojoaque.css" disabled />
+    <link rel="alternate stylesheet" title="Railscasts" href="styles/highlightjs/railscasts.css" disabled />
+    <link rel="alternate stylesheet" title="Rainbow" href="styles/highlightjs/rainbow.css" disabled />
+    <link rel="alternate stylesheet" title="School Book" href="styles/highlightjs/school_book.css" disabled />
+    <link rel="alternate stylesheet" title="Solarized - Dark" href="styles/highlightjs/solarized_dark.css" disabled />
+    <link rel="alternate stylesheet" title="Solarized - Light" href="styles/highlightjs/solarized_light.css" disabled />
+    <link rel="alternate stylesheet" title="Sunburst" href="styles/highlightjs/sunburst.css" disabled />
+    <link rel="alternate stylesheet" title="Tomorrow" href="styles/highlightjs/tomorrow.css" disabled />
+    <link rel="alternate stylesheet" title="Tomorrow Night" href="styles/highlightjs/tomorrow-night.css" disabled />
+    <link rel="alternate stylesheet" title="Tomorrow Night Bright" href="styles/highlightjs/tomorrow-night-bright.css" disabled />
+    <link rel="alternate stylesheet" title="Tomorrow Night Blue" href="styles/highlightjs/tomorrow-night-blue.css" disabled />
+    <link rel="alternate stylesheet" title="Tomorrow Night Eighties" href="styles/highlightjs/tomorrow-night-eighties.css" disabled />
+    <link rel="alternate stylesheet" title="Visual Studio" href="styles/highlightjs/vs.css" disabled />
+    <link rel="alternate stylesheet" title="XCode" href="styles/highlightjs/xcode.css" disabled />
+    <link rel="alternate stylesheet" title="Zenburn" href="styles/highlightjs/zenburn.css" disabled />
   </head>
   <body ng-class="{'bodyAsIframe': asIframe}" >
     <!--[if lt IE 7]>
@@ -127,6 +175,7 @@
     <script src="bower_components/ng-sortable/dist/ng-sortable.js"></script>
     <script src="bower_components/angular-elastic/elastic.js"></script>
     <script src="bower_components/angular-elastic-input/dist/angular-elastic-input.min.js"></script>
+    <script src="bower_components/highlightjs/highlight.pack.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!--
@@ -146,6 +195,5 @@
     <script src="scripts/controllers/nav.js"></script>
     <script src="scripts/directives/ngdelete.js"></script>
     <!-- endbuild -->
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
   </body>
 </html>

zeppelin-web/app/scripts/controllers/main.js

@@ -29,6 +29,7 @@ angular.module('zeppelinWebApp')
   $scope.WebSocketWaitingList = [];
   $scope.connected = false;
   $scope.looknfeel = 'default';
+  $scope.codeHighlightStyle = 'GitHub';
 
   var init = function() {
     $scope.asIframe = (($window.location.href.indexOf('asIframe') > -1) ? true : false);
@@ -111,4 +112,10 @@ angular.module('zeppelinWebApp')
     }
   });
 
+  $rootScope.$on('changeCodeHighlightStyle', function(event, data) {
+    if (!event.defaultPrevented && data && data !== '') {
+      $scope.codeHighlightStyle = data;
+      event.preventDefault();
+    }
+  });
 });

zeppelin-web/app/scripts/controllers/notebook.js

@@ -58,14 +58,22 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
     return value;
   };
 
+  var getCodeHighlightStyles = function() {
+    var allStyles = jQuery.makeArray($('link[title]'));
+    return jQuery.map( allStyles, function(style, index) {
+      return style.title;
+    });
+  };
+  $scope.codeHighlightStyles = getCodeHighlightStyles();
+
   /** Init the new controller */
   var initNotebook = function() {
     $rootScope.$emit('sendNewEvent', {op: 'GET_NOTE', data: {id: $routeParams.noteId}});
   };
 
   initNotebook();
 
-  /** Remove the note and go back tot he main page */
+  /** Remove the note and go back to the main page */
   /** TODO(anthony): In the nearly future, go back to the main page and telle to the dude that the note have been remove */
   $scope.removeNote = function(noteId) {
     var result = confirm('Do you want to delete this notebook?');
@@ -135,6 +143,18 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
     $rootScope.$emit('setLookAndFeel', $scope.note.config.looknfeel);
   };
 
+  $scope.changeCodeHighlightStyle = function(style) {
+    if(style) {
+      $scope.note.config.codeHighlightStyle = style;
+      $scope.setConfig();
+      $rootScope.$emit('changeCodeHighlightStyle', $scope.note.config.codeHighlightStyle);
+
+      $('link[title]').each(function(i, link) {
+        link.disabled = (link.title !== style);
+      });
+    }
+  };
+
   /** Set cron expression for this note **/
   $scope.setCronScheduler = function(cronExpr) {
     $scope.note.config.cron = cronExpr;
@@ -174,16 +194,27 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
     }
 
     /** set look n feel */
-    var looknfeel = note.config.looknfeel
+    var looknfeel = note.config.looknfeel;
     $scope.viewOnly = looknfeel == 'report';
     $rootScope.$emit('setLookAndFeel', looknfeel);
+
+    var style = note.config.codeHighlightStyle;
+    $rootScope.$emit('changeCodeHighlightStyle', style);
   });
 
   var initialize = function() {
     if (!$scope.note.config.looknfeel) {
       $scope.note.config.looknfeel = 'default';
     }
 
+    if (!$scope.note.config.codeHighlightStyle) {
+      $scope.note.config.codeHighlightStyle = 'GitHub';
+    }
+
+    $('link[title]').each(function(i, link) {
+      link.disabled = (link.title !== $scope.note.config.codeHighlightStyle);
+    });
+
     // open interpreter binding setting when there're none selected
     getInterpreterBindings(function(){
       var selected = false;
@@ -397,6 +428,7 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
 
   $scope.openSetting = function() {
     $scope.showSetting = true;
+    $scope.note.config.codeHighlightStyleOrig = $scope.note.config.codeHighlightStyle;
     getInterpreterBindings();
   };
 
@@ -407,6 +439,7 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
         return;
       }
     }
+    $scope.changeCodeHighlightStyle($scope.note.config.codeHighlightStyleOrig);
     $scope.showSetting = false;
   };
 
@@ -439,7 +472,8 @@ angular.module('zeppelinWebApp').controller('NotebookCtrl', function($scope, $ro
   };
 
   var isSettingDirty = function() {
-    if (angular.equals($scope.interpreterBindings, $scope.interpreterBindingsOrig)) {
+    if (angular.equals($scope.interpreterBindings, $scope.interpreterBindingsOrig) &&
+        $scope.note.config.codeHighlightStyle === $scope.note.config.codeHighlightStyleOrig) {
       return false;
     } else {
       return true;

zeppelin-web/app/scripts/controllers/paragraph.js

@@ -210,6 +210,15 @@ angular.module('zeppelinWebApp')
       } else if (newType === 'HTML') {
         $scope.renderHtml();
       }
+
+      var code = $scope.dirtyText;
+      if ( code && code.startsWith('%sql')) {
+        $scope.editor.getSession().setMode(editorMode.sql);
+      } else if ( code.startsWith('%md')) {
+        $scope.editor.getSession().setMode(editorMode.markdown);
+      } else {
+        $scope.editor.getSession().setMode(editorMode.scala);
+      }
     }
   });
 
@@ -530,6 +539,7 @@ angular.module('zeppelinWebApp')
     $('#' + id).height(height.toString() + 'px');
   };
 
+
   $scope.getEditorValue = function() {
     return $scope.editor.getValue();
   };

zeppelin-web/bower.json

@@ -21,7 +21,8 @@
     "perfect-scrollbar": "~0.5.4",
     "ng-sortable": "~1.1.9",
     "angular-elastic": "~2.4.2",
-    "angular-elastic-input": "~2.0.1"
+    "angular-elastic-input": "~2.0.1",
+    "highlightjs": "~8.4.0"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8",