### What is this PR for? Remove unmanaged, old library markdown4j dep which exists just for Websequence and YUML plugins. (related to https://github.com/apache/zeppelin/pull/1384) By adding Websequence and YUML plugins to pegdown - Removing markdown4j dependency which is unmanaged library currently. - Addtionally, we can remove `markdown.parser.type` options in **markdown interpreter** - Fixing some bugs in Websequence and YUML plugins - Enable others to add more plugins using pegdown sytnax. ### What type of PR is it? Improvement ### Todos Nothing ### What is the Jira issue? [JIRA - ZEPPELIN-1614](https://issues.apache.org/jira/browse/ZEPPELIN-1614) ### How should this be tested? Some functional tests are included. ### Screenshots (if appropriate) ### Questions: * Does the licenses files need update? - YES * Is there breaking changes for older versions? - NO * Does this needs documentation? - YES Author: 1ambda <1amb4a@gmail.com> Closes #1594 from 1ambda/feat/remove-markdown4j-dep and squashes the following commits:5af1607[1ambda] fix: Failed tests in InterpreterRestApiTestc57fdcb[1ambda] docs: Update markdown.md5c62236[1ambda] docs: Update upgrade.md for '%md'a1e779d[1ambda] style: Use zeppelin checkstyle.xml13e0dc4[1ambda] Update: interpreter setting and docsde3549d[1ambda] chore: Cleanup duplicated markdown4j license7c5d41e[1ambda] fix: Parse style param optionally in webseq8831ca1[1ambda] fix: Wrap exceptions in catch stmt9268695[1ambda] Revert "fix: Cleanup unused Markdown4j Parser"33fb800[1ambda] Revert "docs: Remove markdown.parser.type option"fddc459[1ambda] Revert "chore: Remove markdown4j dep and update license"a59ebbd[1ambda] Revert "fix: Set {} to avoid 503"4e48933[1ambda] Revert "fix: Parse style param optionally in webseq"8cfb2c8[1ambda] Revert "fix: style and misspell in docs"73956e0[1ambda] Revert "fix: Propagate exception in YUML plugin"1b7787f[1ambda] fix: Propagate exception in YUML pluginc656d08[1ambda] fix: style and misspell in docsdc4f110[1ambda] fix: Parse style param optionally in webseqb43e14e[1ambda] fix: Set {} to avoid 503c48cc53[1ambda] chore: Remove markdown4j dep and update license81fdfcc[1ambda] docs: Remove markdown.parser.type optioncf19f0b[1ambda] fix: Cleanup unused Markdown4j Parser98b2809[1ambda] fix: Add missing docs3e9716d[1ambda] feat: Yuml markdown plugin3247c67[1ambda] feat: Support webseq markdown plugin
2.8 KiB
Zeppelin Style Guide
This is a quick guide on customizing style for the Zeppelin web interface (zeppelin-web)
Look and Feel
app/styles/looknfeel
Overall look and theme of the Zeppelin notebook page can be customized here.
Code Syntax Highlighting
There are two parts to code highlighting. First, Zeppelin uses the Ace Editor for its note paragraphs. Color style for this can be changed by setting theme on the editor instance. Second, Zeppelin's Markdown interpreter calls pegdown parser to emit HTML, and such content may contain <pre><code> tags that can be consumed by Highlight.js.
Theme on Ace Editor
app/scripts/controllers/paragraph.js
Call setTheme on the editor with the theme path/name.
Setting Theme on Ace Documentation
List of themes on GitHub
Style for Markdown Code Blocks
Highlight.js parses and converts <pre><code> blocks from pegdown parser into keywords and language syntax with proper styles. It also attempts to infer the best fitting language if it is not provided. The visual style can be changed by simply including the desired stylesheet into app/index.html. See the next section on build.
Note that code block background color is overriden in app/styles/notebook.css (look for .paragraph .tableDisplay .hljs).
Build changes
bower.json
In the override section at the bottom, include the Highlightjs stylesheet (eg. styles/github.css)
For the selected Ace Editor theme script, include it in the override section. (eg. src-noconflict/theme-github.js)
(bower will automatically add the appropriate .js and .css in app/index.html)
"src-noconflict/mode-sql.js",
"src-noconflict/mode-markdown.js",
"src-noconflict/keybinding-emacs.js",
"src-noconflict/ext-language_tools.js",
+ "src-noconflict/theme-github.js"],
"version": "1.1.8",
"name": "ace-builds"
},
"highlightjs": {
"main": ["highlight.pack.js",
+ "styles/github.css"],
"version": "8.4.0",
"name": "highlightjs"
}
Gruntfile.js
Highlight.js style - depends on the style, a few themes have jpg - if so, one must copy them with Grunt.
Example - change Ace Editor theme to monokai
app/scripts/controllers/paragraph.js
- $scope.editor.setTheme('ace/theme/github');
+ $scope.editor.setTheme('ace/theme/monokai');
bower.json
- "src-noconflict/theme-github.js"],
+ "src-noconflict/theme-monokai.js"],
Note that for certain themes, like monokai, with a dark background, you will need to update app/styles/notebook.css, .paragraphAsIframe .editor and .paragraph .editor for the background color.