3

When you're trying to quote multiple pieces of code, you might use a bulleted list, where each item in the list is a blockquote that contains a code snippet. To wit:

Here's my list:

- >     printf("foo");

- >     return;

But when I try to do this, the bullet gets suppressed. The rendered output is as follows:

Here's my list:

  • printf("foo");
    
  • return;
    

This gets rendered incorrectly on Safari and Chrome (however, it works properly on Firefox).

As for why I'm doing this, it's because I want to provide commentary below each quoted code fragment, but still intended as part of the enclosing list item. I omitted this to create my MCVE. :-)


Note that everything renders as expected if I use inline code formatting:

Here's my list:

  • printf("foo");

  • return;

but I don't want to do this, since the formatting is slightly different for inline code fragments vs. code blocks. Besides, what if I want to quote a multi-line block of code?

6
  • Chrome is known to have issues with list markers in some cases. Microsoft Edge and IE have some issues as well, but at least they display the marker. Displays correctly on Firefox.
    – BoltClock Mod
    Commented Jan 2, 2017 at 15:45
  • Oh, interesting, @bolt. I didn't consider it might be a browser-specific issue. I'm using Safari at the moment, but it does work on Waterfox!
    – Cody Gray Mod
    Commented Jan 2, 2017 at 15:46
  • 1
    Based on how it looks on Microsoft Edge and IE, and the fact that the culprit appears to be the overflow: auto style of the pre element, this is the same issue that I describe here. Never change, WebKit and IE. Never change.
    – BoltClock Mod
    Commented Jan 2, 2017 at 15:51
  • The bullet shows up if I remove content: none from blockquote:before, q:before, blockquote:after, q:after, although it is misaligned. Setting overflow: visible for pre fixes it, though, just as @BoltClock suggested. And adding this style doesn't break anything on Firefox—in fact, it fixes a vertical alignment issue for the bullet!
    – Cody Gray Mod
    Commented Jan 2, 2017 at 15:56
  • 1
    Also, you just made me realize that I've been posting answers with invisible bullet markers for years, none the wiser. (This bug occurs no matter how many other elements you nest the code block in, so long as no other content precedes the code block within the list item.)
    – BoltClock Mod
    Commented Jan 2, 2017 at 16:29
  • You can remove the blockquotes and still reproduce the bug (see my revision 4). It's apparently only caused by putting code blocks in a list.
    – Laurel
    Commented Aug 23, 2022 at 14:22

0

You must log in to answer this question.

Browse other questions tagged .