Browser dependent problem rendering WMD with Showdown.js?

Question

This should be easy (at least no one else seems to be having a similar problem), but I can't see where it is breaking.

I'm storing Markdown'ed text in a database that is entered on a page in my app. The text is entered using WMD and the live preview looks correct.

On another page, I'm retrieving the markdown text and using Showdown.js to convert it back to HTML client-side for display.

Let's say I have this text:

The quick **brown** fox jumped over the *lazy* dogs.

1. one
1. two 
4. three
17. four

I'm using this snippet of Javascript in my jQuery document ready event to convert it:

var sd = new Attacklab.showdown.converter();
$(".ClassOfThingsIWantConverted").each(function() {
   this.innerHTML = sd.makeHtml($(this).html());
}

I suspect this is where my problem is, but it almost works.

In FireFox, I get what I expected:

The quick brown fox jumped over the lazy dogs.

1. one
2. two
3. three
4. four

But in IE (7 and 6), I get this:

The quick brown fox jumped over the lazy dogs. 1. one 1. two 4. three 17. four

So apparently, IE is stripping the breaks in my markdown code and just converting them to spaces. When I do a view source of the original code (prior to the script running), the breaks are there inside the container DIV.

What am I doing wrong?

UPDATE

It is caused by the IE innerHTML/innerText "quirk" and I should have mentioned before that this one on an ASP.Net page using data bound controls - there are obviously a lot of different workarounds otherwise.

Answer 1

It was the Internet Explorer innerHTML/innerText "quirk" that was causing the problem. For all elements that weren't marked as <pre>, IE strips whitespace for them before handing them off to Javascript.

I couldn't just leave the element with the markdown text in <pre> tags because then the HTML generated by Showdown wouldn't appear right. The solution was to wrap it temporarily in a <pre> and then change it.

The ASP.Net code looks something like this now:

<div class="ClassOfThingsIWantConverted">
    <pre><%# Eval("markdowntext") %></pre>
</div>

And the Javascript/jQuery looks like this:

var sd = new Attacklab.showdown.converter();
$(".ClassOfThingsIWantConverted").each(function() {
   this.html(sd.makeHtml($("pre",this).text()));
}

works fine on both browser now...

Answer 2

It’s easy to use Showdown with or without jQuery. Here’s a jQuery example:

// See http://mathiasbynens.be/notes/showdown-javascript-jquery for a plain JavaScript version as well
$(function() {
 // When using more than one `textarea` on your page, change the following line to match the one you’re after
 var $textarea = $('textarea'),
     $preview = $('<div id="preview" />').insertAfter($textarea),
     converter = new Showdown.converter();
 $textarea.keyup(function() {
  $preview.html(converter.makeHtml($textarea.val()));
 }).trigger('keyup');
});