This patch makes the following fixes:
- Make summary text appear on the same line as the ">" arrow marker;
prior to this patch, it was being pushed down to the next line because
there were nested block elements inside the <summary> element
- Style details element to visually delineate collapsible content with
dashed lines above and below the content
- Add syntax highlighting for code blocks in details disclosure elements
(some were missing syntax highlighting)
- Hide a cell that was meant to be hidden in the audio tutorial
The summary element looked ugly due to a block element being present
inside the <summary>. This was present in the rendered docs even though
it was not explicitly in the source. Even though our source (in a
Markdown cell in a Jupyter notebook) looked like:
<summary>Example text</summary>
The rendered docs had:
<summary><p>Example text</p></summary>
The easy fix was to leave this as-is and fix the styling with CSS,
making all elements inside the summary to be displayed as inline
elements.
Where was the extra <p> tag coming from? Different Markdown parsers
handle mixed Markdown/HTML differently. We are using nbsphinx, which
does something especially weird [1]: converting from Markdown ->
reStructuredText -> HTML.
For example, consider the following Markdown:
<details><summary>Summary</summary>
Body.
</details>
nbsphinx was first converting it to this reST:
.. raw:: html
<details>
.. raw:: html
<summary>
Summary
.. raw:: html
</summary>
Body.
.. raw:: html
</details>
And then this reST was being converted to HTML. This is where the extra
<p> was coming from.
One workaround for this behavior is to switch to raw HTML cells in the
notebook, rather than Markdown cells, and write pure HTML there. This
has the disadvantage that it's inconvenient when the content inside the
<details> has extra markup: Markdown is very convenient for that (e.g.,
for styling text), and having the contents being parsed as Markdown also
allows us to easily use syntax highlighting inside the body.
Another workaround is to use raw reST cells [2] and write the proper
reST directly (avoiding the bad Markdown -> reST conversion). This
preserves the ability to use convenient formatting (though with reST
instead of Markdown) as well as syntax-highlighted code blocks. For
example:
.. raw:: html
<details><summary>Summary</summary>
.. code-block:: python
def meaning_of_life():
return 42
.. raw:: html
</details>
The above snippet produces the expected HTML, with syntax-highlighted
code in the body, and without the extra <p> inside the <summary>.
Rather than either of these workarounds, the most convenient one for
developers is to fix the issue using CSS, so that the Markdown cells in
the tutorials can be left as-is and no special care is required when
writing details disclosure elements, which is what this patch does.
[1]: https://github.com/spatialaudio/nbsphinx/blob/fc79fd1ac5ab6df225b256ef4ca203c58c5ad92b/src/nbsphinx.py#L1309
[2]: https://nbsphinx.readthedocs.io/en/0.8.9/raw-cells.html#reST
Elías Snorrason