企业官网建设流程全解析

本文基于 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 Feel）

Zeppelin 的界面主题入口位于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 rel="stylesheet" ng-href="assets/styles/looknfeel/{{looknfeel}}.css" />

也就是说，只要在looknfeel目录下新增一个mytheme.css，并在运行期通过setLookAndFeel事件把值切换为mytheme，整个 Notebook 页面的观感就会整体改变。这也是 Zeppelin 进行品牌化、内网个性化部署时的首选定制点。

二、代码语法高亮的两个层面

Zeppelin 的代码高亮由两条独立的链路组成，理解它们的区别是定制的前提：

1. Ace Editor 主题：用于 Notebook 中每个段落（paragraph）的代码编辑区。编辑器实例化后调用setTheme('ace/theme/xxx')即可切换配色；
2. Highlight.js 样式：用于 Markdown 解释器渲染出的<pre><code>代码块。Markdown 段落经 flexmark 解析后输出 HTML（flexmark 依赖定义于 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 段落渲染出的<pre><code>代码块由 Highlight.js 解析着色，它会将关键字与语言语法转换为带样式的 HTML；若代码块未显式指定语言，Highlight.js 还会自动推断最合适的语言。视觉样式则完全由引入的 Highlight.js stylesheet 决定。

仓库默认在 zeppelin-web/src/index.html 引入：

<link rel="stylesheet" href="node_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

结合前文，一次完整的主题切换包含三处修改：

1. paragraph.controller.js：setTheme('ace/theme/monokai')；
2. bower.json：将src-noconflict/theme-github.js替换为src-noconflict/theme-monokai.js；
3. notebook.css：monokai等深色主题需要同步修改段落编辑器的背景色。

文档中特别提醒，对于monokai这类深色背景主题，需要更新app/styles/notebook.css中的.paragraphAsIframe .editor与.paragraph .editor的背景颜色，否则代码文字（如浅色文字）与白色编辑器背景会产生严重对比度问题。仓库中同类编辑区样式可见 zeppelin-web/src/app/notebook/paragraph/paragraph.css，该文件同样定义了#main .ace-chrome .ace_active-line等活动行、光标的高亮颜色。

四、定制注意事项与常见问题

1. 主题与模式必须配套打包：Ace 主题脚本（theme-*.js）与语言模式脚本（mode-*.js）都要在构建时包含进产物，缺少任何一个都会导致对应的渲染失效。
2. 深色主题要整体协调：Ace 主题、Highlight.js 样式、.paragraph .tableDisplay .hljs背景覆盖、.editor背景色四处必须联动调整，才能获得一致的深色观感。
3. 运行时主题切换：looknfeel样式通过ng-href按需加载，新增主题只需在zeppelin-web/src/assets/styles/looknfeel/下添加 CSS 文件即可，无需改动主构建逻辑（见 zeppelin-web/src/app/app.controller.js）。
4. 确认依赖管理方式：当前仓库的 zeppelin-web 已大量使用node_modules直接引用依赖，进行任何bower.json/Gruntfile.js变更前，先核对 zeppelin-web/package.json 与 zeppelin-web/Gruntfile.js，避免在错误的依赖体系上修改。

完成上述修改后，重新构建 zeppelin-web 前端并部署，即可看到全新的编辑器配色与代码高亮效果。建议先在一套主题（例如github或monokai）上完整走通「改控制器 → 改依赖清单 → 改 CSS 覆盖 → 重新构建」的流程，再根据团队审美进行批量定制。

• 数据分析
• 数据可视化
• 大数据
• 后端
• 前端
• 任务调度

• 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项目提供了

  移动开发前端