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

Question

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

\n

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

\n

或者

\n

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

\n

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

\n

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

\n

\n

现在看起来是这样的——

\n

\n

如您所见，font-size:12px不再有任何效果。font-family和喜欢也是如此。

\n

编辑： 笔记本

\n

Answer 1

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

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

我离题了。

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

自定义CSS

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

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

步骤2） 在styles文件夹中，创建一个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>