List bullet missing with code block as the first paragraph of a list (Chrome 12)

Question

With a code block as the first paragraph of a list item, the list bullet goes missing in Chrome 12.

With this markdown

Ordered list:

 1. <pre><code>test</code></pre>

Unordered list:

 *  <pre><code>test</code></pre>

As second paragraph, it's fine:

 *  first paragraph

        second paragraph

I see this result in Chrome 12.0.742.112.

The generated HTML looks correct, so I'm assuming this is a CSS issue. I've checked in Firefox 5.0 and there it looks fine.

Answer 1

As suspected, this is indeed a WebKit bug, and apparently a long-outstanding one at that. They used overflow: hidden in the test case, but it appears to happen for any value of overflow besides visible. I'll see if I can come up with a suitable workaround, but if not I don't think there's much that can be done from this end.

Answer 2

A couple of different ways to do this in markdown that will work on any browser:

---

Ordered list:

1. test

Unordered list:

• test

As second paragraph, it's fine:

• first paragraph

  second paragraph
  

First Approach: You use backticks to indicate that the first two lines are inline code snippets. You don't get syntax highlighting this way, but you don't get that with <pre> and <code> tags anyway.

---

Ordered list:

1.  

   test
   

Unordered list:

•  

  test        
  

As second paragraph, it's fine:

• first paragraph

  second paragraph
  

Second Approach: You use either a string of regular (non-code) text, or a literal space character ( ) or equivalent, to make the list item show up, then you indent the code block using 8 spaces starting on the next line.

The advantage here is that you get syntax highlighting for the code block and it is a lot easier to read. The obvious disadvantage is that it will not be displayed on the same line as the number/bullet. It's still just below the number/bullet, though, and obviously associated with it, so this achieves very much the same general effect as the first approach.