jupyter-notebook：将CSS类添加到输出单元格

Question

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

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

然后该单元格Out [1]将具有“突出显示”类，以便我可以使用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>