7 Styling Extensions

Various extensions are available that can influence the way materials are presented in the user environment. For example, extensions that support the rendering of different coloured background cells.

This extensions can be used to enhance the presented materials and may degrade gracefully. For example, if the styling is not applied, the content may still “work” exactly as written, but the user may experience fewer navigational cues that the styling might have made explicit.

Note that in some cases, authors may choose to use redundancy in coding of particular texts, so that degradation in the absence of an installed extension is made even more graceful. For example, using explicit emphasis to markup text that might also be highlighted by virtue of being in a cell tagged for highlighting by an installed extension.

7.1 Code folding

The code folding extensions, which forms part of the official unofficial jupyter-contrib-nbextensions distribution, allows you to collapse code within a code block.

For example, code can be folded at the function level:

Or at the “first live” level:

7.2 Collapsible Headings

The collapsible headings extension, which forms part of the official unofficial jupyter-contrib-nbextensions distribution, allows you to collapse the cells below a markdown cell starting with a particular level header up to the cell with the same heading level (or lower (i.e. bigger heading)) than the collapsed cell.

This interaction can be used to provide revealable content, as well as disguise optional content.

7.3 empinken

The nb_extension_empinken extension provides several buttons for applying colour style to a single cell:

The buttons actually add tags to the cell to invoke the styling:

A configuration panel allows the user to control which (if any) buttons are displayed, as well as the colour applied in each case.

7.4 Dismissible boxes

Not an extension, this is a native but underappreciated trick, using an alert-dismissible class tag to add a dismissable interaction to a div element inside a markdown block:

<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert">x</button>
Report here...
</div>

7.5 Hide Input / Hide All Input

The Hide Input and Hide All Input extensions, which form part of the official unofficial jupyter-contrib-nbextensions distribution, allow you to toggle the display of a selected cell or all cells.

In a Jupyter Book publishing workflow, content display can be controlled using hidden (revealable) or removed content identified by cell tags (docs).

7.6 tagstyler

The nb_extension_tagstyler provides a simple way to apply Bootstrap alert style styling to cells based on a cell tag: