Text missing following fenced code block

markdown-it-review
markdown
(Burke) #1

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

(Mittineague) #2

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)

(Burke) #3

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
(Kane York) #4

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

(Jeff Atwood) #5

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.

(Burke) #6

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!

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

^^^ Not hidden anymore! :flight_arrival:

(Sam Saffron) closed #8