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

Question

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

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

或者

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

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

它曾经看起来像这样（避免黑色主题，截图来自 JupyterLab）-

而现在看起来是这样的——

如您所见， font-size:12px不再起作用。 font-family等也是如此。

编辑： 笔记本

Answer 1

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

Jupyter Lab 3.2.2、3.2.3 和 3.2.4 也受到类似问题的影响。 它已经在PR #11510中得到修复，它将包含在下一个补丁版本中。 现在的解决方法是坚持使用 JupyterLab 3.2.1。

Answer 2

我认为这不是您想要的答案，但它有效。 它也是可扩展的。 我通常在 RStudio 中使用 Python 和 Atom、XCode 或 RMarkdown，所以我不太熟悉 Jupyter 界面的来龙去脉。

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

我离题了。

好的，所以我发现它有效......这绝不是一个最初是我的想法......

自定义 CSS

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

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

步骤 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标签添加到 Markdown 单元格中的 ipynb 文件：

<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>