html 内联样式不再适用于 Jupyter 笔记本单元格

Question

当传递 style 参数和 <span> 起始块时，我更改了 font-size 和 font-family 以及所有这些在我的 Jupyter 笔记本的各个单元格中。就这样-

<span style="font-family:Verdana">Irrelavant text.</span>

或

# Model Building                        <span style="font-size:12px">[Jump to Beginning](#top)</span>

直到大约一周前它工作得很好，当时我笔记本中的所有style 效果都消失了。代码显然仍然存在于降价单元格中，但它只是没有显示预期的结果。在 Kaggle 或 JupyterLab 上运行时，相同的笔记本仍然可以工作并加载样式。 Jupyter notebooks 是停止支持它还是我无意中改变了一些东西？在不更改代码的情况下，有什么办法可以解决问题，甚至可以解决问题？

以前是这样的（避免黑色主题，截图来自JupyterLab）-

现在看起来像这样-

如您所见，font-size:12px 不再有效。 font-family 等也一样。

编辑： Notebook

Answer 1

Markdown 单元格中的内联样式在上个月早些时候解决不同清理问题的安全修复程序中被暂时删除，并在刚刚发布的v6.4.4 中恢复。请更新您的笔记本安装，以使 Markdown 中的旧样式再次正常工作。

JupyterLab 3.2.2、3.2.3 和 3.2.4 也受到类似问题的影响。它已在 PR #11510 中修复，并于 2021 年 12 月 10 日在 JupyterLab v3.2.5 中发布。

Answer 2

我认为这不是您想要的答案，但它确实有效。它也是可扩展的。我通常在 RStudio 中将 Python 与 Atom、XCode 或 RMarkdown 一起使用，因此我对 Jupyter 界面的来龙去脉不是很熟悉。

首先，我注意到当我进入打印预览时，我可以看到按预期呈现的文本。但是，我认为这没什么用。你会怎样做？每次写东西都要去打印预览？那时交互式笔记本的目的是什么？

我离题了。

好的，所以我发现这行得通……这绝不是我最初的想法……

自定义 CSS

添加自定义 CSS 文件，但不是 Jupyter 帮助文件建议的“全部更改”...

第 1 步） 在与 ipynb 文件相同的目录中创建一个样式文件夹。

第 2 步） 在样式文件夹中，创建一个 CSS 文件。

第 3 步） 在该 CSS 文件中，编写两种标签样式以及您想要的任何其他样式。

这是代码（代码图片很烦人）。

div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}

在 ipynb 文件中

第 4 步） 接下来，将 div 标签添加到 Markdown 单元格中的 ipynb 文件中：

<div class='verdana'>This should be Verdana font.</div>

运行单元格后的结果：

第 5 步） 用更大的字体做同样的事情。 您强调了对font-size:20px 的渴望；我无意中做了font-size:20pt。只需将pt 更改为px。

将div 标签添加到您的 ipynb 文件的 Markdown 单元格中：

<div class="bigger">Font size 20px</div>

运行单元格后的结果：

第 6 步） 在笔记本的某处，您需要调用指向 CSS 文件的链接。我只是将它添加到最后：

from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()

它可以在最后执行，因为整个内核最初执行（所以它不需要在 你调用标签之前。

仅供参考 我确实尝试使用magic，但它对字体系列不起作用：

%%html
<style>
// add your CSS styling here
div.verdana {    
    font-family:verdana;
}

div.bigger {
    font-size: 20pt;
}
</style>