Geek Answers Handbook

Browser dependent problem passing WMD with Showdown.js?

It should be easy (at least it looks like someone else doesn't have a similar problem), but I don't see where it breaks.

I save the Markdown'ed text in the database, which is entered on the page of my application. The text is entered using WMD and the live view looks right.

On another page, I extract the markup text and using Showdown.js to convert it back to an HTML client 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 use this javascript snippet in my jQuery ready event to convert it:

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

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

In FireFox, I get what I expected:

A quick brown fox jumped over the lazy dogs.

  • one
  • two
  • three
  • four

But in IE (7 and 6) I get the following:

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

So, apparently, IE removes the gaps in my code and just converts them to spaces. When I make the source code (before the script is run), the gaps are inside the DIV container.

What am I doing wrong?

UPDATE

This is caused by quirk IE innerHTML / innerText, and I should have mentioned before that this one on an ASP.Net page using data-bound controls - otherwise, obviously, there are many different workarounds.

+4
source share
2 answers

This caused the Internet Explorer innerHTML / innerText "quirk" problem. For all elements that were not marked as <pre> , IE breaks spaces for them before passing them to Javascript.

I could not just leave the element with the label text in the <pre> tags because the HTML generated by Showdown would not display correctly. The solution was to temporarily suspend it in <pre> , and then change it.

Now the ASP.Net code looks like this:

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

And Javascript / jQuery looks like this:

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

now works fine in both browsers ...

+5
source

It's easy to use Showdown with or without jQuery . Here is 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'); });
+2
source

More articles:


All Articles