Similar to "Why aren't runnable code snippets formatted correctly within lists?" (which appears to be resolved), when a snippet is in an item in a nested markdown list, it breaks the nesting. For example, consider:
- item 1
item 1.3 (but becomes 3.)
Note what should be item 1.3 of the nested list is actually item 3 in an outer list, contrary to my expectations.
Once this question was posted, the nesting looks to be correct.
The snippet is correctly part of item 1.2. In the markdown, the snippet is indented with 9 spaces; it can have anywhere from 6-9 leading spaces and still be part of item 1.2. Indenting more causes it to be interpreted as a code sample (with content
n is an integer). Indenting less causes it to be a part of item 1 in the outer list.
No matter the indentation, item 1.3, which should be in the sub-list, instead becomes a new item of a new list, with numbering starting at 3. This appears to be due to the
.edit-snippet control, which is placed outside of the lists, forcing both the outer and inner lists to be closed. This can been seen in the HTML source that the markdown currently renders to in the preview:
<ol> <li>item 1 <ol> <li> <p>item 1.1</p> <pre><code>code; </code></pre> </li> <li> <p>item 1.2</p> <p><div class="snippet"><div class="snippet-code" style="display: block;"> <pre class="lang-html snippet-code-html s-code-block"> <code class="hljs language-xml"><span class="hljs-tag"><<span class="hljs-name">hr</span>/></span></code> </pre> <div class="snippet-result"> <div class="snippet-ctas"> <button type="button" class="s-btn s-btn__primary"><span class="icon-play-white _hover"></span><span> Run code snippet</span></button> <input class="copySnippet s-btn s-btn__filled" type="button" value="Copy snippet to answer" style="display: none;"> <button type="button" class="s-btn hideResults" style="display: none;">Hide results</button> <div class="popout-code"><a class="snippet-expand-link">Expand snippet</a></div> </div> <div class="snippet-result-code" style="display: none;"><iframe name="sif2248" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe></div> </div> </div></div></p> </li> </ol> </li> </ol> <!-- This appears to be what breaks the nesting: --> <p><sup><a href="#" class="edit-snippet" data-id="0">edit the above snippet</a></sup></p> <ol start="3"> <li>item 1.3 (but becomes 3.)</li> </ol>