Incorrect class names for info boxes containing headings

[jttoivon]

Is it possible to have a heading inside an info box?

If, for example, I have in a cell the following markdown:

# Test (1)

<div class="alert alert-info">
    
## Test (2)

### Test (3)

</div>

nbsphinx renders it as the following html:

<div class="section" id="Test-(1)">
<h1>Test (1)<a class="headerlink" href="#Test-(1)" title="Permalink to this headline">¶</a></h1>
<div class="alert alert-info">
<div class="section" id="Test-(2)">
<h2>Test (2)<a class="headerlink" href="#Test-(2)" title="Permalink to this headline">¶</a></h2>
<div class="section" id="Test-(3)">
<h3>Test (3)<a class="headerlink" href="#Test-(3)" title="Permalink to this headline">¶</a></h3>
</div></div>
</div>
</div>

Normally info boxes have class="admonition note", but here it stays class="alert alert-info". Inside jupyter notebook it looks nice, but not so when exported to html using nbsphinx. I'm using nbsphinx version 0.4.2 and sphinx_rtd_theme.

[mgeier]

Currently, that's not possible, because the closing </div> tag has to be a direct sibling of the opening <div> tag, see:

https://github.com/spatialaudio/nbsphinx/blob/96ea902ef9b18fcfdcb6f4c795dc6137f46be49a/src/nbsphinx.py#L1472-L1476

I don't know how we could achieve what you want, but I guess it would be quite complicated.

Did you try using raw HTML tags like <h2> in your Markdown code? Sphinx wouldn't know about those and it wouldn't work with LaTeX output, but with HTML output it should work ...

[jttoivon]

The following markdown

# Test (1)

<div class="alert alert-info">
    
<h2>Test (2)</h2>

</div>

results the following html:

<div class="section" id="Test-(1)">
<h1>Test (1)<a class="headerlink" href="#Test-(1)" title="Permalink to this headline">¶</a></h1>
<div class="admonition note">
<div class="admonition-title fa fa-exclamation-circle"><h2></h2></div><p>Test (2)</p>
</div>
</div>

So it seems to move the content from h2 to p element. No html anchor is created for the heading.

What I really want is three things:

• text in blue box, which alert-info should give
• the text creates also an html anchor that I can create a link to, which e.g. h2 does in markdown does
• that it works both in Jupyter notebook and in html output of nbsphinx

My best solution so far is:

<div class="alert alert-info"> 

### Exercise 9 (multiple graphs)

<a name="Exercise-9-(multiple-graphs)"></a>

</div>

The explicit anchor is needed to make the link work in Jupyter. Then as a post-process add the "note" class to the div element to make the box blue in the html output of nbsphinx. Of course it is extra work to type the anchor name twice.