Markdown: Code blocks in numbered lists

[TheJaredWilcurt]

On GitHub, Reddit, etc. I can do this

1. The first step is to npm install
2. Next add this code:

   console.log('some code');

3. Step 3 is to...
4. The the fourth step is....
5. Step 5...

But on dev.to it looks like this:

1. The first step is to npm install
2. Next add this code:

console.log('some code');

1. Step 3 is to...
2. The the fourth step is....
3. Step 5...

---

If there is a way to embed code blocks into ordered lists without breaking the ordering, it is not documented anywhere.

This is also a pattern that is slightly different on many different sites, where the number of spaces required at the start of the code block varies, whether it allows syntax highlighting in list code blocks, whether it allows triple graves, and whether or not the remaining lines need indentation.

There are a lot of possible permutations of how this could be implemented and without a live mardown preview, doing trial-and-error to attempt to make it work is frustrating. You need to add or remove a space at the start of every line of code, click preview, scroll scroll scroll down, and then click preview again to go back and try something else.

[jessleenyc]

Thanks for the issue! @maestromac any thoughts on this?

[aspittel]

I think this is a bug in RedCarpet which we use for Markdown! Think it would be awesome for someone to tackle that though. vmg/redcarpet#664

[jessleenyc]

Good call, going to label this as blocked

[TheJaredWilcurt]

The issue you linked to deals with code blocks that have lines that begin with # being converted to Headings. My issue is not related to that. It is that any codeblock will force the end of the list, rather than being indented inside the list. The code block renders accurately, just not in the correct nesting.

<ol>
  <li>asdf</li>
</ol>
<div class="highlight">
  <pre class="highlight javascript">
    <code>
      ...
    </code>
  </pre>
</div>
<ol>
  <li>qwer</li>
</ol>

when it should be doing

<ol>
  <li>asdf
    <div class="highlight">
      <pre class="highlight javascript">
        <code>
          ...
        </code>
      </pre>
    </div>
  </li>
  <li>qwer</li>
</ol>

[stale]

Thanks for contributing to this issue. As it has been 90 days since the last activity, we are automatically closing the issue in 7 days. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If this issue still requires attention, please respond with a comment. Happy Coding!

[TheJaredWilcurt]

This issue is still occurring. Again, it is not related to the linked issue above. This is a separate issue, and should be fixed as it makes me not want to use this platform.

Until you can solve this issue a work around would be to deliver the markdown code directly to the client and use Marked.js to render the HTML on the fly. Since Marked does not suffer from these bugs.

Or you could just fix this issue in whatever library you are using.

[jessleenyc]

Thanks for the additional clarification @TheJaredWilcurt! This issue is approved for anyone who's interested in working on it. Should be able to fix it in the MarkdownParser.

[bolariin]

I was able to have code blocks inside numbered lists while retaining the order of the list. It looks the code block shouldn't be on the same line as text within the numbered list. I was able to get the same result from indenting one space, two spaces and four spaces from the position where the text within the numbered list begins.

Using the markdown below, I was able to get the result in image below the markdown text

1. The first step is to npm install
2. Next add this code:
    ```
    console.log('some code');
    ```
3. Step 3 is to...
4. The the fourth step is....
5. Step 5...

Not sure if it actually an issue but codeblocks can't be the only text within a point in a list.
This ends up looking like the image below

1. The first step is to npm install
2. ```
    console.log('some code');
    ```
3. Step 3 is to...
4. The the fourth step is....
5. Step 5...

but on GitHub it actually rendered as expected

1. The first step is to npm install

2.  console.log('some code');
   

3. Step 3 is to...
4. The the fourth step is....
5. Step 5...

[TheJaredWilcurt]

I can only get it to embed in the list with 4 spaces (an improvement from before), but then it also forces all text content in the rest of the list to be wrapped by a paragraphs.

<ol>
  <li>The first step is to <code>npm install</code></li>
  <li>
    <p>Next add this code:<br></p>
    <pre class="highlight plaintext"><code>console.log('some code');
</code></pre>
  </li>
  <li><p>Step 3 is to...</p></li>
  <li><p>The the fourth step is....</p></li>
  <li><p>Step 5...</p></li>
</ol>

which adds a bunch of unwanted padding

[rhymes]

@jeikabu in #5350 added this comment:

Same problem as #1855, but when publishing from RSS where the feed is github pages.

Understand it's a problem with an upstream package, but for content pulled from elsewhere can the "hack" described in #1855 just be applied? I've been manually fixing up posts for over a year, and doing it with the web-based text editor has gotten... old.

[rhymes]

This has been fixed in Redcapet 3.5.0, see vmg/redcarpet#664 (comment)

I verified it with the markdown in this comment #1855 (comment) - there's a slight UI bug but it's unrelated.

Thus I'm going to close this and surface the UI bug

[ViacheslavZyrianov]

Bug still not fixed