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:

  1. item 1
    1. item 1.1

    2. item 1.2


    3. item 1.3 (but becomes 3.)

In the post preview, currently this looks like: SO snippet breaking nested list

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 <pre>sifn</pre>, where 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:

    <li>item 1
                <p>item 1.1</p>
                <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">&lt;<span class="hljs-name">hr</span>/&gt;</span></code>
                    <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 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>
<!-- 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>
  • It works correctly after posting but not in preview? Did I understand that right? (Side-note that's CommonMark not Markdown.)
    – bad_coder
    May 12, 2022 at 21:44
  • @bad_coder: yes. I had to post first to test that.
    – outis
    May 12, 2022 at 21:47
  • @bad_coder: should it be tagged [commonmark], rather than [markdown]?
    – outis
    May 12, 2022 at 21:51
  • Yes I think you should retag to [commonmark]. There have been a number of reported issues with preview being different from the post. I don't remember seeing an overall explanation, if someone knows of one please link in the comments.
    – bad_coder
    May 12, 2022 at 21:54


You must log in to answer this question.

Browse other questions tagged .