zeppelin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From m...@apache.org
Subject [07/50] incubator-zeppelin git commit: Add style guide
Date Fri, 20 Mar 2015 18:01:29 GMT
Add style guide


Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/84c9e76e
Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/84c9e76e
Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/84c9e76e

Branch: refs/heads/master
Commit: 84c9e76eb805e360fc3d2d40e36229f0fbbc6f79
Parents: 8901730
Author: Felix Cheung <felixcheung@users.noreply.github.com>
Authored: Tue Mar 10 23:53:32 2015 -0700
Committer: Felix Cheung <felixcheung@users.noreply.github.com>
Committed: Tue Mar 10 23:53:32 2015 -0700

----------------------------------------------------------------------
 STYLE.md | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/84c9e76e/STYLE.md
----------------------------------------------------------------------
diff --git a/STYLE.md b/STYLE.md
new file mode 100644
index 0000000..d76a539
--- /dev/null
+++ b/STYLE.md
@@ -0,0 +1,60 @@
+# 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 markdown4j to emit HTML, and such content may contain
&lt;pre&gt;&lt;code&gt; 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](http://ace.c9.io/#nav=howto)  
+[List of themes on GitHub](https://github.com/ajaxorg/ace/tree/master/lib/ace/theme)
+
+#### Style for Markdown Code Blocks
+Highlight.js parses and converts &lt;pre&gt;&lt;code&gt; blocks from markdown4j
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](https://github.com/components/highlightjs/tree/master/styles) into app/index.html.
See the next section on build.
+
+#### 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.  


Mime
View raw message