Text missing following fenced code block

AI-generated summary

A user, burke, encountered an issue with text following a fenced code block in a bulleted list being hidden. The user tried various workarounds, including using inline code and referencing the code, but these solutions either lost syntax highlighting or were cumbersome.

Mittineague suggested using inline code, but this solution also lost syntax highlighting. burke acknowledged the suggestion and noted the limitations.

Codinghorror provided the correct solution, which involves using a “loose” list with blank lines between list items. This allows the text following the fenced code block to be displayed correctly and maintains syntax highlighting. burke confirmed that this solution works and thanked codinghorror for the tip.

sam later confirmed that the issue is now fixed, with a link to a related discussion on CommonMark testing.

I was including some text in the last item of a bulleted list and discovered that the text following the code wasn’t rendered by Discourse.
 

Markdown:

* Item 1
* Item 2
    ```javascript
    var msg = "Hello world!";
    console.debug(msg);
    ```
    This is hidden

Rendered:

  • Item 1
  • Item 2
    var msg = "Hello world!";
    console.debug(msg);
    
    This is hidden

I was expecting that indenting the last line (“This is hidden”) with 4 spaces would allow me to continue the bulleted item with text following the code. While I could surely be doing this wrong, it seemed like a bug that the text was actually omitted (hidden) within my post.

If the code doesn’t happen to be the last item in the bulletted list, it behaves slightly differently. The text following the code isn’t hidden and the code is no longer syntax-hlighted as expected:
 

Markdown:

* Item 1
* Item 2
    ```javascript
    var msg = "Hello world!";
    console.debug(msg);
    ```
    This is not hidden
* Item 3

Rendered:

  • Item 1
  • Item 2
    var msg = "Hello world!";
    console.debug(msg);
    
    This is not hidden
  • Item 3

That makes me think I just don’t know how to properly embed code within a bulletted list.

Any thoughts? Am I doing this wrong, is there a bug, or is this not yet a feature of Discourse?

Thanks!

-Burke

1개의 좋아요

Seems like an edge case misuse of MarkDown, but maybe if instead of using the 3 backticks “code block” you used the 1 backtick “inline code” ? (even though it spans more than 1 line)

Thanks for the suggestion. Individual lines is a reasonable workaround, but you lose the syntax highlighting. I guess syntax-highlighting code within a list is asking too much, eh? :wink:

The workarounds I’ve come up within (including yours) are:

Individual lines of code

Markdown

* Item 1
* Item 2
    `var msg = "Hello world!";`
    `console.debug(msg);`
    This is not hidden

Rendered:

  • Item 1
  • Item 2
    var msg = "Hello world!";
    console.debug(msg);
    This is not hidden

Code by reference

####Markdown:
* Item 1
* Item 2
(Figure 1 below)
This is not hidden

##### Figure 1:
```javascript
var msg = "Hello world!";
console.debug(msg);
````

Rendered:

  • Item 1
  • Item 2
    (Figure 1 below)
    This is not hidden
Figure 1:
var msg = "Hello world!";
console.debug(msg);

Code in image

####Markdown:
* Item 1
* Item 2

This is not hidden

Rendered:

  • Item 1
  • Item 2

    This is not hidden

@eviltrout let’s make sure these all get into the test case suite :wink:

No you are missing the correct way to do this in Markdown:

  • Item 1

    I can type some words here

  • Item 2

       var msg = "Hello world!";
       console.debug(msg);
    

    This is not hidden

  • Item 3

Remember fenced code blocks were never part of the classic Markdown spec, such as it was…

I don’t think what you want to do is possible without using a “loose” list, versus a “tight” (no spacing) list.

- Item 1

    I can type some words here


- Item 2

         var msg = "Hello world!";
         console.debug(msg);

    This is not hidden

- Item 3

This is a tight list

  • I am
  • so close
  • to each line

This is a loose list

  • I am

  • So far apart

  • From each line

I always have to remind @sam about the different loose and tight list behaviors since so much is implicit in Markdown. But TL;DR never mix loose and tight lists.

5개의 좋아요

Cool! Thanks for the tip, @codinghorror. It even works with syntax highlighting. :smiley:

* Item 1
                             ← this blank line is important
* Item 2
                             ← this blank line is important
    ```
    var msg = "Hello world!";
    console.log(msg);
    ```
   This text is no longer hidden

          ↓

  • Item 1

  • Item 2

    var msg = "Hello world!";
    console.log(msg);
    

    This text is no longer hidden

I knew lists could be spaced out (loose), but didn’t appreciate how it could effect formatting.

Thanks!

2개의 좋아요
  • Item 1
  • Item 2
    var msg = "Hello world!";
    console.debug(msg);
    
    This is hidden

^^^ Not hidden anymore! :flight_arrival:

4개의 좋아요