是否可以将.css样式从单独的文件添加到Jupyter笔记本上?

时间:2022-11-22 21:09:44

I need to render some html tables in Jupyter Notebook and for this I have defined my own css styles. I want it to be reusable on any PC.

我需要在Jupyter Notebook中呈现一些html表,为此我定义了我自己的css样式。我希望它在任何PC上都是可重用的。

For now I need to run code like this in one of Jupyter cells:

现在我需要在Jupyter的一个单元格中运行这样的代码:

%%html
<style>
.output_wrapper, .output {
    height:auto !important;
    max-height: none;
}
.output_scroll {
    box-shadow:none !important;
    webkit-box-shadow:none !important;
}

.package_header {
    width: 100%;
    background-color: #0e2b59;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
}

.placeholder {
    width: 100%;
    background-color: #ffffff;
    height: 6px;
}

.passed_test_table {
  display: table;         
  width: 100%;         

  background-color: #ebffd3;                
  border-spacing: 5px;
}

# (...) rest of css classes omitted 
</style>

Yet I don't want to store this style inside Jupyter Notebook but in other file like my_default_style.css and load it somehow so it doesn't take too much space in Notebook making it less readable.

但是,我不想将这种样式存储在Jupyter笔记本中,而是存储在my_default_style这样的其他文件中。css并加载它,这样它就不会占用太多的空间在笔记本上,使其可读性更差。

Is it possible to load .css style from some local file instead of running it in Jupyter Notebook cell directly?

是否可以从本地文件中加载.css样式而不是直接在Jupyter笔记本单元中运行?

3 个解决方案

#1


2  

If you are okay with the styling applying to all notebooks you make, then you can store your css in .jupyter/custom/custom.css and this will be automatically loaded and will override any default styles.

如果您对将样式应用到所有笔记本上没有问题,那么您可以将css存储在.jupyter/custom/custom中。css和它将被自动加载,并将覆盖任何默认样式。

An alternative is to do something like this:

另一种选择是这样做:

from IPython.core.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())

(from http://moderndata.plot.ly/custom-styling-for-ipython-notebooks-with-3-lines-of-code/)

(来自http://moderndata.plot.ly/custom-styling-for-ipython-notebooks-with-3-lines-of-code/)

Where you store your css file somewhere (e.g. on Github) and download it and apply it when you run the notebook.

将css文件存储在某个地方(例如Github上),在运行笔记本时下载并应用它。

If you want it to be completely external, use custom.css, but this will apply to every notebook. If you need it to only apply to a single notebook, then you'll have to specify it within the notebook, but there are less verbose ways of doing it (like above).

如果您希望它完全是外部的,请使用custom。css,但这将适用于每个笔记本。如果您需要它只适用于一个笔记本,那么您必须在笔记本中指定它,但是有更详细的方法(如上面所示)。

#2


1  

This answer would probably better be a comment on the earlier answer by Davies and Narasimhan, but I lack the reputation to post a comment.

这个答案最好是对Davies和Narasimhan之前的回答进行评论,但我没有发表评论的名声。

from IPython.core.display import HTML will work, and was the recommended way to access HTML display capability in earlier versions of IPython. But in recent versions, the public display API is in IPython.display (see its docstring). This module exposes __all__ of IPython.core.display, along with __all__ of IPython.lib.display. Notably, the current IPython docs (The IPython API) don't publicly document IPython.core.display separately. For the current IPython.display docs, see: Module: display — IPython documentation.

从IPython.core。显示导入HTML将会工作,并且是在IPython早期版本中访问HTML显示功能的推荐方式。但是在最近的版本中,公共显示API在IPython中。显示(见其有)。该模块公开IPython.core。显示,连同IPython.lib.display。值得注意的是,当前的IPython文档(IPython API)没有公开地记录IPython.core。分别显示。对当前IPython。显示文档,见:模块:显示- IPython文档。

So the recommended solution as of IPython 5 I believe would be:

所以我认为IPython 5的推荐解决方案是:

from IPython.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())

#3


0  

If you are using Jupyter with Python 3 then there is no urllib2 (it was merged into urllib) and the answers above will give you the error ModuleNotFoundError: No module named 'urllib2'. You may want something like this instead:

如果您正在使用Jupyter与Python 3一起使用,那么就没有urllib2(它被合并到urllib中),上面的答案将给出错误ModuleNotFoundError:没有名为“urllib2”的模块。你可能想要这样的东西:

from IPython.display import HTML
from urllib.request import urlopen
html = urlopen("[url to your css file here]")
HTML(html.read().decode('utf-8'))

Note that read() returns a bytes encoding, which you must decode if you want text.

注意read()返回字节编码,如果需要文本,必须对其进行解码。

#1


2  

If you are okay with the styling applying to all notebooks you make, then you can store your css in .jupyter/custom/custom.css and this will be automatically loaded and will override any default styles.

如果您对将样式应用到所有笔记本上没有问题,那么您可以将css存储在.jupyter/custom/custom中。css和它将被自动加载,并将覆盖任何默认样式。

An alternative is to do something like this:

另一种选择是这样做:

from IPython.core.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())

