I noticed a strange formatting glitch in FireFox 3.6.12 when the preview for my answer contains code. Specifically, when the syntax highlighter kicks in on the preview, lines in a code block that exceed the width of the formatting container are increasing the formatting container's width and clipping it outside of the preview container.

Clipping error

On a related note, what exactly triggers the syntax highlighter to kick in? I was unable to pin-point which client event causes the box to convert the plain text into a highlighted block.

  • Indenting by four spaces triggers the syntax highlighter. See the SE Markdown help page (which is what the colored question mark box at top right of every post editor links to).
    – Pops
    Dec 8, 2010 at 17:38
  • @PopularDemand I did not mean what triggers code formatting, just what triggers the syntax highlighter inside of the preview pane. If you type an answer with code and indent 4 spaces, the preview pane will initially format your input in a gray background with black text. At some point or another the syntax highlighter kicks in and adds coloring to the plain text- this is the part I'm curious about. Dec 8, 2010 at 17:41
  • @Nathan, ah, gotcha. It always seems to take the same amount of time, for me, counting from my last keypress in the text field. But that's just a guess.
    – Pops
    Dec 8, 2010 at 19:38
  • Isn't this [status-by-design]?
    – jcolebrand
    Dec 8, 2010 at 20:30
  • I [can-repro] in Chrome 8.0.552.200 beta. Dec 10, 2010 at 1:12
  • @DennisWilliamson I think you're missing the problem. Look at the image more closely and you'll notice that the code block is breaking out of its container. Dec 10, 2010 at 1:33
  • I don't know why you think I'm missing the problem. I said "I [can-repro]" as in "I see it, too." What did you think I meant? Dec 10, 2010 at 1:48
  • @DennisWilliamson I failed to notice your second comment before I posted. My mistake. Dec 10, 2010 at 7:18
  • 1
    But I only made one. I'm confused! Dec 10, 2010 at 9:20
  • @DennisWilliamson OH that is what happened. I meant to @drachenstern instead of you. I need to not post comments when I'm sleep deprived. Dec 10, 2010 at 15:27
  • As a side note, this appears to be fixed now, likely due to the recent changes to syntax highlighting.
    – Tim Stone
    Dec 18, 2010 at 7:34

3 Answers 3


It seems that something is shoving the contents of the post body into the class of the PrettyPrint <pre> tag (using the answer ChrisF linked to as an example):

alt text

Both <pre> tags got this same convoluted class (visible in the second underlined <pre> tag, on the left) when the formatter kicked in. I removed the extra material from the class attribute on the first tag, and you'll note that the corresponding preview went back to normal.

I'm not sure yet what causes the content of the post to be put into the class attribute, unfortunately. However, the reason why there's an issue, and the reason why Jeff couldn't reproduce it, is because the contents of your post have to have a class name that corresponds to something defined in the site's stylesheet.

In your case, you have the word "answer" in the text above your post (not visible in the question), which assigns the <pre> tag a width of 730px based on the .answer CSS class. If you remove that word, you should notice the problem go away.

Additional Information

So master.js has a function called styleCode() that calls addClass() on each <pre> tag with its parameter, if its parameter isn't empty. But it's parameter is never empty, since typeWatch() in question.js will only call the callback (in this case styleCode()) when $('#wmd-input').val() is of a certain length and has changed, and it will call said callback with that value.

This seems to imply that the contents of the post will always be put into the class name of each pretty-printed <pre> element, and I can't see what adding the parameter as a class name is supposed to be doing. So, unless there's a reason not to, it looks like fixing things would be as simple as modifying the styleCode() function by removing the following commented out lines:

$("pre code").parent().each(function () {
    if (!$(this).hasClass("prettyprint")) {
        //if (c != "") {
        //    $(this).addClass(c)
        a = true

There could be a reason it's assigned that way, but I didn't see anything obvious. Naturally making guesses based on minified JavaScript isn't 100% reliable to begin with, so hopefully the dev team will have a final say on this. :)

  • 1
    wow, amazing analysis! Dec 10, 2010 at 7:42
  • @JeffAtwood Thanks! It was a fun mystery to try and unravel, heh. :)
    – Tim Stone
    Dec 10, 2010 at 7:50
  • @TimeStone Impressive detective work. Very well done! Dec 10, 2010 at 15:30

I'm seeing this in Chrome 8.0.552.215 on my answer to this question

alt text

As you can see the text is also too large.

  • I was able to reproduce what you're seeing in Firefox 3.6 on your answer, but it took a little effort to get the syntax highlighter to kick in to trigger it. Now, to figure out what's happening...
    – Tim Stone
    Dec 10, 2010 at 0:50
  • @TimStone Tell me about it, I spent quite some time trying to figure out what triggered it. Dec 10, 2010 at 0:55

I can't reproduce this in Firefox (latest version).

alt text

I tried to repro with your code on the edit page and it looks fine to me, no extension:


You must log in to answer this question.

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