jupyter-notebook:将 css 类添加到输出单元格

Question

是否可以使用单元格魔法向输出单元格添加一个类？例如:

In [1]: %%css-class highlight
        display(pd.DataFrame(np.random.rand(3,4)))

然后单元格 Out [1] 将具有“highlight”类，以便我可以使用 css 更改格式。

Answer 1

经过一番搜索，我发现了这种方法:

首先我们导入:

from IPython.display import Javascript

然后在某个单元格中:

x = pd.DataFrame(np.random.randn(3, 8), list('ABC'), list('abcdefgh'))
display(x)
display(x)
Javascript('this.element.attr("id", "myoutput")')

this.element在 javascript指向<div class="output">对于当前单元格；和 this指向OutputArea实例(参见'static/notebook/js/outputarea.js')

然后我们可以操作这个输出 <div>

%%javascript
$('#myoutput').toggleClass('horizontal')

使用css

%%HTML
<style>
.horizontal {flex-direction: row}
</style>