数据分析数据可视化大数据后端前端任务调度【免费下载链接】zeppelinWeb-based notebook that enables>项目地址https://gitcode.com/gh_mirrors/zeppe/zeppelin点击查看免费下载本文基于 Apache Zeppelin 仓库根目录下的 STYLE.md 编写讲解如何对 Zeppelin Web 界面zeppelin-web 模块进行样式定制。你将掌握三件事通过looknfeel目录更换整套主题外观、通过 Ace Editor 的setTheme更换段落代码编辑器配色、以及通过 Highlight.js 的 stylesheet 定制 Markdown 渲染代码块的语法高亮并了解修改bower.json、Gruntfile.js、app/index.html等构建文件的完整操作步骤。一、整体外观Look and FeelZeppelin 的界面主题入口位于zeppelin-web/src/app/styles/looknfeel目录。该目录下的每个 CSS 文件对应一种整体主题例如default.css默认主题页面背景#ecf0f1浅灰段落聚焦时带0px 2px 7px rgba(0, 0, 0, 0.3)阴影simple.css简洁主题背景为纯白white框体使用 1px 白色边框report.css、home.css分别面向报表与首页场景的主题。运行时主题的切换逻辑在 zeppelin-web/src/app/app.controller.js 中实现MainCtrl初始将$scope.looknfeel置为default并监听setLookAndFeel事件动态更新取值。而 zeppelin-web/src/index.html 通过 Angular 的ng-href动态加载对应样式link relstylesheet ng-hrefassets/styles/looknfeel/{{looknfeel}}.css /也就是说只要在looknfeel目录下新增一个mytheme.css并在运行期通过setLookAndFeel事件把值切换为mytheme整个 Notebook 页面的观感就会整体改变。这也是 Zeppelin 进行品牌化、内网个性化部署时的首选定制点。二、代码语法高亮的两个层面Zeppelin 的代码高亮由两条独立的链路组成理解它们的区别是定制的前提Ace Editor 主题用于 Notebook 中每个段落paragraph的代码编辑区。编辑器实例化后调用setTheme(ace/theme/xxx)即可切换配色Highlight.js 样式用于 Markdown 解释器渲染出的precode代码块。Markdown 段落经 flexmark 解析后输出 HTMLflexmark 依赖定义于 markdown/pom.xml结果由前端通过hljs.highlightBlock处理相关逻辑见 zeppelin-web/src/app/notebook/paragraph/result/result.controller.js。2.1 更换 Ace Editor 主题Ace Editor 的实例初始化位于 zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js。在aceLoaded回调中编辑器会依次完成行号显示、自动换行、折叠等设置其中关键的一行是$scope.editor.setTheme(ace/theme/chrome);当前仓库默认使用chrome主题。若想切换到其他主题直接修改这里的主题路径即可。Ace 官方维护了数十个内置主题monokai、github、tomorrow、solarized_dark等主题命名遵循ace/theme/name规范。示例切换为 monokai 主题将主题调用改为- $scope.editor.setTheme(ace/theme/chrome); $scope.editor.setTheme(ace/theme/monokai);同时由于主题脚本需要随构建打包还必须在bower.json的 override 段中把对应主题脚本加入 ace-builds 的文件列表详见下文构建部分。编辑器模式语言高亮语法的补充说明除了主题段落编辑器还会根据段落首行的魔术前缀magic形如%sql、%python动态选择 Ace 的语言模式。这一逻辑在 zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js 的setParagraphMode中实现通过getParagraphMagic解析^\s*(%.?)(\s)再由setEditorLanguage拼出ace/mode/language并调用session.setMode(mode)。因此当你更换主题时务必同时确认对应的mode-language.js已被打包否则语言着色可能失效。2.2 定制 Markdown 代码块样式Markdown 段落渲染出的precode代码块由 Highlight.js 解析着色它会将关键字与语言语法转换为带样式的 HTML若代码块未显式指定语言Highlight.js 还会自动推断最合适的语言。视觉样式则完全由引入的 Highlight.js stylesheet 决定。仓库默认在 zeppelin-web/src/index.html 引入link relstylesheet hrefnode_modules/highlight.js/styles/github.css /Highlight.js 官方仓库提供了github.css、monokai-sublime.css、atom-one-dark.css、solarized-light.css等大量现成样式只需将index.html中的引用替换为所需样式表即可整体换肤。注意背景色覆盖即使更换了 Highlight.js 样式代码块的背景色仍会被 zeppelin-web/src/app/notebook/paragraph/paragraph.css 中的规则覆盖.paragraph .tableDisplay .hljs { background: none; }所以在使用深色高亮主题如monokai、atom-one-dark时必须同步调整此处或所在容器的背景避免出现“深色文字 浅色背景”的对比度问题。三、构建层面的变更bower.json 与 Gruntfile.js样式与主题的生效依赖前端构建管线把对应资源打包进app/index.html。3.1 bower.json 的 override 配置在bower.json底部的 override 段中为highlightjs包加入所需的 Highlight.js 样式文件如styles/github.css为ace-builds包加入选定的 Ace Editor 主题脚本如src-noconflict/theme-github.js。bower 会自动把追加的.js与.css注入app/index.html。以下 diff 展示了在既有文件列表中追加条目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 }需要注意本仓库当前使用的依赖管理方式已向 npm 演进zeppelin-web/package.json、node_modules下的 highlight.js 已直接出现在 zeppelin-web/src/index.html 中因此实际构建时请以仓库现有 zeppelin-web/package.json 与 zeppelin-web/Gruntfile.js 为准bower 相关说明适用于采用该依赖管理的版本分支。3.2 Gruntfile.js 的静态资源拷贝部分 Highlight.js 主题少数深色主题会附带.jpg背景图这类图片必须通过 Grunt 拷贝到构建产物目录。仓库的 zeppelin-web/Gruntfile.js 中copy任务负责把assets/styles/**/*与字体、图片等静态资源复制到.tmp/styles/与dist目录若你引入的主题携带图片需要在copy配置中补充对应的拷贝规则并确保在styles任务的执行链newer:copy:styles→postcss中按序执行。完整示例Ace Editor 主题切换到 monokai结合前文一次完整的主题切换包含三处修改paragraph.controller.jssetTheme(ace/theme/monokai)bower.json将src-noconflict/theme-github.js替换为src-noconflict/theme-monokai.jsnotebook.cssmonokai等深色主题需要同步修改段落编辑器的背景色。文档中特别提醒对于monokai这类深色背景主题需要更新app/styles/notebook.css中的.paragraphAsIframe .editor与.paragraph .editor的背景颜色否则代码文字如浅色文字与白色编辑器背景会产生严重对比度问题。仓库中同类编辑区样式可见 zeppelin-web/src/app/notebook/paragraph/paragraph.css该文件同样定义了#main .ace-chrome .ace_active-line等活动行、光标的高亮颜色。四、定制注意事项与常见问题主题与模式必须配套打包Ace 主题脚本theme-*.js与语言模式脚本mode-*.js都要在构建时包含进产物缺少任何一个都会导致对应的渲染失效。深色主题要整体协调Ace 主题、Highlight.js 样式、.paragraph .tableDisplay .hljs背景覆盖、.editor背景色四处必须联动调整才能获得一致的深色观感。运行时主题切换looknfeel样式通过ng-href按需加载新增主题只需在zeppelin-web/src/assets/styles/looknfeel/下添加 CSS 文件即可无需改动主构建逻辑见 zeppelin-web/src/app/app.controller.js。确认依赖管理方式当前仓库的 zeppelin-web 已大量使用node_modules直接引用依赖进行任何bower.json/Gruntfile.js变更前先核对 zeppelin-web/package.json 与 zeppelin-web/Gruntfile.js避免在错误的依赖体系上修改。完成上述修改后重新构建 zeppelin-web 前端并部署即可看到全新的编辑器配色与代码高亮效果。建议先在一套主题例如github或monokai上完整走通「改控制器 → 改依赖清单 → 改 CSS 覆盖 → 重新构建」的流程再根据团队审美进行批量定制。赞分享数据分析数据可视化大数据后端前端任务调度【免费下载链接】zeppelinWeb-based notebook that enables>项目地址https://gitcode.com/gh_mirrors/zeppe/zeppelin点击查看免费下载相关推荐Ajenti 前端 ACE 代码编辑器集成ajenti.ace 模块与 ace-editor 指令实战指南Ajenti 前端 ACE 代码编辑器集成ajenti.ace 模块与 ace editor 指令实战指南 导读 ajenti.ace 是 Ajenti 管理后端运维curl 邮件协议实战指南一封命令搞定 SMTP 发信、POP3/IMAP 收信与邮箱管理curl 邮件协议实战指南一封命令搞定 SMTP 发信、POP3/IMAP 收信与邮箱管理 curl 把 SMTP、POP3、IMAP 三大邮件协议做成了完整CLI网络通信Flutter UI Challenges代码高亮与主题定制完全指南Flutter UI Challenges代码高亮与主题定制完全指南 想要打造专业级的Flutter应用吗Flutter UI Challenges项目提供了移动开发前端上一篇Navicat Mac版14天试用期重置完整教程三种方法实现永久免费使用下一篇Navicat试用期重置三步实现Mac版数据库工具无限使用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考