diff --git a/docs/assets/themes/zeppelin/img/screenshots/display_formula.png b/docs/assets/themes/zeppelin/img/screenshots/display_formula.png
new file mode 100644
index 00000000000..ed494f0b33d
Binary files /dev/null and b/docs/assets/themes/zeppelin/img/screenshots/display_formula.png differ
diff --git a/docs/displaysystem/basicdisplaysystem.md b/docs/displaysystem/basicdisplaysystem.md
index 2ccb1074ba1..78f9b30b2f9 100644
--- 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
index e5d33d321ad..257e146d212 100644
--- 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
index 2100610fbf4..82e2c6cd7b8 100644
--- 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
index a598b2477f8..aa7eaad06b1 100644
--- 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
index 34f73040cc7..c7ed44661c4 100644
--- 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
index 6a101b8e1f2..206680be45d 100644
--- 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
index 09da9443191..d97f31772ec 100644
--- 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
index 0f2fb0305db..320886039cb 100644
--- 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
index cc5a63ad2bf..5067e5bb593 100644
--- 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',