(from http://moderndata.plot.ly/custom-styling-for-ipython-notebooks-with-3-lines-of-code/)

(来自http://moderndata.plot.ly/custom-styling-for-ipython-notebooks-with-3-lines-of-code/)

Where you store your css file somewhere (e.g. on Github) and download it and apply it when you run the notebook.

将css文件存储在某个地方(例如Github上),在运行笔记本时下载并应用它。

If you want it to be completely external, use custom.css, but this will apply to every notebook. If you need it to only apply to a single notebook, then you'll have to specify it within the notebook, but there are less verbose ways of doing it (like above).

如果您希望它完全是外部的,请使用custom。css,但这将适用于每个笔记本。如果您需要它只适用于一个笔记本,那么您必须在笔记本中指定它,但是有更详细的方法(如上面所示)。

#2


1  

This answer would probably better be a comment on the earlier answer by Davies and Narasimhan, but I lack the reputation to post a comment.

这个答案最好是对Davies和Narasimhan之前的回答进行评论,但我没有发表评论的名声。

from IPython.core.display import HTML will work, and was the recommended way to access HTML display capability in earlier versions of IPython. But in recent versions, the public display API is in IPython.display (see its docstring). This module exposes __all__ of IPython.core.display, along with __all__ of IPython.lib.display. Notably, the current IPython docs (The IPython API) don't publicly document IPython.core.display separately. For the current IPython.display docs, see: Module: display — IPython documentation.

从IPython.core。显示导入HTML将会工作,并且是在IPython早期版本中访问HTML显示功能的推荐方式。但是在最近的版本中,公共显示API在IPython中。显示(见其有)。该模块公开IPython.core。显示,连同IPython.lib.display。值得注意的是,当前的IPython文档(IPython API)没有公开地记录IPython.core。分别显示。对当前IPython。显示文档,见:模块:显示- IPython文档。

So the recommended solution as of IPython 5 I believe would be:

所以我认为IPython 5的推荐解决方案是:

from IPython.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())

#3


0  

If you are using Jupyter with Python 3 then there is no urllib2 (it was merged into urllib) and the answers above will give you the error ModuleNotFoundError: No module named 'urllib2'. You may want something like this instead:

如果您正在使用Jupyter与Python 3一起使用,那么就没有urllib2(它被合并到urllib中),上面的答案将给出错误ModuleNotFoundError:没有名为“urllib2”的模块。你可能想要这样的东西:

from IPython.display import HTML
from urllib.request import urlopen
html = urlopen("[url to your css file here]")
HTML(html.read().decode('utf-8'))

Note that read() returns a bytes encoding, which you must decode if you want text.

注意read()返回字节编码,如果需要文本,必须对其进行解码。