Skip to content

[ZEPPELIN-777] Math formula support #1606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Leemoonsoo wants to merge 5 commits into from
Closed

[ZEPPELIN-777] Math formula support #1606

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bb762c3
Format formula using MathJax
Leemoonsoo Nov 6, 2016
174d7ad
Add license
Leemoonsoo Nov 6, 2016
dd02bec
Add doc for mathmetical expression
Leemoonsoo Nov 6, 2016
2afedde
Fix typo
Leemoonsoo Nov 7, 2016
af8e079
Package MathJax resources
Leemoonsoo Nov 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/assets/themes/zeppelin/img/screenshots/display_formula.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions docs/displaysystem/basicdisplaysystem.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
6 changes: 6 additions & 0 deletions docs/interpreter/markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions zeppelin-distribution/src/bin_license/LICENSE
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions zeppelin-web/.eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"nv": false,
"ace": false,
"d3": false,
"MathJax": false,
"BootstrapDialog": false,
"Handsontable": false,
"moment": false,
Expand Down
6 changes: 6 additions & 0 deletions zeppelin-web/Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
3 changes: 2 additions & 1 deletion zeppelin-web/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
9 changes: 6 additions & 3 deletions zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
15 changes: 15 additions & 0 deletions zeppelin-web/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,20 @@
<![endif]-->
<!-- endbuild -->

<script type="text/x-mathjax-config">
Copy link
Contributor

@anthonycorbacho anthonycorbacho Nov 7, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we can move this part in a angular way like directive or something similar?

Copy link
Member Author

@Leemoonsoo Leemoonsoo Nov 7, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is how MathJax is configured. And there's no needs to use this in anywhere else again. So i think it's better leave it as is.

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>
Expand Down Expand Up @@ -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 -->
Expand Down
1 change: 1 addition & 0 deletions zeppelin-web/test/karma.conf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down