jupyter-notebook:将CSS类添加到输出单元格 [英] jupyter-notebook: add css class to output cell

问题描述

是否可以使用Cell Magic将类添加到输出单元?例如:

Is it possible to add a class to the output cell using cell magic? For example:

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

，然后单元格Out [1]将具有突出显示"类，以便我可以使用CSS更改格式.

and then the the cell Out [1] will have the class "highlight" so that I can change the format using css.

推荐答案

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

After some search, I found this approach:

首先我们导入:

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")')

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

The this.element in javascript points to the <div class="output"> for the current cell; and this points to the OutputArea instance (see 'static/notebook/js/outputarea.js')

然后我们可以操纵此输出<div>

Then we can manipulate this output <div>

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

使用CSS

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

这篇关于jupyter-notebook:将CSS类添加到输出单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！