Jupyter Notebook CSS styling

Tooling
1

I am trying to clean up a Jupyter notebook so it can be distributed and I figured out that you can insert CSS into a code cell using e.g.

HTML("""
<style>
body {
  counter-reset: section;                       /* Set a counter named 'section', and its initial value is 0. */
}

h3::before {
  counter-increment: section;                   /* Increment the value of section counter by 1 */
  content: "Section " counter(section) ": ";    /* Display the word 'Section ', the value of 
                                                   section counter, and a colon before the content
                                                   of each h3 */
}
</style>
    """)

However, it would be good if the code and output for this cell alone were suppressed from display. I don’t want to mess with a custom.css file and would prefer the solution to not depend on any ipython notebook extensions; this will make the notebook self-contained. Is there a way to do this?

2

Well the second problem is that the counters do not seem to propagate across cells.

3

Could you do something like this with a Julia variable as the section counter and then interpolate it into Markdown to display a nice section heading?