javascriptjavascriptjqueryhtmlinternet-explorer

Как добавить предварительный тег внутри тега кода с помощью jQuery?

просмотры: 7.1K

Я пытаюсь использовать jQuery для форматирования блоков кода, в частности, чтобы добавить <pre> тег внутри <code> тега:

$(document).ready(function() {
   $("code").wrapInner("<pre></pre>");
});

Firefox правильно применяет форматирование, но IE помещает весь блок кода в одну строку. Если я добавлю оповещение 

alert($("code").html());

Я вижу, что IE вставил дополнительный текст в тег pre:

<PRE jQuery1218834632572="null">

Если я перезагружу страницу, номер, следующий за jQuery, изменится.

Если я использую wrap() вместо wrapInner(), чтобы обернуть тег <pre> снаружи <code>, и IE, и Firefox обрабатывают его правильно. Но не должно ли <pre> работать и внутри <code> ?

Я бы предпочел использовать, wrapInner() потому что затем я могу добавить класс CSS к <pre> тегу для обработки всего форматирования, но если я использую wrap(), мне нужно поместить форматирование страницы CSS в <pre> тег и форматирование текста / шрифта в <code> теге или Firefox и IE оба задыхаются. Ничего особенного, но я бы хотел, чтобы это было как можно проще.

кто-нибудь еще сталкивался с этим? Я что-то упускаю?

Источник

Ответов (5)

Решение

В этом разница между блочными и встроенными элементами. preявляется элементом блочного уровня . Нельзя помещать его в code тег, который может содержать только встроенный контент .

Поскольку браузеры должны поддерживать любой ужасный суп из тегов, который они могут найти в реальной сети, Firefox пытается делать то, что вы имеете в виду. IE обрабатывает это по-другому, и это нормально по спецификации; поведение в этом случае не определено, потому что этого никогда не должно происходить.

  • Не могли бы вы вместо того, чтобы заменить на codeэлемент с pre? (Из-за проблемы с блокировкой / встроением технически это должно работать только в том случае, если элементы находятся внутри элемента с «потоковым» содержимым , но браузеры в любом случае могут делать то, что вы хотите.)
  • Почему это вообще codeэлемент, если вы хотите preего поведения?
  • Вы также можете дать codeэлементу возможность preсохранять пробелы с помощью CSS white-space: pre, но, очевидно, IE 6 учитывает это только в строгом режиме .
Источник

Кстати, я не знаю, связано ли это, но предварительные теги внутри тегов кода не будут проверяться в строгом режиме.

Источник

Как указано в markpasc, элемент PRE внутри элемента CODE не допускается в HTML. Лучшее решение - изменить код HTML для использования <pre> <code> (что означает предварительно отформатированный блок, содержащий код) непосредственно в HTML для блоков кода.

Источник

Вы используете последнюю версию jQuery? Что если вы попробуете

$("code").wrapInner(document.createElement("pre"));

Так лучше или результат такой же?

Источник

Вы можете использовать html (), чтобы обернуть его:

$('code').each(function(i,e)
{
    var self = $(e);
    self.html('<pre>' + self.html() + '</pre>');
});

Как упоминалось выше, вам лучше изменить свой html. Но это решение должно работать.

Источник