ブラウザに依存する問題Showdown.jsを使用したWMD？

Question

これは簡単です（少なくとも他の誰も同じような問題を抱えているようです）が、どこが壊れているのか分かりません。

私はアプリケーションのページに入力されたデータベースにMarkdown'edテキストを保存しています。テキストはWMDを使用して入力され、ライブプレビューは正しいように見えます。

別のページでは、マークダウンテキストを取得し、Showdown.jsを使用してHTMLクライアント側に戻して表示します。

のは、私はこのテキストを持っているとしましょう：

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

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

私はそれを変換するために、私のjQueryの文書readyイベントでのJavascriptのこのスニペットを使用しています：

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

私はどこ私の問題、これは疑いますですが、ほぼ作品です。 Firefoxで

、私は私が期待したものを得る：

迅速茶色キツネが怠惰犬を飛び越えました。

しかし、IE（7,6）で、私はこれを取得：

迅速茶色キツネが飛び越え怠け者犬。 1. one 1. two 2. three 17. four

明らかに、IEは私のマークダウンコードの中断を取り除き、スペースに変換するだけです。元のコードのビューソースを（スクリプトの実行前に）実行すると、区切りがコンテナDIVの内部にあります。

私は間違っていますか？

はUPDATE

これは、IEのinnerHTML /のinnerText「癖」によって引き起こされ、私はその前に、データバインドコントロールを使用してASP.Netページで、このいずれかを言及している必要があります - は、明らかに異なるがたくさんありますそれ以外は回避策。

Answer 1

問題を引き起こしていたInternet ExplorerのinnerHTML/innerText "quirk"でした。 <pre>とマークされていないすべての要素について、IEは空白を取り除いてからJavascriptに渡します。

マークダウンテキストの要素を<pre>タグに残すことはできませんでした。なぜなら、ショウダウンによって生成されたHTMLは正しく表示されないからです。解決策は、<pre>に一時的にラップしてから変更することでした。

ASP。

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

をとJavaScript/jQueryのは、次のようになります：ネットのコードは今、次のようになります

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

は今、両方のブラウザで正常に動作します...

Answer 2

それはuse Showdown with or without jQueryに簡単です。ここにjQueryの例があります：

// 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'); 
});