使用 CSS 在 Jupyter 实验室控制台中自定义 Pandas 数据框的字体答案

【问题标题】：Customize font for Pandas dataframe in Juypter lab console using CSS使用 CSS 在 Jupyter 实验室控制台中自定义 Pandas 数据框的字体
【发布时间】：2020-05-06 17:48:52
【问题描述】：

我正在尝试将 CSS 规则添加到我的 Jupyter Lab 控制台以自定义 only 熊猫数据框的外观，并且我已在控制台中以交互方式成功完成此操作。我想要的是在 Jupyter Lab Console 启动时将我的 CSS 规则应用到它，这样我就不必以交互方式执行此操作。我已成功地将这些样式自定义添加到 pandas 数据框本身 (df.style.apply())，但我不想将其添加到我以交互方式创建的每个数据框。

Pandas 数据帧被归类为 .dataframe。我创建了一个名为“00-first.py”的 Jupyter Lab 启动文件，并将其放在 .ipython/profile_default/startup/ 目录中。文件内容为：

    from IPython.display import HTML, display
    import pandas as pd
    import numpy as np
    style = '''<style>
            .dataframe td {font-family:"Liberation Mono";} 
            .dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;} 
            </style>'''
    display(HTML(style))
    display(HTML("Environment personalization complete."))

当我启动控制台时，我可以确认 00-first.py 文件已被执行，因为 dir() 显示“样式”变量 pd 和 np。消息字符串没有打印出来，样式也没有出现在网页的 CSS 中。

如果我创建一个数据框，它会以默认的 css 字体显示。为了使样式生效，我手动运行 display(HTML(style))，然后所有数据框现在都具有新的 css 样式。

我正在尝试消除必须在每个控制台会话开始时键入 display(HTML(style)) 并希望启动脚本“00-frist.py”来处理这个问题。

我正在使用 Firefox 75.0 在 Linux Manjaro Linux 5.6.7-1-MANJARO x86_64 GNU/Linux 上使用 Jupyter Lab 1.1.4。

我该怎么做？或者有更好的方法吗？

之前：没有样式

之后：使用样式

【问题讨论】：

标签： css pandas css-selectors jupyter

【解决方案1】：

按照@jayveesea 的建议，我尝试了NotebookApp.extra_static_pathsList 的多个咒语，但无法使此方法起作用。我发现的解决方案非常简单，那就是编辑基本 CSS 文件，在其中添加我的 CSS 选择器。

在命令提示符下使用jupyter lab path 查找您的 Jypyter 应用程序目录。这将类似于 /home/fred/anaconda3。
找到您使用的主题的 index.css 文件。该文件将位于您正在使用的主题目录下的 Jupyter 应用程序目录下。例如，如果您的 Jupyter 应用程序目录是“/home/fred/anaconda3”并且您使用的主题是“theme-light-extension”，那么索引文件将位于 /home/fred/anaconda3/share/jupyter/lab/themes/@jupyterlab/theme-light-extension/index.css
将您的 CSS 选择器添加到文件中。

    /* pandas dataframe customizations */
    .dataframe td {font-family:"Liberation Mono";} 
    .dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}

重新启动您的 Jupyter 控制台，您应该会看到所有按照这些规则格式化的 pandas 数据帧。

此方法的一个缺点是您必须将 CSS 规则添加到您想要支持这些规则的任何扩展中，但这对我有用，因为我不切换扩展。

【讨论】：

很抱歉，看来该方法可能会被放弃。我用另一个选项更新了我的答案，以防您想开始使用主题或不想直接更新这些（可能会被更新覆盖？）

【解决方案2】：

看看 here 使用 jupyter 的配置文件。特别是NotebookApp.extra_static_paths 选项：

NotebookApp.extra_static_pathsList 默认值：[]

用于搜索服务静态文件的额外路径。

这允许添加 javascript/css 以从笔记本中可用服务器机器，或覆盖 IPython 中的单个文件

更新：似乎上面的方法might be broken 可能被放弃了。另一种解决方案是使用以下路径来存储自定义 CSS：.jupyter\custom，不需要对配置文件进行任何更新。

所以在这种情况下.jupyter\custom\custom.css 将包含：

.dataframe td {font-family:"Liberation Mono";} 
.dataframe th, .dataframe tr, .dataframe td {padding-top:0.1em; padding-bottom:0.1em;}

【讨论】：

另见here