Problème dépendant du navigateur de rendu WMD avec Showdown.js?

Question

Cela devrait être facile (au moins personne d'autre ne semble avoir un problème similaire), mais je ne peux pas voir où il se casse.

Je stocke du texte Markdown'ed dans une base de données qui est entrée sur une page dans mon application. Le texte est entré en utilisant WMD et l'aperçu en direct semble correct.

Sur une autre page, je récupère le texte du markdown et utilise Showdown.js pour le reconvertir en HTML côté client pour l'affichage.

Disons que j'ai ce texte:

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

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

J'utilise ce bout de Javascript dans mon document jQuery événement prêt à convertir:

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

Je soupçonne que c'est là mon problème est, mais fonctionne presque fonctionne.

Dans FireFox, je reçois ce que je pensais:

Le renard brun rapide sauté par-dessus les paresseux chiens.

1. un
2. deux
3. trois
4. quatre

Mais dans IE (7 et 6), je reçois ceci:

Le brun rapide fox sauté par-dessus le paresseux chiens. 1. un 1. deux 4. trois 17. quatre

Donc apparemment, IE supprime les ruptures dans mon code de démarques et les convertit juste en espaces. Quand je fais une source de vue du code original (avant que le script ne s'exécute), les sauts sont là à l'intérieur du conteneur DIV.

Qu'est-ce que je fais mal?

MISE À JOUR

Elle est causée par la « bizarrerie » IE innerHTML/innerText et j'aurais mentionné avant que celui-ci sur une page ASP.Net à l'aide de données contrôles liés - il y a évidemment beaucoup de différents solutions de contournement autrement.

Answer 1

Internet Explorer innerHTML/innerText "quirk" était à l'origine du problème. Pour tous les éléments qui n'ont pas été marqués <pre>, IE leur enlève un espace blanc avant de les transmettre à Javascript.

Je ne pouvais pas simplement laisser l'élément avec le texte de la marque dans les balises <pre> car le code HTML généré par Showdown ne s'afficherait pas correctement. La solution consistait à l'envelopper temporairement dans un <pre> puis à le changer.

L'ASP.Code Net ressemble à quelque chose comme ça maintenant:

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

Et le Javascript/jQuery ressemble à ceci:

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

fonctionne très bien sur les deux navigateur maintenant ...

Answer 2

Il est facile de use Showdown with or without jQuery. Voici un exemple 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'); 
});