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

StackOverflow https://stackoverflow.com/questions/12794

Вопрос

Я пытаюсь использовать 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 оба задохнутся.Ничего особенного, но мне бы хотелось, чтобы это было как можно проще.

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

Это было полезно?

Решение

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

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

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

Другие советы

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

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

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top