zeppelin/STYLE.md
1ambda ab2cdfd384 [ZEPPELIN-1614] Remove markdown4j dep
### 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 InterpreterRestApiTest
c57fdcb [1ambda] docs: Update markdown.md
5c62236 [1ambda] docs: Update upgrade.md for '%md'
a1e779d [1ambda] style: Use zeppelin checkstyle.xml
13e0dc4 [1ambda] Update: interpreter setting and docs
de3549d [1ambda] chore: Cleanup duplicated markdown4j license
7c5d41e [1ambda] fix: Parse style param optionally in webseq
8831ca1 [1ambda] fix: Wrap exceptions in catch stmt
9268695 [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 plugin
c656d08 [1ambda] fix: style and misspell in docs
dc4f110 [1ambda] fix: Parse style param optionally in webseq
b43e14e [1ambda] fix: Set {} to avoid 503
c48cc53 [1ambda] chore: Remove markdown4j dep and update license
81fdfcc [1ambda] docs: Remove markdown.parser.type option
cf19f0b [1ambda] fix: Cleanup unused Markdown4j Parser
98b2809 [1ambda] fix: Add missing docs
3e9716d [1ambda] feat: Yuml markdown plugin
3247c67 [1ambda] feat: Support webseq markdown plugin
2016-11-16 05:31:45 +01:00

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.