jupyter-notebook: add css class to output cell

问题

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

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

回答1:

After some search, I found this approach:

First we import:

from IPython.display import Javascript

Then in some cell:

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

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

Then we can manipulate this output <div>

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

using css

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

来源：https://stackoverflow.com/questions/46193874/jupyter-notebook-add-css-class-to-output-cell