[ZEPPELIN-777] Math formula support

### What is this PR for? This PR adds support for formatting math formula formatting in %html display system using MathJax library. ### What type of PR is it? Feature ### Todos * [x] - Format math formula with MathJax library ### What is the Jira issue? https://issues.apache.org/jira/browse/ZEPPELIN-777 ### How should this be tested? try run following codes. ``` %md When \$a \\ne 0\$, there are two solutions to \$ax^2 + bx + c = 0\$ and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ ``` Note MathJax works better with `markdown.parser.type` property set `pegdown`, in markdown interpreter. With default markdown4j parser, some formula is not well displayed. (for example, ax^2) I think this will not be a big problem because of we'll remove markdown4j apache#1594 ``` %sh echo -e "%html \$\$a = b\$\$" ``` ``` %spark println("%html $$b = c$$") ``` ### Screenshots (if appropriate) ![image](https://cloud.githubusercontent.com/assets/1540981/20040864/3b69c540-a414-11e6-8f8a-fdf7ee1370a6.png) ### Questions: * Does the licenses files need update? yes * Is there breaking changes for older versions? no * Does this needs documentation? yes Author: Lee moon soo <moon@apache.org> Closes apache#1606 from Leemoonsoo/ZEPPELIN-777 and squashes the following commits: af8e079 [Lee moon soo] Package MathJax resources 2afedde [Lee moon soo] Fix typo dd02bec [Lee moon soo] Add doc for mathmetical expression 174d7ad [Lee moon soo] Add license bb762c3 [Lee moon soo] Format formula using MathJax
agoodm · Nov 9, 2016 · 085cbaf · 085cbaf
1 parent 3a5d649
commit 085cbaf
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 4 deletions.
diff --git a/docs/assets/themes/zeppelin/img/screenshots/display_formula.png b/docs/assets/themes/zeppelin/img/screenshots/display_formula.png
diff --git a/docs/displaysystem/basicdisplaysystem.md b/docs/displaysystem/basicdisplaysystem.md
@@ -39,6 +39,13 @@ With `%html` directive, Zeppelin treats your output as HTML
 
 <img src="/assets/themes/zeppelin/img/screenshots/display_html.png" />
 
+### Mathematical expressions
+HTML display system automatically formats mathematical expression using [MathJax](https://www.mathjax.org/). You can use
+`\\( INLINE EXPRESSION \\)` and `$$ EXPRESSION $$` to format. For example
+
+<img src="/assets/themes/zeppelin/img/screenshots/display_formula.png" />
+
+
 ## Table
 
 If you have data that row separated by '\n' (newline) and column separated by '\t' (tab) with first row as header row, for example

diff --git a/docs/interpreter/markdown.md b/docs/interpreter/markdown.md
@@ -53,6 +53,12 @@ The following example demonstrates the basic usage of Markdown in a Zeppelin not
 
 <img src="../assets/themes/zeppelin/img/docs-img/markdown-example.png" width="70%" />
 
+## Mathematical expression
+
+Markdown interpreter leverages %html display system internally. That means you can mix mathematical expressions with markdown syntax. For more information, please see [Mathematical Expression](../displaysystem/basicdisplaysystem.html#mathematical-expressions) section.
+
+
+
 ### Markdown4j Parser
 
 `markdown4j` parser provides [YUML](http://yuml.me/) and [Websequence](https://www.websequencediagrams.com/) extensions 

diff --git a/zeppelin-distribution/src/bin_license/LICENSE b/zeppelin-distribution/src/bin_license/LICENSE
@@ -164,6 +164,7 @@ The following components are provided under Apache License.
     (Apache 2.0) tez-mapreduce (org.apache.tez:tez-mapreduce:0.7.0 - http://tez.apache.org)
     (Apache 2.0) tez-yarn-timeline-history-with-acls (org.apache.tez:tez-yarn-timeline-history-with-acls:0.7.0 - http://tez.apache.org)
     (Apache 2.0) jna (net.java.dev.jna:jna:4.1.0 https://github.com/java-native-access/jna)
+    (Apache 2.0) MathJax v2.7.0 - https://github.com/mathjax/MathJax/blob/2.7.0/LICENSE
 
 ========================================================================
 MIT licenses

diff --git a/zeppelin-web/.eslintrc b/zeppelin-web/.eslintrc
@@ -14,6 +14,7 @@
     "nv": false,
     "ace": false,
     "d3": false,
+    "MathJax": false,
     "BootstrapDialog": false,
     "Handsontable": false,
     "moment": false,

diff --git a/zeppelin-web/Gruntfile.js b/zeppelin-web/Gruntfile.js
@@ -466,6 +466,12 @@ 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/MathJax',
+          src: [
+            'extensions/**', 'jax/**', 'fonts/**'],
+          dest: '<%= yeoman.dist %>'
         }]
       },
       styles: {

diff --git a/zeppelin-web/bower.json b/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"

diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/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);
           }

diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html
@@ -100,6 +100,20 @@
     <![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 @@
     <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 -->

diff --git a/zeppelin-web/test/karma.conf.js b/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',