markdown
from zeppelin-jupyter
This is a quick guide on customizing style for the Zeppelin web interface (zeppelin-web)
app/styles/looknfeel
Overall look and theme of the Zeppelin notebook page can be customized here.
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 flexmark parser to emit HTML, and such content may contain <pre><code> tags that can be consumed by Highlight.js.
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
Highlight.js parses and converts <pre><code> blocks from markdown 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).
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.
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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。