# Formatting error on answer preview of code

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.

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 '10 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. –  Nathan Taylor Dec 8 '10 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 '10 at 19:38
Isn't this [status-by-design]? –  jcolebrand Dec 8 '10 at 20:30
I [can-repro] in Chrome 8.0.552.200 beta. –  Dennis Williamson Dec 10 '10 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. –  Nathan Taylor Dec 10 '10 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? –  Dennis Williamson Dec 10 '10 at 1:48
@DennisWilliamson I failed to notice your second comment before I posted. My mistake. –  Nathan Taylor Dec 10 '10 at 7:18
But I only made one. I'm confused! –  Dennis Williamson Dec 10 '10 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. –  Nathan Taylor Dec 10 '10 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 '10 at 7:34

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):

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.

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")) {$(this).addClass("prettyprint");
//if (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. :)

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

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

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 '10 at 0:50
@TimStone Tell me about it, I spent quite some time trying to figure out what triggered it. –  Nathan Taylor Dec 10 '10 at 0:55