Как добавить тег pre внутри тега кода с помощью jQuery?
-
08-06-2019 - |
Вопрос
Я пытаюсь использовать 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
пробелы, сохраняющие силу с помощью CSSwhite-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.Но это решение должно сработать.