Browser dependent problem rendering WMD with Showdown.js?

Posted by CMPalmer on Stack Overflow See other posts from Stack Overflow or by CMPalmer
Published on 2009-05-28T15:58:12Z Indexed on 2010/05/02 18:17 UTC
Read the original article Hit count: 296

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.

© Stack Overflow or respective owner

Related posts about wmd

Related posts about JavaScript