Проблема с браузером при рендеринге WMD с Showdown.js?

Question

Это должно быть легко (по крайней мере, похоже, что у кого-то еще нет аналогичной проблемы), но я не вижу, где он ломается.

Я сохраняю Markdown'ed текст в базе данных, которая вводится на странице моего приложения. Текст вводится с использованием WMD, и просмотр в прямом эфире выглядит корректно.

На другой странице я извлекаю текст уценки и используя Showdown.js, чтобы преобразовать его обратно в HTML-клиентскую сторону для отображения.

Скажем, у меня есть этот текст:

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

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

Я использую этот фрагмент Javascript в моем JQuery документ, готовый событие, чтобы преобразовать его:

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

Я подозреваю, что это где моя проблема есть, но это почти работает.

В FireFox, я получаю то, что я ожидал:

Быстрого коричневого лис перепрыгнул через ленивых собак.

1. один
2. два
3. три
4. четыре

Но в IE (7 и 6), я получаю это:

Быстрый коричневый лиса перепрыгнула через ленивый собаки. 1. один 1. два 4. три 17. четыре

Так что, по-видимому, IE снимает разрывы в моем коде кода и просто преобразует их в пробелы. Когда я делаю источник исходного кода (до запуска скрипта), разрывы находятся внутри контейнера DIV.

Что я делаю неправильно?

UPDATE

Это вызвано/InnerText «причуда» IE innerHTML и я уже упоминал, что этот на странице ASP.NET, используя данные, связанные элементы управления - там, очевидно, много разных обходные пути в противном случае.

Answer 1

Это проблема, вызванная внутренним HTTML/innerText Internet Explorer. Для всех элементов, которые не были помечены как <pre>, IE пропускает перед ними пробелы перед передачей их в Javascript.

Я не мог просто оставить элемент с текстом меток в тегах <pre>, потому что тогда HTML, созданный Showdown, не будет отображаться правильно. Решение заключалось в том, чтобы временно приостановить его в <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'); 
});