problème dépendant du navigateur de rendu des ADM avec Showdown.js?

Question

Cela devrait être facile (au moins personne ne semble être avoir un problème similaire), mais je ne vois pas où il se brise.

Je stocker 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 ADM et la prévisualisation en direct semble correct.

Sur une autre page, je récupérer le texte de démarquage et en utilisant 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 presque fonctionne.

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

Le rapide brun fox sauté par-dessus le paresseux chiens.

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

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

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

Donc, apparemment, IE se déshabille les pauses dans mon code Markdown et juste de les convertir en espaces. Quand je fais une source de vue du code d'origine (avant l'exécution de script), les pauses sont là à l'intérieur du conteneur DIV.

Qu'est-ce que je fais mal?

UPDATE

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

.

Answer 1

Il a été l'Internet Explorer innerHTML / innerText « bizarrerie » qui a été l'origine du problème. Pour tous les éléments qui ne sont pas marqués comme <pre>, IE bandes des espaces pour eux avant de les remettre hors de Javascript.

Je ne pouvais pas laisser l'élément avec le texte de démarques dans les balises <pre> car alors le code HTML généré par Showdown ne semble pas droit. La solution consistait à envelopper temporairement dans un <pre> puis changer.

Le code ASP.Net ressemble à ceci 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 utilisation Showdown avec ou sans 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');
});