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 效果都消失了。代码显然仍然存在于 markdown 单元格中，但它只是没有显示预期的结果。当运行在 Kaggle 或 JupyterLab 上时，同一笔记本仍然有效并加载样式。 Jupyter notebooks 是停止支持它还是我无意中更改了什么？在不更改代码的情况下，有什么解决方法甚至可以解决问题？

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

现在看起来像这样-

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

编辑： Notebook

Answer 1

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

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

跑题了

好的，所以我发现行之有效...这绝不是我最初的想法...

自定义CSS

添加自定义 CSS 文件，但不是 Jupyter 帮助文件建议的 'change it all' 内容...

步骤 1) 在ipynb文件所在的目录下创建一个styles文件夹。

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

步骤 3) 在那个 CSS 文件中，写下两种标签样式和您想要的任何其他样式。

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

div.verdana {    
    font-family:verdana;
}

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

在 ipynb 文件中

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

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

运行单元格后的结果：

步骤 5) 用更大的字体做同样的事情。您强调了对 font-size:20px 的渴望；我不小心做了font-size:20pt。只需将 pt 更改为 px.

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

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

运行单元格后的结果：

步骤 6) 在笔记本的某个地方，你需要调用 link 到 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>

Answer 2

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

JupyterLab 3.2.2、3.2.3 和 3.2.4 也受到类似问题的影响。它已于 2021 年 12 月 10 日在 PR #11510 and the fix was released in JupyterLab v3.2.5 中修复。

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

html inline style not applying in Jupyter notebook cells anymore

html

css

jupyter-notebook

markdown

jupyter

自定义CSS

在 ipynb 文件中