Format formula using MathJax

zeppelin-web/.eslintrc

@@ -14,6 +14,7 @@
     "nv": false,
     "ace": false,
     "d3": false,
+    "MathJax": false,
     "BootstrapDialog": false,
     "Handsontable": false,
     "moment": false,

zeppelin-web/bower.json

@@ -33,7 +33,8 @@
     "handsontable": "~0.24.2",
     "moment-duration-format": "^1.3.0",
     "select2": "^4.0.3",
-    "github-markdown-css": "^2.4.0"
+    "github-markdown-css": "^2.4.0",
+    "MathJax": "2.7.0"
   },
   "devDependencies": {
     "angular-mocks": "1.5.0"

zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js

@@ -221,13 +221,16 @@
 
     $scope.renderHtml = function() {
       var retryRenderer = function() {
-        if (angular.element('#p' + $scope.paragraph.id + '_html').length) {
+        var htmlEl = angular.element('#p' + $scope.paragraph.id + '_html');
+        if (htmlEl.length) {
           try {
-            angular.element('#p' + $scope.paragraph.id + '_html').html($scope.paragraph.result.msg);
+            htmlEl.html($scope.paragraph.result.msg);
 
-            angular.element('#p' + $scope.paragraph.id + '_html').find('pre code').each(function(i, e) {
+            htmlEl.find('pre code').each(function(i, e) {
               hljs.highlightBlock(e);
             });
+            /*eslint new-cap: [2, {"capIsNewExceptions": ["MathJax.Hub.Queue"]}]*/
+            MathJax.Hub.Queue(['Typeset', MathJax.Hub, htmlEl[0]]);
           } catch (err) {
             console.log('HTML rendering error %o', err);
           }

zeppelin-web/src/index.html

@@ -100,6 +100,20 @@ limitations under the License.
     <![endif]-->
     <!-- endbuild -->
 
+    <script type="text/x-mathjax-config">
+      MathJax.Hub.Config({
+        extensions: ["tex2jax.js"],
+        jax: ["input/TeX", "output/HTML-CSS"],
+        tex2jax: {
+          inlineMath: [ ["\\(","\\)"] ],
+          displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
+          processEscapes: true
+        },
+        "HTML-CSS": { availableFonts: ["TeX"] },
+        messageStyle: "none"
+      });
+    </script>
+
     <!-- build:js(.) scripts/vendor.js -->
     <!-- bower:js -->
     <script src="bower_components/jquery/dist/jquery.js"></script>
@@ -147,6 +161,7 @@ limitations under the License.
     <script src="bower_components/handsontable/dist/handsontable.js"></script>
     <script src="bower_components/moment-duration-format/lib/moment-duration-format.js"></script>
     <script src="bower_components/select2/dist/js/select2.js"></script>
+    <script src="bower_components/MathJax/MathJax.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->

zeppelin-web/test/karma.conf.js

@@ -65,6 +65,7 @@ module.exports = function(config) {
       'bower_components/handsontable/dist/handsontable.js',
       'bower_components/moment-duration-format/lib/moment-duration-format.js',
       'bower_components/select2/dist/js/select2.js',
+      'bower_components/MathJax/MathJax.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'src/app/app.js',