应用自定义 CSS

要应用自定义 CSS，您可以在 jupyter 的 config 目录中添加一个 /custom/custom.css 文件。您可以通过运行 jupyter --paths 来找到此目录的路径 ~/.jupyter。在那里，您可以创建一个名为 custom 的文件夹，并在该文件夹中创建一个 custom.css 文件。

自定义 CSS 默认不加载。在 jupyter 配置目录中，除非应用程序使用 --custom-css 标志（LabApp.custom_css 配置）进行初始化，否则 ~/.jupyter/custom/custom.css 文件将不会加载。

Jupyter 样式

您可以使用自定义 CSS 文件修改默认的 Jupyter 样式。

/* Modify Jupyter Styles */

.lm-BoxPanel-child,
.jp-FileBrowser-Panel,
.lm-StackedPanel-child,
.jp-FileBrowser-toolbar {
  background-color: #aecad4 !important;
}

#top-panel-wrapper,
#jp-top-bar {
  background-color: #aecad4 !important;
}

#menu-panel-wrapper,
#jp-MainMenu,
#menu-panel {
  background-color: #aecad4 !important;
}

.jp-NotebookPanel-toolbar {
  background-color: #aecad4 !important;
}

.lm-MenuBar-content {
  color: #02484d;
}

.lm-TabBar-content,
.jp-DirListing-content,
.lm-MenuBar-content {
  font-size: small;
}

Markdown

自定义 CSS 的另一个潜在应用是为 Markdown 设置样式。

/* Styling Markdown */

/* Headings */
h1,
h2 {
  font-family: Impact, Charcoal, sans-serif;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000;
}

h1 {
  font-size: 22px;
  margin-bottom: 40px;
  color: #10929e;
  text-decoration: underline;
}

h2 {
  font-size: 48px;
  margin-bottom: 32px;
  color: #76b4be;
  text-transform: uppercase;
}

/* Block Quotes */
blockquote {
  font-family: Georgia, serif;
  font-size: 16px;
  color: #19085c;
  border-left: 8px solid #effffc;
  background-color: #eafcff;
  padding: 20px;
}

/* Lists */
ul,
ol {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 18px;
  color: #333;
  margin-bottom: 24px;
}