3

Compare the way this list looks in the post versus the screenshot of the preview:

text:

1. { label: `Baz ${x ? n1 : n2}`, kind: "B", } satisfies B, 1. { label: `Baz ${x ? n1 : n2}` satisfies `Baz ${number}`, kind: "B", },

Here is a screenshot of the preview:

enter image description here

I'm not sure which version is rendering correctly (I hope it's the preview, because that's how I wanted it to look), but it seems like a bug that there is a difference between preview and the post.

Workaround

This can be fixed by putting a blank comment on the first line of the list. Compare what renders to a screenshot of the markdown:

text:

  1. {
  label: `Baz ${x ? n1 : n2}`,
  kind: "B",
} satisfies B,

  2. {
  label: `Baz ${x ? n1 : n2}` satisfies `Baz ${number}`,
  kind: "B",
},

enter image description here

Improve this question
7
  • 1
    So it looks like having text right before the list is throwing it off.
    – Sonic the Anonymous Hedgehog
    Commented Mar 8 at 1:04
  • @SonictheAnonymousHedgehog Yep. Seems like it.
    – Daniel Kaplan
    Commented Mar 8 at 1:04
  • It's valid HTML comment text but any other HTML unsupported by markdown would do.
    – philipxy
    Commented Mar 8 at 2:21
  • Answers do not belong in question posts, put them in answer posts.
    – philipxy
    Commented Mar 8 at 2:22
  • 1
    Please use a code block to show the literal content of the relevant part of the post before formatting by preview/publishing.
    – philipxy
    Commented Mar 8 at 2:24
  • The demo on the CommonMark site formats it as in the edit preview here.
    – Makyen
    Commented Mar 9 at 17:16
  • Thus, the backend rendered version is, presumptively, not compliant with CommonMark, so this is a bug. However, it would be beneficial to go through the CommonMark specification to determine exactly what the specification says should happen here.
    – Makyen
    Commented Mar 9 at 17:17

1 Answer 1

Reset to default
3

I seem to remember that putting the code fence on the same line as the list marker, but indenting the rest of the block to match the first character of the fence, works:

1. ```
   {
     label: `Baz ${x ? n1 : n2}`,
     kind: "B",
   } satisfies B,
   ```
1. ```
   {
     label: `Baz ${x ? n1 : n2}` satisfies `Baz ${number}`,
     kind: "B",
   },
   ```

Gives:

  1. {
  label: `Baz ${x ? n1 : n2}`,
  kind: "B",
} satisfies B,

  2. {
  label: `Baz ${x ? n1 : n2}` satisfies `Baz ${number}`,
  kind: "B",
},

A screenshot of what I see after posting this answer:

This matches the behaviour of fenced code blocks in lists in general, where you have to indent the whole thing by three spaces x nesting level, and have the code block aligned with the first character of the starting fence.

Improve this answer
1
  • three spaces x nesting level I only bring this up because I found it interesting: 3 spaces work until your list number reaches double digits, then you need to change everything (or maybe just those that follow, can't remember) to 4 spaces. I assume something similar happens if the list reaches triple digits.
    – Daniel Kaplan
    Commented Mar 8 at 4:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .