What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 127 Stack Exchange communities.

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 bullet points are missing

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.

share|improve this question
2  
Works just fine when you use the correct markdown syntax, instead of HTML tags... Like most of these bugs. –  Cody Gray Jul 24 '11 at 14:43
    
The missing numbers of your Sandbox post (2. and 5. in the first list, and 1. in the second list) do show in my Firefox (though a bit ugly). But not in my Chrome and Safari, on a Mac. –  Arjan Jul 24 '11 at 14:44
1  
@Cody: What would the correct markdown syntax for this be? I've tried a few ways that either result in a missing bullet or no code formatting. –  hammar Jul 24 '11 at 14:46
2  
Hm, this seems like a WebKit rendering bug. The numbers aren't appearing because of the overflow: auto on the <pre> blocks, but there's not any reason I can think of that that should make sense. –  Tim Stone Jul 24 '11 at 16:26
    
@Tim: This seems to be correct. I can reproduce the problem with this minimal example. –  hammar Jul 24 '11 at 16:45
add comment

2 Answers

up vote 10 down vote accepted

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.

share|improve this answer
add comment

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 (&nbsp;) 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.

share|improve this answer
add comment

You must log in to answer this question.

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